Search

In a previous post and video, I went through how to use the stock easing functions in your WPF 4 applications.

Once you know the formula you want to use, the mechanics of creating custom easing functions is pretty simple.

This month I had the opportunity to be on Sparkling Client three times to talk about Silverlight 3 features

• Easing – August 13
• Element to Element Binding – August 20
• Validation – August 26

Easing has been around since Silverlight 2, but in Silverlight 3 it gets quite a makeover.  Primarily, it becomes much… easier… to use.

Easing has been around since Silverlight 2, but in Silverlight 3 it gets quite a makeover.  Primarily, it becomes much… easier… to use.

Read this post of John Papa and find out how to turn a swivel effect into a behavior.

A while back I created a pair of Storyboards that make a pair of panels swivel to show a front side and a back side. The key ingredients in the storyboards are:

• Plane Projection using Perspective 3D
• Easing
• Visibility (Opacity can be used instead if you prefer)

Easing and 3D features are new to Silverlight 3 but really give it a nice effect. The easing makes it start slowly, then appear faster at the 90 degree turn, and then ease out.

Terence Tsang talks about the 11 preset Easing Functions that Silverlight provides and shows a demo of these Easing functions.

Each functions has it own style and you can create a lot of effects if you use them wisely. Besides the built-in ease functions, you are able to create your own Easing Function as well. However, I think the built-in easing functions is able to handle most of the cases.

Animated movement often seems much more natural and realistic if the moving object accelerates up to speed or decelerates before stopping. The technique of adding that change in velocity is called Easing.

Jesse Liberty has posted a brief exploration of Easing in Silverlight 3 and Blend 3.

One aspect of animation that has always looked more difficult than it really is, is easing. First, the term itself is a bit intimidating to those of us who are not specialists: what exactly is being eased?  Second, it is usually introduced like this: “oh, and then you can double click on the animation and adjust the easing. Drag the yellow dots until the easing gives you the effect you want…The problem of course is that this presupposes that you know what easing is and what effect you want.  Happily, Silverlight 3 and Blend 3 make all of this much more straight forward.

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.