Silverlight 3’s New Animation Easing

Easing is a new feature of Silverlight 3 for dressing up animations. I’ve often told students and conference audiences that you can’t simulate physics with simple linear animations (also known as “from/to” animations), and that you have to use key-frame animations instead. In Silverlight 2, for example, it’s easy to animate a ball dropping to the floor. But if you want it to look real–that is, if you want the ball to accelerate as it approaches the floor and bounce when it hits–well, that requires a lot more work.

Not so in Silverlight 3. Animation easing makes it incredibly easy to add effects to your animations. Silverlight 3 Beta 1 comes with about a dozen different easing classes, including BounceEase, which adds bounce to animations, and ElasticEase, which adds oscillations. You can also write easing classes of your own by deriving from the EasingFunctionBase class. But the predefined easing classes are so rich and varied that you may never need to write your own.

Here’s a simple way to see easing at work. Begin by creating a new Silverlight 3 project. Then edit MainPage.xaml to look like this:

<UserControl x:Class=”EasingDemo.MainPage”

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

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

    <Grid x:Name=”LayoutRoot” Background=”White”>

        <Canvas x:Name=”Backdrop” Width=”300″ VerticalAlignment=”Bottom”>

            <Ellipse x:Name=”Ball” Canvas.Left=”125″ Canvas.Top=”50″ Width=”50″

                Height=”50″ MouseLeftButtonDown=”Ball_MouseLeftButtonDown”>

                <Ellipse.Resources>

                    <Storyboard x:Name=”Drop”>

                        <DoubleAnimation x:Name=”DropAnimation”

                            Storyboard.TargetName=”Ball”

                            Storyboard.TargetProperty=”(Canvas.Top)”

                            Duration=”0:0:1″>

                            <DoubleAnimation.EasingFunction>

                                <BounceEase Bounces=”10″ Bounciness=”2″

                                    EasingMode=”EaseOut” />

                            </DoubleAnimation.EasingFunction>

                        </DoubleAnimation>

                    </Storyboard>

                    <Storyboard x:Name=”Reset”>

                        <DoubleAnimation x:Name=”ResetAnimation”

                            Storyboard.TargetName=”Ball”

                            Storyboard.TargetProperty=”(Canvas.Top)”

                            To=”50″ Duration=”0:0:1″>

                            <DoubleAnimation.EasingFunction>

                                <ElasticEase Oscillations=”1″ Springiness=”8″ />

                            </DoubleAnimation.EasingFunction>                           

                        </DoubleAnimation>

                    </Storyboard>

                </Ellipse.Resources>

                <Ellipse.Fill>

                    <RadialGradientBrush GradientOrigin=”0.25,0.25″>

                        <GradientStop Offset=”0.25″ Color=”White” />

                        <GradientStop Offset=”1.0″ Color=”Red” />

                    </RadialGradientBrush>

                </Ellipse.Fill>

            </Ellipse>

        </Canvas>

    </Grid>

</UserControl>

Now open MainPage.xaml.cs and edit the MainPage class to look like this:

public partial class MainPage : UserControl

{

    public MainPage()

    {

        InitializeComponent();

        Backdrop.Height = Application.Current.Host.Content.ActualHeight;

    }

 

    private void Ball_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

    {

        double y = (double)Ball.GetValue(Canvas.TopProperty);

 

        if (y == 50.0)

        {

            DropAnimation.To = Backdrop.Height – 50.0;

            Drop.Begin();

        }

        else

        {

            Reset.Begin();

        }

    }

}

When you run the application, a red ball will appear at the top of the page. Click it to drop it to the floor. Once the ball comes to rest, click it again to reset it to the top of the page. You’ll see a BounceEase at work when the ball falls, and an ElasticEase at work when it flies back to the top of the page.

If any of your coworkers fail to be impressed, challenge them to duplicate what they just saw in Silverlight 2!