Tweening Equations for Silverlight

I remember the days back on the were-here forums (now sadly defunct) when there was this guy who went by the alias rpenner and he schooled us all in math and showed us how to do very cool things in ActionScript.  Robert Penner's equations have been perfected, published and translated to C#.

Lee Brimelow originally translated the equations to C# for use in WPF and the beauty of Silverlight being a subset of WPF is that the same equations work just as well.  (The only small change needed was to remove the reference to an unused default library System.Windows.Navigation).

I've been focused quite a bit lately on how best to do dynamic animations in Silverlight and after seeing Corey Miller's tweening sample based on Penner's equations, I was energized to go find the library and apply it in Silverlight.

This first part was easy, since Lee (Thanks man!) had already done the translation.  The second part was then applying the equations using the Empty Storyboard method for Silverlight.  As a result, I've come up a few different code samples:

WPFPenner.cs - This is the original C# translation, minus the WPF only library reference.  I've also added an enum of the easing types, which I use for reference in another sample.

TweeningTest - A very basic application that demonstrates the usage of an equation in code.  Two methods of modifying the position of element are shown, both TranslateTransform and Canvas Left and Top.  The TranslateTransform is nice because it works within the Grid as well as the Canvas.

OffToTheRaces - This is a simple application that can be used to preview the different easing types.  Its a bit of an extreme sample since the easings are dynamic, but you can make the horses run and then randomize them to bring up new horses.  You can also check out Robert Penner's original Equations Visualizer to get an idea of the equations.

Get Microsoft Silverlight

Moving beyond the basic Linear equation for animation can greatly enhance the experience you create.  The easier we can make it do this the better and I think the equations are a good start.

posted on Jun 25th, 2008 | Permalink | Comments (5)

5 Comments »

  1. Far out! I've been whining about how someone needs to do this since last July :) Nice work.

    Comment by Nishant Kothary - June 25, 2008 @ 10:00 AM
  2. Nice. I actually redid a major portion of Robert Penner's actionscript libraries in C# and a few of my favorite demo's in silverlight one weekend cause I loved doing them in flash back in the day. I was then trying to push the envelope with them to see how well silverlight performed in comparison. I will post the Tornado demo in beta 2 with my extra twist.

    Comment by Corey - June 25, 2008 @ 11:12 AM
  3. I've made my own implementation of Tweener API too.
    If you're interested check this link: http://www.pacem.it/CMerighi/Posts/68,en-US/Silverlight_2.0_Tweener(Of_T)_Ultimate_Version.aspx

    (Code is beta 2 compatible, demo is still beta 1 waiting for update and chm reference is available).

    Comment by Cristian - June 26, 2008 @ 12:16 AM
  4. Hi, I took another approach and used the DoubleAnimationUsingKeyFrames and attached dependency properties to create Tweener animations. Take a look at http://firstfloorsoftware.com/blog/declarative-tweening/ for having tweener animations entirely declared in XAML. Would love to hear you opinion on it.

    Comment by Koen - July 06, 2008 @ 8:32 AM
  5. Oops, kinda broke my previous comment. Unable to fix it.

    Comment by Koen - July 06, 2008 @ 8:33 AM

Leave a comment