Longhorn Animations and Timelines Part I

After a suggestion from DonXML, I left the world of manually starting up LengthAnimations bound to width and height properties of a Canvas control I had implemented via code, and took up the task of learning the Timeline object.

My goal was to have a Canvas, click on it, and zoom the width and height to the full size of the container Canvas, and stop when it reached the largest point. Let's check out some code (note, the SDK docs are a little unclear on how to do some of this, but the SDK team is on the right track with ease of how to find what is there...):

Timeline wTL = new Timeline();
wTL.StatusOfNextUse = UseStatus.ChangeableReference;
wTL.Enable(Timeline.Root);

LengthAnimationCollection w = GetAnimationCollection(MainPanel.Width.Value,wTL);
c.SetAnimations(
Canvas.WidthProperty, w);
w.SetDefaultParentTimeline(wTL);

wTL.RepeatCount = 0;
wTL.AutoReverse =
false;
wTL.Fill =
TimeFill.Hold;
wTL.FillDefault =
TimeFill.Hold;

wTL.Enable();
wTL.BeginIn(0);

...

private LengthAnimationCollection GetAnimationCollection(double size, Timeline t)
{

LengthAnimation la = new LengthAnimation();
la.To =
new Length(size);
la.Duration =
new Time(1000);
la.BeginIn(0);
la.AutoReverse =
false;
la.RepeatCount = 0;
la.ParentTimeline = t;
la.
InterpolationMethod = InterpolationMethod.Paced;
LengthAnimationCollection col = new LengthAnimationCollection();
col.Add(la);
return col;

}

The interesting thing about this (translated -- the thing that had me banging my head against the wall ready to scream) was that changing the Fill/FillDefault properties of the individual animations had no effect when they were added to the timeline.  You must change the Fill method to Hold/Freeze if you want your animated object to retain its final state when the animation is done, otherwise it'll either flash back to its original state, or if the wTL.AutoReverse property is set to true, it will animate back to its starting state. 

Also note, the LengthAnimation's InterpolationMethod property is set (in this case to Paced, but there are other options...linear, discrete, spline), in order to make the animation as smooth as possible.

So, with a minimal amount of code, this milestone of my image browser project has been met.

No Comments