Archive for the ‘Expression Blend’ Tag

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>