Bezier Time – A Tool For Visualizing Time as a Bezier Curve To Create Avalon KeySpline Animations

So, two posts ago, I showed how to do animations using splines, which allowed me to create the bouncing ball affect.  The key to using splines in Avalon is setting the KeySpline attribute, which is how time is partitioned in the animation — the rates of acceleration and deceleration.  The way Avalon allows you to partition that time is through Bezier curves. 

(I’m not going to use this blog post to explain Bezier curves and their implications for computer graphics.  Throw “Bezier” into a search engine and you’ll get more than you need.)

The big question is, how do you visualize Bezier curves in relation to time?  Mostly, one thinks of a Bezier curve for creating graphics, not representing time.  Well, I have created (with some help from some Avalon friends) a tool that allows you to visualize how a particular Bezier curve will affect time.  Here’s a screen shot:

Basically, the tool allows you to set two control points X1,Y1 and X2, Y2 to create the curve.  As a result, the rate of change of the animation of the red ball upward will change.  Once you get your animation curve the way you want it, you can cut/paste the XAML for setting your spline, or use the points to set the control points in code. 

Download the source

Comments (3)

  1. First the SDK team created an article about generating reflections in WPF/E . Then today I read [via

  2. Perspective says:

    Un rendu de mouvement très réaliste peut être obtenu au moyen d’une série d’animations KeyFrame utilisant