You can download the example files to this article here.

The below example shows three balls animating along the same distance over the same time.

Ball 1 is the most basic of animations going back and forth from A to B at a constant speed. Although this is a required function it often leaves animations a little lifeless and robotic.

The ‘easing’ feature in Blend allows us to add acceleration or inertia to an animation. In other words, instead of a constant speed we can make an object speed up and slow down during its path while still taking the same time to reach its destination. This effect can really bring animations to life, mimicking how objects work in real life.

Ball 2 uses the ‘easing’ feature to speed up the animation at the begining and slow down at the end each time the ball is moved. Notice how ball 1 still reaches its destination at the same time as ball 2 every time.

There are 2 ways of applying ‘easing’ to your animation inside the Blend interface:

Selecting a percentage for ‘easing in’ and ‘easing out’

Right click on a key frame and select either easing in or easing out. Choose a percentage from the list. In this method the Easing in relates to the journey to the keyframe where as easing out relates to the journey happening after the keyframe.

Using the Easing graph

Highlight a key frame (not at zero seconds) and go to the properties tab, the easing graph should now be displayed as below.

Pull the yellow pin on the left bottom to adjust easing in and pull the yellow pin on the top right to adjust easing out. The easing graph allows you to fine tune your animation in more detail. The easing graph effects the keyframe slightly differently to the first method, the easing in and easing out changed on the graph are related to the animation space between the current selected key frame and the key frame before it.

Ball 3 only applies the ‘easing’ feature at one of the 2 destinations mimicking a bouncing ball in real life. For the purpose of this example the ball never looses its energy through gravity so it will bounce for ever.

An additional scale animation has been placed at the moment ball 3 hits the pretend ground to mimick the ball being impacted and rebounding. This animation has been place on the grid containing the ball so that it can be easily run independantly to the bounce movement.

And finally..

This example loops forever because of a variable we can set in the XAML. Unfortunately the current version of Blend does not offer this function in the interface so you will have to switch to the XAML or Split view and find the Storyboard you want to loop. After the Storyboards x:Name place the following XAML.

RepeatBehavior=”Forever”

See a screen shot here: