Hello, Composition World - Part 2

Congratulations! You have finished the effect part. Now, let’s talk about something more interesting.

Time to talk about some animations

The Composition API provides a powerful animation engine which allows us to create quick and fluent animations with high performance. Developers can improve the user experiences with the help of Composition animations.

Generally, there are two types of animations: key frame animation and expression animation.

I’d like to start from key frame animation that we are all familiar with.

Key frame animation

I think most of you have already familiar with key frame animation, especially for those who used to create animations using XAML Storyboard. In key frame animation, you let some properties change over time by inserting key frames. It’s exactly the same in Composition API.

var animation = _compositor.CreateScalarKeyFrameAnimation();
animation.InsertKeyFrame(0.0f, 0.0f);
animation.InsertKeyFrame(1.0f, 100.0f);
animation.Duration = TimeSpan.FromSeconds(4);

This snippet creates a key frame animation which change a value from 0 to 100 within 4 seconds.

Then, bind this animation to the property you want to change and start the animation.

spriteVisual.Brush.StartAnimation("Blur.BlurAmount", animation);

But note that if you want to animate an effect, don’t forget to add the property you want to change to the “animatable properties” list while creating the effect.

var blurEffect = new GaussianBlurEffect
{
	Name = "Blur",
	BlurAmount = 5,
	BorderMode = EffectBorderMode.Hard,
	Source = new CompositionEffectSourceParameter("backdropBrush")
};
var effectFactory = _compositor.CreateEffectFactory(blurEffect,new[] { "Blur.BlurAmount" });

Expression animation

Unlike key frame animation, expression animation describes an animation with expressions, which is more like a reference based animation. The expression allows us to create a connection between the animation and other properties. In other words, for most cases, expression animation is driven by other properties instead of running independently. It can be driven by many different sources such as another animation and user input.

The official sample “Gear animation” shows us one of the most typical cases of using expression animation.

In this example, we have a couples of gears. Each gear is animated based on the animation of the gear preceding it, even if the preceding gear suddenly changes its speed or rotation direction. Obviously, a simple key frame animation can’t do this but expression animation provides us with a straightforward solution for this problem.

Before creating the expression animation, we should add an animation for the leading gear (red) using key frame animation.

var animation1 = _compositor.CreateScalarKeyFrameAnimation();
animation1.InsertKeyFrame(0.0f, 0);
animation1.InsertKeyFrame(1.0f, 360f);
animation1.Duration = TimeSpan.FromSeconds(5);
animation1.IterationBehavior = AnimationIterationBehavior.Forever;

After that, we can create the animation for the rest of gears (gray) with the expression -visual1.RotationAngleInDegress.

ExpressionAnimation animation2 = _compositor.CreateExpressionAnimation("-visual1.RotationAngleInDegrees");

This expression describes an animation which changes the value with the rotation angle of visual1.

Then, we need to tell the animation engine what visual1 refers to by setting the reference parameter.

animation2.SetReferenceParameter("visual1", visual1);

Finally, apply animations to the target properties of visual1 and visual2.

visual1.StartAnimation("RotationAngleInDegrees", animation1); 
visual2.StartAnimation("RotationAngleInDegrees", animation2);

By doing so, the rotation angle of visual2 will change with visual1 while the rotation angle of visual1 is determined by the key frame animation we defined just now (animation1).

Interaction Tracker

To be continued…