Rudi Grobler

Easy Easing...

While watching Rick Barraza's Mix '08 session (T30), he showed "The Helvetica of Easing Equations™"

And this worked great for his scenario... I wanted to do something similar (but slightly simpler). I needed to move some buttons from off the screen to where thy need to be placed in my main window. I started by just doing a simple DoubleAnimationUsingKeyFrames. Just a side note, to reduce the code complexity, I replaced my menu bar with a single ellipse. Here is my ellipse (somewhere off screen)

<Ellipse Width="50" Height="50" Fill="#FFFF0000" Stroke="#FF000000" Canvas.Left="700" Canvas.Top="70" x:Name="ellipse" RenderTransformOrigin="0.5,0.5">
    <Ellipse.RenderTransform>
        <TransformGroup>
            <TranslateTransform X="0" Y="0"/>
        </TransformGroup>
    </Ellipse.RenderTransform>
</Ellipse>

And here is my animation to change the TranslateTransform's X property

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="-500"/>
</DoubleAnimationUsingKeyFrames> 

This double animation will move the ellipse into view at a constant speed.

What if I need it to move in quick but slow down at the end (Easing)?

Their are 2 ways this can be achieved! Blend helps with the first method. Blend makes it easy to customize timelines. Open your time line and then right click on the second key frame. A new context menu appears that allow you to easily ease in or out!

I selected 75% easing in. Here is the spline graph

PS. You can also manually adjust the easing by manipulating the spline graph! (Here is a article on the Expression Teams blog about manually adjusting the easing)

Here is the code generated

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="-500" KeySpline="0,0,0.625,1"/>
</DoubleAnimationUsingKeyFrames> 

All that changed is the addition of the KeySpline info generated!!!

The second but little more restrictive method is to use the AccelerationRatio and DecelerationRatio.

Here is a similar easing using the second method

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" DecelerationRatio="0.75" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="-500"/>
</DoubleAnimationUsingKeyFrames> 

Easing is a very subtle effect but very usefully!!!