Animation easing is a tool built into Expression Blend to help give you a more "fluid" feel to your animation, as you can see in the above animation, the bottom cog's animation looks a lot more realistic than the simple point to point animation of the top cog.
The bounce effect is great to give you object just a little more realism, by giving the effect it's not able to just stop instantly but "bounces" around a little.
Let's look at one thing at a time.
Animation Easing
This is really simple to do but can take a little practice to get the right effect. First create a story board with an object either moving or spinning, make it a decent amount of time and the movement easy to watch (if you object is spinning to fast you might have some trouble seeing it properly).
Now select the second key frame in your animation (or the end key frame of your movement animation), in your properties panel you will see a large grid with a diagonal line through it. This is where all the action happens.
The diagonal line is a representation of your animation, the bottom left is the start of your animation and top right is the finish.
All you need to do is grab one of the yellow dots, and drag it either up or to the side, this will bend the line and cause your animation to act accordingly.
The way this works is, the horizontal axis is the time from start to finish, so the fastest way from one point to another is diagonal (unedited line), but when you bend the line, it's going to take the same amount of time to play the animation, but will play some parts of the animation faster than others.
This animation would start slow, speed up for a little bit and then slow down at the end.
Have a play around with these settings to get the right feel for your animation.
Next the "Bounce" effect
This is a simple animation technique to use when you have a moving object come to a stop. All you need to do when creating the effect is over shoot the mark of your final position, then move to time line along a little more, move your object a little before the mark and then on your final key frame land on the mark.
It can take quite a bit of practice to master this, and you can even add a little easing to these short animations at the end to make it look even better!
Using these simple effects on your day to day animations can really give your interface a whole new life.
Thanks for reading
About the Author
Alex Knight
Alex is a Graphic Designer who can't get enough of Silverlight. He spends his days designing websites and application UI/UX for AGKDesign and Objectify, as well as maintaining SilverZine.com and his own blog. If you would like to catch up with him, here are some links that might help:AGKDesign.twitter | AGKDesign.blog | AGKDesign.net | AGKDesign.silverlight
