darren david, gui geek

Archive for May, 2007

Just how busy have you been?

Very simple line counter add-in for VS 2005:

 http://www.codeproject.com/useritems/LineCounterAddin.asp

12,000 lines of code in 4 weeks explains why I haven’t been posting lately. ;)

(OK, 4,000 of those  were XAML exported from illustrator, but still… )

1 comment

PennerDoubleAnimation and Animator: code-based WPF animation simplified

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!

19 comments

WPF Momentum Video on Silverlight Streaming

Tim Sneath posted up a high-res version of the WPF Momentum video that was shown at the MIX07 keynote, hosted via the new Silverlight Streaming service. The North Face kiosk shares airtime with a host of other cool WPF applications.

No comments

Karsten’s Star Flitters Brightly

I just got an email blast from Twitter, and the Flitter app that Karsten put together for MIX07 was featured prominently:

Mixing It Up

Recently, there was a conference in Las Vegas put on by Microsoft
called MIX and Twitter was used to keep attendees connected as
well as entertained with an interesting application called Flitter.
The application was displayed on giant screens featuring Twitter
updates about what folks at the conference were doing. Neat!
Flitter is open source and anyone can download it:
http://tinyurl.com/257rlu.

I don’t know if every Twitterer got that mail, but even if a fraction did, that’s some fine press. Nice work, KJ!

No comments

Sort those Imports

I’m a sucker for clean code, so I have to give props to the Bordecal Imports Sorter, a great little Visual Studio add-in. Keeps your using block clean as a whistle! Now if it would only remove unused imports…

No comments

Next Page »