One of my favorite design features added to WPF 4 is the
ability to use easing functions with animation.
Easing functions provide a way to liven up what would otherwise
be pretty flat and boring animation. They provide
acceleration/deceleration, and even bounce or spring to the
approach into or departure from a key frame in an animation.
Let's take a look at how to use easing functions with
storyboards in your WPF 4 projects. We're going to do everything
from xaml here so you get a taste of what is happening under the
covers when you work in a tool like Expression Blend.
Basic Animation
In Visual Studio 2010, create a new Windows Application - WPF.
Open up the MainWindow.xaml and add a rectangle sized 20x20 to the
grid.
To the rectangle, add a single ScaleTransform named
"Transform"
Then add a button somewhere on the same grid and name it
"StartAnimation". Wire up an event handler for the Click event. The
xaml in your window should look something like this:
<Grid>
<Rectangle Height="20"
Width="20"
RenderTransformOrigin="0.5,0.5"
Fill="BlueViolet">
<Rectangle.RenderTransform>
<ScaleTransform x:Name="Transform" />
</Rectangle.RenderTransform>
</Rectangle>
<Button x:Name="StartAnimation"
Click="StartAnimation_Click"
Content="Start"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
Margin="5" />
</Grid>
The key items in there are the ScaleTransform named "Transform"
and the button to start the animation.
You should end with a window that looks something like this:
I sized my window to 800x600 in order to better support other
types of transforms. Your window will be smaller if you stayed with
the defaults.
Create the Storyboard
Next, we'll add the storyboard that will contain the animation,
as well as the shells of the two animations we'll be using.
In your Window, add a Window.Resources section and add a single
storyboard named "AnimateTarget". That storyboard will have two
DoubleAnimationUsingKeyFrames animations: one will target the
ScaleX property of the Transform, and the other will target
ScaleY.
<Window.Resources>
<Storyboard x:Key="AnimateTarget">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Transform"
Storyboard.TargetProperty="ScaleX">
<!-- We'll add key frames here -->
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Transform"
Storyboard.TargetProperty="ScaleY">
<!-- We'll add key frames here -->
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
Wire Up the Event Handler
Before we add the keyframes, crack open the codebehind and find
the StartAnimation_Click event handler. If that isn't present,
check your button's xaml and make sure you specified the Click
event handler and allowed Visual Studio to create it for you. If
not, just wipe out the Click="…" bit and recreate it. Optionally,
you could wire up the event handler in the constructor of the
window.
Once you have the event handler wired up, we'll put in a single
line of code which will start the animation.
private void StartAnimation_Click(object sender, RoutedEventArgs e)
{
((Storyboard)this.Resources["AnimateTarget"]).Begin();
}
There are multiple ways to handle that ranging from behaviors to
commands to the approach we took here. Use whatever you are
comfortable with.
Add Key Frames
Without key frames, the animation doesn't yet do anything
useful. A key frame is a specified value at a specified point in
time. The animation system will interpolate all the other frames in
between the key frames you provide. Typically, this is done in a
linear fashion, as we'll see when we first run this.
Next we'll add the key frames to our two animations. We'll use
EasingDoubleKeyFrames, but won't put the easing functions in just
yet. The animation will take the size of our shape and scale it
from 0 to 2x its size on both the X and Y axes.
<Storyboard x:Key="AnimateTarget">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Transform"
Storyboard.TargetProperty="ScaleX">
<EasingDoubleKeyFrame KeyTime="0:0:0"
Value="0.0" />
<EasingDoubleKeyFrame KeyTime="0:0:3"
Value="2.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Transform"
Storyboard.TargetProperty="ScaleY">
<EasingDoubleKeyFrame KeyTime="0:0:0"
Value="0.0" />
<EasingDoubleKeyFrame KeyTime="0:0:3"
Value="2.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Test the Animation
Save the project and run it. You'll see the shape expand as
though it is flying towards you. The animation is linear, though.
That is, the frames are interpolated using a constant ratio of
value vs. time. The end result is something which looks very
computer-generated, and not at all interesting.
Making the Animation Pop - Easing
We'll start with one of the more dramatic easing functions: the
ElasticEase. The elastic easing function interpolates the value
over time using a formula that simulates elastic motion. That is,
the element in this case, appears to be suspended from a rubber
band.
<Storyboard x:Key="AnimateTarget">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Transform"
Storyboard.TargetProperty="ScaleX">
<EasingDoubleKeyFrame KeyTime="0:0:0"
Value="0.0" />
<EasingDoubleKeyFrame KeyTime="0:0:3"
Value="2.0">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Transform"
Storyboard.TargetProperty="ScaleY">
<EasingDoubleKeyFrame KeyTime="0:0:0"
Value="0.0" />
<EasingDoubleKeyFrame KeyTime="0:0:3"
Value="2.0">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Note that I applied the easing function only to the final
keyframe in both animations, and I used the EaseOut parameter. If
you change EaseOut to EaseIn, you'll see the elastic action happen
at the start of the animation instead of the end. It will appear to
hesitate to get going. The result, in this case, is pretty
unnatural, but the elastic ease is one of the easiest to use to
identify what happens in EaseIn vs. EaseOut. Note also that you can
use EaseInOut which will perform the easing both at the start and
the end.
(Image source: MSDN)
Controlling the Easing
The ElasticEase function takes a few parameters, you can set the
springiness, as well as the number of oscillations. For a crazy
effect, set the Oscillations parameter high.
<ElasticEase EasingMode="EaseOut"
Oscillations="25" />
I don't recommend using values like that in your own apps,
though, or you'll have legions of end-users and interactive
designers marching up your driveway with pitchforks and
torches.
Another parameter this particular easing function recognizes is
Springiness. The higher this value, the stronger the
spring/eslastic and therefore the less dramatic the bounce. Low
values, like 1, give you a really weak spring that bounces all
over. High values like 8 result in a super-stiff spring. The
default value is 3.
<Storyboard x:Key="AnimateTarget">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Transform"
Storyboard.TargetProperty="ScaleX">
<EasingDoubleKeyFrame KeyTime="0:0:0"
Value="0.0" />
<EasingDoubleKeyFrame KeyTime="0:0:3"
Value="2.0">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseOut"
Oscillations="3"
Springiness="8" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Transform"
Storyboard.TargetProperty="ScaleY">
<EasingDoubleKeyFrame KeyTime="0:0:0"
Value="0.0" />
<EasingDoubleKeyFrame KeyTime="0:0:3"
Value="2.0">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseOut"
Oscillations="3"
Springiness="8" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Animating other Transforms
If you want to animate something other than a ScaleTransform,
like a TranslateTransform (affects location/movement) simply swap
out the transform in the Rectangle.RenderTransform section, add
your own in, and then change the Storyboard.TargetProperty to
affect the appropriate value, and the Value in the key frame to
reflect something more appropriate.
Here's an example using a TranslateTransform. It animates the
position from the middle of the window to the bottom right:
<Window.Resources>
<Storyboard x:Key="AnimateTarget">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Transform"
Storyboard.TargetProperty="X">
<EasingDoubleKeyFrame KeyTime="0:0:0"
Value="0.0" />
<EasingDoubleKeyFrame KeyTime="0:0:3"
Value="202.0">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseOut"
Oscillations="3"
Springiness="8" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Transform"
Storyboard.TargetProperty="Y">
<EasingDoubleKeyFrame KeyTime="0:0:0"
Value="0.0" />
<EasingDoubleKeyFrame KeyTime="0:0:3"
Value="202.0">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseOut"
Oscillations="3"
Springiness="8" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid>
<Rectangle Height="20"
Width="20"
RenderTransformOrigin="0.5,0.5"
Fill="BlueViolet">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="Transform" />
</Rectangle.RenderTransform>
</Rectangle>
<Button x:Name="StartAnimation"
Click="StartAnimation_Click"
Content="Start"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
Margin="5" />
</Grid>
For More Information
I'll have a video version of this post, with full source code,
available on windowsclient.net soon.
Both WPF 4 and Silverlight include a number of easing
functions you may use in your animations. The best way to
understand them is to use the interactive Silverlight Easing Functions Explorer. The
functions are the same as those available in WPF 4.
You can also create your own easing functions - a topic I'll
cover in another post.
Update 11/25/2009 The video is located here.
