Silverlight Tips of the Day - Blog by Mike Snow

Silverlight Tip of the Day #107 – Animation Easing Demo

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 functions that you can set include:

• BackEase – Moves the ball backwards by an amount specified through its amplitude before moving forward.
• BounceEase – Created 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:

1. EaseOut – Ease takes place at the beginning of the animation.
2. EaseIn – Ease takes place at the end of the animation.
3. EaseInOut – EaseIn takes place for half the animation followed by EaseOut.

In addition, you can set the Duration, From and To values for the animation.

The best way to see what each of these do is to simply to try them out via this demo. Try modifying any properties that are specifically unique to the animation.

The animation functions listed above are applied directly to a storyboard that is then used to target and animate a given control. The XAML I use for each ball is as follows:

<UserControl x:Class="BouncingBall.Ball"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Canvas>

        <Canvas.Resources>

            <Storyboard x:Name="BallSB">

                <DoubleAnimation x:Name="BallDA" Completed="DoubleAnimation_Completed" From="0" To="1000" Duration="0:0:05"

                             Storyboard.TargetName="TargetBall" Storyboard.TargetProperty="(Canvas.Top)">

                    <DoubleAnimation.EasingFunction>                        

                        <BounceEase x:Name="Easing" Bounces="10" EasingMode="EaseOut" Bounciness="2"></BounceEase>

                    </DoubleAnimation.EasingFunction>

                </DoubleAnimation>

            </Storyboard>

        </Canvas.Resources>

        <Image x:Name="TargetBall" Source="ball.png" ImageOpened="Image_ImageOpened"></Image>

    </Canvas>

</UserControl>

Thanks,
--Mike