October 13th, 2009

Adding easing and inertia to your animations in Blend

Silverlight Blend Tutorials, Working with Silverlight, by Gavin Wignall.

This post is part of a string of posts found here: Learn Blend in a Month.

In today’s post I will be taking the storyboard we created last time and adding easing to it. This will help make our animation look smoother and a bit more realistic.

Example without Easing…

Example with Easing…

To get the above easing effect we need to carry out the following tasks..

Go to the ‘Objects and Timeline‘ tab and select the storyboard with the animation in we want to enhance. Now in this example it is important that we only want to add easing to the up and down motion of the ball (the Y property). So locate the ball element and uncollapse the properties as shown in the image below…

Now select the first keyframe of the ‘Y‘ property, go to the ‘Properties‘ tab and scroll down to the ‘Easing‘ section. ‘None‘ should be selected by default under the ‘EasingFunction‘ section, click this panel to open up the available options…

There are 3 types of easing:

In = Starts slow and speeds up

Out = Starts fast and slows down

InOut = Starts slow, speeds up and then slows down

Easing needs to be applied to the end keyframe of each animtion step, so first we need to select the second keyframe of the ‘Y‘ property of our animation..

Now set the ‘EasingFunction‘ to ‘Exponential In‘.

Now select the 3rd keyframe of the ‘Y‘ property and set the ‘EasingFunction‘ to ‘Exponential Out‘.

This will make the ball appear to bounce when it hits the ground and also peak its upwards acceleration nice and smoothly.

Repeat these steps with the remaining 2 keyframes switching from ‘Exponential In‘ and ‘Eponential Out‘.

I have chosen ‘Exponential‘ as it has a low level of effect, try using some of the other available effects to see how the end animation differs.

You can download the example files for this post here.

You can read more about applying easing and adding inertia in this post – http://www.silverlightbuzz.com/2009/02/19/using-easing-to-apply-acceleration-or-inertia-to-an-animation-in-silverlight/

Back Top

Responses to “Adding easing and inertia to your animations in Blend”

  1. Great site. A lot of useful information here. I’m sending it to some friends!

    Merle Falkiewicz at March 7, 2010 10:30 pm
  1. Learn Expression Blend in a Month! » Silverlight Buzz (,October 15, 2009)

    [...] Adding easing and inertia to your animations in Blend [...]

Leave a Reply

Back Top