Easing Functions in Blend - Page 1
       by kirupa  |  5 August 2009

When you are animating something in WPF or Silverlight, at each tick of the clock, a property or a series of properties changes. It is this change that creates an animation, but by default, this change is linear with nothing interesting to write home about:

To make your animations a bit more interesting, you have easing. Easing essentially changes your animation from being linear to something less so by slowing down or speeding up the rate at which your properties change. While working with easing seems complicated, it is actually very easy - especially in Silverlight 3 and Expression Blend 3!

By the end of this tutorial, you will have learned how to apply the easing effects the Blend icon displays when you hit the Play Animation button below:

[ click on the Play button to see the animation you will be creating ]

Notice the cool easing effects at work in making the Blend icon disappear. Let's look at how exactly to do that in greater detail:

1. Because this tutorial is very specific to just using easing functions, I am not going to have you go through and create an application from scratch. Instead, I am going to provide you with a sample project that will provide a good starting poing.

Download Partial Source File

2. Once you have downloaded and extracted the above source files, launch Expression Blend 3 and open the EasingFunctions project. Your Projects pane will look similar to this:

[ your Projects pane displays your recently opened project ]

3. Once you have opened your project, open MainPage.xaml. You should see the image of the Blend icon along with a button that you saw in my earlier example:

[ hey look, the animation you saw earlier is displayed here ]

If you run your application and hit the Play Animation button, you will see the animation of the Blend icon play. Notice the major difference between what you see now and what you saw in my example earlier - there is no easing applied. Let's fix that.

4. First, open the Storyboard that contains this animation. Go to the Storyboard picker found under the Objects and Timeline tab and select the only storyboard you will see, ScaleAndFadeAnimation:

[ from the Storyboard Picker, open ScaleAndFadeAnimation ]

5. Once you have selected ScaleAndFadeAnimation, your Objects and Timeline panel will display a timeline that shows useful information like the current keyframes and at what time they get hit:

[ when you open a storyboard, the timeline will make an appearance ]

You should see three keyframes, but we are only interested in the second keyframe right now. Go ahead and select it:

[ from your timeilne, select the second keyframe ]

6. When you select the second keyframe, your Properties panel will display properties that are related to the keyframe you selected:

[ your keyframe's properties should now be visible ]

Make sure the EasingFunction tab is selected and the EasingFunction tab visible with None displayed.

7. What we are going to do is change the EasingFunction from None to something else. Click on the EasingFunction drop-down menu to see a large list of easing functions that are available for you to use.
    
   Select the Elastic easing function found under the InOut column:

[ select the Elastic InOut ease ]

8. Once you select Elastic, this menu will disappear and you will see your Properties Inspector display properties related to the InOut variant of the Elastic easing function you selected:

[ you can see the properties for your Elastic InOut ease ]

Let's leave the default values as they are and just run your application to see what may be going on. Notice that as you are plaiying the animation, when the Blend icon begins to zoom out, you suddenly see this elastic ease appear. That was pretty simple, right?

9. We aren't fully done just yet. Let's add one more easing function, and I am going to less verbose this time. Select your third keyframe from the timeline, and just like you did before, look in the Properties Inspector, click on the EasingFunction drop-down, and select the Exponential ease from the InOut column:

[ select the Exponential InOut ease ]

Ok, now you are done applying the easing functions to keyframes in your animation. If you play back or even test your animation, you will see that your animation no longer exhibits the boringness it did earlier. The two easing functions you applied to both of the keyframes are clearly evident when you see the animation now.

Overview of Easing
So, what exactly happened in the previous sections? You noticed that your current animation was pretty boring, so you decided to add some spiffy easing effects. You did that by going to the individual keyframes and adding an easing function. That's it. You ran your application again, and just like magic, everything worked. Let's look broadly at what exactly happened to make this work.

Think of your easing function as a gentle breeze. It has the ability to alter the course of the property change, but it isn't very demanding. The easing function will rarely overload the animation to a point where the animation's progress is entirely dictated by what the easing function defines. Instead, an interpolation goes on between the animation and the easing function. They find a middle ground, and it is this middle ground that you see when you preview an animation with easing applied.

This means that something like your linear animation...

...is combined (aka interpolated) with your easing function...

...to create the final animation whose property changes similar to what you see below:

What shape the changes take depends entirely on the easing function used. Some are pretty serene like the Cubic ease, and some are pretty whacky like the Elastic one you used:

[ whacky is the word ]

In case you are wondering, I base sereneness and whackiness entirely on how complicated the easing curve preview looks like in the list of eases available.

EasingModes: In, Out, InOut
 If you recall, when picking the two easing functions to apply to your keyframes, you picked them both from the InOut column. If you look closely at the list of easing functions, there are two more columns available for you to use as well - In and Out:

[ what are these...EasingModes? ]

What are these three easing variants? The best way to explain this is by looking at the easing functions a little bit closer. All of your easing functions are defined by a mathematical formula. This mathematical formula takes your current animation's progress and alters some things to affect what your animation looks like. This much you learned in the preceding sections.

The easing variants you have, known internally as EasingModes, alter the mathematical formula that makes up your easing function. For the following examples, let's say that the mathematical formula I am using refers to the Cubic ease.

When you are just easing In, your formula for Cubic ease is applied with no alteration over your animation:

When you are easing Out, your formula is flipped a bit where the start and final values are the same, but what happens in between is sort of inversed. I am not going to go too mathematical on you, so I will just show you the diagram instead:

Last and certainly the most fun is your InOut ease. InOut ease combines both the In and Out eases you saw above. The first half of your animation is spent going all In, and the last half of the animation is spent going all Out:

By playing with the EasingModes, you have just a few more feathers that you can add to your cap when tweaking and modifying the easing effect you want to apply.

Conclusion
Isn't easing a lot of fun? You just finished learning how to apply two built in easing effects to a few keyframes using Expression Blend 3. Beyond just learning how to add easing functions, I hope you gained more inight into how easing functions, easing modes, and your animation work together.

If you are interested in looking at my final version of the project, feel free to download the source files by clicking the link below:

Download Final Source Files

1 | 2 | 3