Easing animations in Expression Blend

Here is how to add easing to your animation in Expression Blend. IMHO adding easing to animations really makes your product look polished. I have been trying to write an Animation system for Silverlight 2, much like the Tweening libraries for Flash and Javascript. However, when I found this today, there may be hope for sticking with Storyboards.

  • Create your animation.
  • Click on the time node in your animation
    Select a storyboard in Blend.
  • The properties window will display an easing curve once you select the node. Play around with the curve by clicking and drag the yellow dots.
    Easing in Blend
  • The resulting XAML<SplineDoubleKeyFrame KeyTime=”00:00:00.5000000″ Value=”1.5″>
    <SplineDoubleKeyFrame.KeySpline>
    <KeySpline ControlPoint1=”0.282999992370605,0.864″ ControlPoint2=”0.819000005722046,0.049″/>
    </SplineDoubleKeyFrame.KeySpline>
    </SplineDoubleKeyFrame>

No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: