When I first started programming in WPF, I was frustrated by several things about the animation system:

• a timeline in WPF is absolutely nothing like a timeline in Flash (I get it now)
• animations in WPF are like functions applied to property values — when the animation completes, the property retains its original value and the animation stays “applied.” If you then want to change the property value manually, you need to remove the animation first. (Flash does not work this way, so it seemed odd at the time)
• how complicated it was to pull off a simple code-based animation.
• WPF didn’t ship with any custom easing equations, like Flash’s ubiquitous equations written by Robert Penner. The .NET 3.0 SDK now ships with some sample code that more-or-less implements reasonable facsimiles, but you still need to write several lines of code to kick off an animation. Even then, you’ve got to tweak a stack of parameters to get some of the more esoteric equations (like Bounce and Back) to work just right. Sometimes you just want it to be easy.

If you’ve come from the Flash world, you’re likely used to working with the Tween class, or better yet, a nice wrapper like Fluid’s Tweener. Either way, if you’re doing a lot of animation in code (which you are wont to do in ActionScript development), you really become accustomed to stacking up and firing off animations with one line of code.

Now that Blend has matured, I’ve become much more in tune with WPF’s Storyboards and Timelines, but I still find myself doing a lot of animation in code. I’ve been meaning to create an Penner animation class that utilized the WPF animation engine for some time now (Lee Brimelow took a first stab at the equations), and my latest project gave me an excuse to finally put together a polished package.

I had three primary goals in mind:

• Be able to start an animation and assign an “OnComplete” handler in one line of code
• Have those animations set the final value of the property to the “To” value of the animation, then disappear (basically, if I animate the Canvas.Left property of a Rectangle from 0 to 100, I expect the Canvas.Left property to be 100 when the animation completes, and I want to be able to assign a new value directly to that property)
• Bring the canonical Penner easing equations to WPF, but leverage the WPF animation engine so I can use them in XAML or in code.

I created two classes, PennerDoubleAnimation, and a helper class called Animator. PennerDoubleAnimation extends DoubleAnimationBase, and provides all of the original Penner animations, plus some new “OutIn” equations created by Zeh Fernando in his MC Tween package, for a total of 41 equations. You can use this class in place of any DoubleAnimation, and it should work like a charm. However, if you really want it good, pair it with the Animator class, for one line happiness:

Animator.AnimatePenner( myControl, Canvas.LeftProperty,

   PennerDoubleAnimation.Equations.QuadEaseOut,

   0, 100, 1500, OnAnimationComplete );

Granted, it’s a long line, but it’s still easy.

I’m hosting this project on Google Code at http://code.google.com/p/wpf-animation/. This is my first project hosted on Google Code, so please bear with me (or better yet, let me know) if something seems amiss. You can download the source or check out the tree from Subversion.

I’ll spare you the usage details in this post; I’ve created a tester app (in the source zip) called AnimationTester to help you get your head around them.

Happy tweening!

[UPDATE] Removed direct download link.

[UPDATE] Fixed links pointing to wrong packages!