Charles Petzold

Animation Repetition

March 4, 2006
Roscoe, NY

One of the advantages of getting an early childhood dose of cheap animation — in my case, the Hanna-Barbera series The Flintstones and Yogi Bear — is witnessing transparent examples of how it's done. It doesn't take a particularly perceptive child to realize that a lot of activity (such as running and climbing) is done through repetition of a few cels across a moving background.

Similarly, you can make a little piece of computer animation seem like it's running forever without reversing itself through one-way repetition of different elements. That's the trick behind this piece of XAML called ExpandingCircles.xaml. It basically consists of 5 circles, each of which slowly expands in size and then snaps back to its original position, but it looks continuous because each circle's end position is the same as the next circle's beginning position. The two circles on the inside and outside have to be handled a little differently: The inner circle expands in thickness; the outer circle fades away.

By the way, if you have the February CTP installed but Internet Explorer doesn't want to execute loose XAML, try running the following command off a Visual Studio or SDK command prompt:

You get the message "Application cache cleared" and the problem is often fixed.