Animation Easing allows for you to apply built in animation functions to your Silverlight controls. The result is a variety of animation effects that make your controls move in a more realistic way. For example, you can add springiness to your controls, set how many times you want it to bounce when it hits a destination point, etc.
The following Easing functions can be applied to your animations.
- BackEase – Moves the ball backwards by an amount specified through its amplitude before moving forward.
- BounceEase – Creates an effect like a bouncing ball.
- CircleEase – Accelerates the animation based upon a circular function.
- CubicEase – Accelerates the animation based upon a cubic function.
- ElasticEase – Uses springiness and oscillation to animate.
- ExponentialEase – Accelerates the animation based upon an exponent value.
- PowerEase – Accelerates the animation based upon a power of time.
- QuadraticEase – Accelerates the animation based upon the square of time.
- QuarticEase – Accelerates the animation based upon the cube of time.
- QuinticEase – Accelerates the animation based upon the time to the power of 5.
- SineEase – Accelerates the animation along a sine wave.
Each of these has can have an EasingMode set to one of the following options:
- EaseOut – Ease takes place at the beginning of the animation.
- EaseIn – Ease takes place at the end of the animation.
- EaseInOut – EaseIn takes place for half the animation followed by EaseOut.
The best way to visual these is to look at the charts provided by MSDN as follows:
http://msdn.microsoft.com/en-us/library/system.windows.media.animation.easingmode.aspx
The follow properties are available to certain easing functions:
- Amplitude: This affects the retraction before and/or after the animation. Default is 1.
- Bounces: Number of bounces to occur. Default is 3.
- Bounciness: Determines how bouncy a bounce is. Default is 2.
- Oscillations: Number of times the object slides back and forth to its target destination. Default is 3.
- Springiness: The smaller this value, the stiffer the spring and the faster the elasticity decreases in intensity over each oscillation. Default is 3.
- Exponent: The exponent used to determine the interpolation of the animation. Default is 2.
- Power: The exponential power of the objects animation interpolation. Default is 2.
Now, on to the code! I set up a Storyboard object with a DoubleAnimation. The DoubleAnimation is an animation sequences that moves the object from Top=30 to Top=250 over a period of 5 seconds.
<Canvas>
<Canvas.Resources>
<Storyboard x:Name="EaseSB">
<DoubleAnimation x:Name="EaseAnimation" From="30" To="250" Duration="0:0:05"
Storyboard.TargetName="TargetBall" Storyboard.TargetProperty="(Canvas.Top)">
</DoubleAnimation>
</Storyboard>
</Canvas.Resources>
<Image x:Name="TargetBall" Source="soccerball.png" Width="48" Canvas.Top="30"
Canvas.Left="50"></Image>
</Canvas>
This animation is targetting TargetBall which is simply an Image of a ball:
<Image x:Name="TargetBall" Source="soccerball.png" Width="48" Canvas.Top="30"
Canvas.Left="50"/>
When you run the demo below, the appropriate function is called to execute the animation. For example, when I run the BackEase animation I call this function:
This animation is targetting TargetBall which is simply an Image of a ball:
private voidBackEase()
{
BackEase backEase = newBackEase();
try
{
backEase.Amplitude = Convert.ToDouble(AmplitudeTB.Text);
}
catch{ }
backEase.EasingMode = GetEasingMode();
EaseAnimation.EasingFunction = backEase;
EaseSB.Begin();
}
The following demo lets you try out each of these functions setting the properties they expose.
[silverlight: Tip21_AnimationEasing.xap]
Source: Tip21_AnimationEasing.zip
Thanks,
–Mike
Very interesant tip, but there’s a problem in the download path.
Fixed, thanks for pointing it out!
Hi Mike,
Thanks for this explanation. I’ve used this information (giving credit back to you) in my article for CodeProject: Building a Pandora clone with Silverlight 4.
Thanks again!
Why is the animation jerky?
Nice example clearly explained. My question to you is have you noticed the jerkiness of the simple animations in Silverlight? As simple as this soccerball example is, the animation is not completely smooth as there are small jerks in the animation.
I have been trying to do simple animations with optimized Silverlight performance. Microsoft lists performance tips which I am very familiar with http://msdn.microsoft.com/en-us/library/cc189071(v=vs.95).aspx but they do not seem to improve it to a smooth production-ready animation. Are there any thoughts or performance tips that would “remove the jitters” from your soccer ball example?
Thanks,
Bryon