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]

Thanks,

–Mike