If you’ve seen/read/heard anything about Silverlight, you probably know by now that it can do animations. In fact, Silverlight has fairly rich animation support.
I would like to point out right off that I am a developer, not a designer, and that this post is aimed at other developers. As developers we don’t typically have extensive knowledge about things such as easing and keysplines so I’ll try and phrase everything so we can all understand it.
What I’m going to talk about today is something known as easing and how you do it in Silverlight. In essence, easing is modifying the velocity over time of a given animation. This velocity modification is done using keysplines, which is the point of this post. A spline uses points to define a curve. In the case of Keysplines, you have a line defined as moving from point 0,0 to point 1,1. The default Keyspline has the spline definition points at those same locations. By modifying the location of those points, you can change the line into a curve. The shape of the curve determines the speed of the animation at a given point in time. The basic rule is that if the x of the slope is greater than the y, the animation is slow but if the y is greater than the x it is fast.
Confused yet? Don’t worry, I’ve got examples and pictures to help it make sense.
KeySpline Example
KeySpline Details
Now that you (hopefully) can see the difference between the different spline values I have in place, why don’t we take a look at how to use them in your own animations. The first task is to actually find where in Expression Blend you actually set the KeySpline value. It may be intuitive for designers, but us developers need a hand finding this the first time, so here’s your helping hand. Basically, all you need to do is to click the keyframe indicator for a particular object and Blend will open the easing window in the properties tab. Still lost eh? Here’s a couple pictures.
If you are using the default (design) workspace if should look something like the screenshot below. I’ve circled the areas mentioned above.
Here’s another screenshot for the same tasks but in the animation workspace.
And don’t worry if you don’t have/don’t want Blend, KeySplines are actually very to add directly to the XAML yourself. All you need to do is add a “KeySpline” attribute to a Key Frame based animation. The elements with this attribute available are SplineColorKeyFrame, SplineDoubleKeyFrame, and SplinePointKeyFrame. If you don’t know how to hand code those elements then I would advise you to use Expression Blend to do it for you the first time, you can always go tweak the generated XAML. Adding the attribute looks something like this:
<SplineDoubleKeyFrame KeyTime="00:00:04" Value="458" KeySpline="0,0.5,0.5,1"/>
So now that you have an idea of how to create a keyspline, what do the values do for you? Here’s a description of the different values I used in the sample app above.
No Easing
| If you don’t use keysplines this is what you get. In many cases this will be fine, especially in very short/fast animations. Typically though, using some sort of easing makes an animation more pleasing to the eye and thus “feels” nicer to the viewer. |  |
Spline 1
In this example we see the ball start quickly and then slow down as it approaches the end of the animation. This is probably the most common one I use as it allows for a fairly natural feel when animating scenes sliding into view.
|
 |
Spline 2
This spline value causes the opposite effect of the previous one. In this case the Animation starts incredibly slow and the gets faster as it moves. This is useful when moving objects out of view or for a “dropped” object.
|
 |
Spline 3
In this example the movement starts quickly, slows down and then speeds back up again. I’m not sure when you would use this one, it’s more of an example showing that is doesn’t need to be a consistent curve, you can modify it along the way.
|
 |
Spline 4
Have we have the animation begin incredibly fast, appear to stop completely, and then resume at a steady pace. Personally I would never use anything like this (except obviously in a blog post) but it shows that you can create some extreme effects just by modifying the spline.
|
 |
Finally
Generally, I add easing to nearly every animation I create to give it a more natural feel. It’s amazing how the appropriate keyspline can make an animation “feel” right, even if it’s too subtle to really be noticed. Hopefully from this article you can see both the value of using easing and how to add it to your animations.
In a future post I’ll be showing some more advanced effects you can create by using different easings on different parts of an animation. But don’t wait for me to show you how, crack open Blend and play with some, I’m sure you can make something cool.
