tool to create motion path animations for silverlight...

  • Article

One animation that is in WPF and not silverlight is  AnimationUsingPath ..   [you create a path, and have an element animate following  that path] ..  

For quick prototypes, I thought it would be handy to fake path animations by capturing the keyframes and replaying them in silverlight...  I can do it all with out code or math, which is nice for designer's doing rapid prototyping..
The gist:

  1. Create an animation in Blend for a WPF project ..
  2. Add the control in the sample code below to the WPF page that has your animation..  
  3. [optional] configure a couple of settings if the control guesses them wrong..
  4. Click Capture --
  5. Now you have KeyFrames you can cut & paste into a Silverlight animation... 
    1. Create a dummy translate animation in Silverlight project for your same element..
    2. Replace the keyFrames inside the animation with the ones from the tool .. 
    3. An extra nicety is that once you have done that, you can replay the silverlight animation using blend..

 

Here is what the control looks like:

image

The settings:

  • Animation Name == name of storyboard you want it to run..  (used to call begin on it )
  • Element to Animate == name of UIElement target of the animation: ( used to capture its transform at each keyframe)
  • KeyFrame type:  Spline or Linear?
  • Frames per second -- how often to sample..  

If you are a coder, all of these properties can be set programmatically via dependency properties ...  Look at Page3.xaml in the harness attached with the source.  

Here are a couple of quick samples of results: ball and fly.. [created by SysTim, thanks bro] ... and my original ball and fly
Disclaimer: the paths were created rather quickly and I sampled at only 30 fps ..  you likely need to tweak the settings and paths for a smoother experience..  and do some math and code for perfect/production smoothness .. but for prototypes the tool is handy and you can tweak the animation before and after in blend..

The source code for the control is here ..  If you create a better showcase animation let me know or put a comment pointing to it.