Thursday, December 11, 2008

WPF Animation tools

Despite of the over analyzed possibilities from animating components on XAML, most of which are virtually impossible to create without Microsoft Expression Blend ($499 USD), there is the possibility of the storyboards (Example is in C#).

What you can do is create a Storyboard object (System.Windows.Media.Animation) and add some animations that use key frames, DoubleAnimationUsingKeyFrames, which creates an interpolation of double values to a target's property. Here is a simple example:

DoubleAnimationUsingKeyFrames dauk = new DoubleAnimationUsingKeyFrames();
dauk.BeginTime = new TimeSpan(0);
dauk.SetValue(Storyboard.TargetNameProperty, "myObject");
dauk.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("myProperty"));

What we did here was establish that my animation is going to start on time mark 0, will occur on the targeted object (myObject in this case) and will iterate the values of the targeted property (myObject.myProperty in this case).

Next step wold be to add a spline to our animation in order to actually define the values to iterate and the time it should take to do so. Here it goes:

SplineDoubleKeyFrame sdkf = new SplineDoubleKeyFrame();
sdkf.KeyTime = TimeSpan.FromSeconds(.2);
sdkf.Value = 250;

This spline sets the target value to 250 and interpolates the intermediate values for .2 seconds. Supposing that myObject is of type Image and myProperty defines the image width. What this spline will do is simply take the image from the current width and stretch/shrink it up/down to 250 pixels.

Now just add the dauk object to our storyboard object and start it (sb.Begin(this);).

And there you have it, your control can now be fully animated with no help whatsoever from Expression Blend!
Have a blast and make things move with WPF!


No comments: