Home > Uncategorized > Tweening Equations for Silverlight

Tweening Equations for Silverlight

June 25, 2008

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.

%d bloggers like this: