So a friend of mine gave me an old Flash animation book called Flash Math Creativity. The book is published by FriendsofED, the same publisher that put out Foundation Silverlight 2 Animation. In Flash Math Creativity, several different ActionScript programmers demonstrate how to do some pretty complex animations, all from within code. Now implementing the examples from the book in ActionScript is a pretty trivial task. You just type out the code from the book an run it. Rewriting and running them in Silverlight though is a different story.
As an exercise to learn the best ways to do complex animations in Silverlight, I’ve begun implementing my own versions of the examples from Flash Math Creativity using Silverlight. I will be posting my results here on the blog.
And here is the first animation from the book!
Oscillating Ellipses
This animation was originally created by Jamie MacDonald using ActionScript . Here it is using Silverlight 2.
In this animation I used the DispatcherTimer class to create a new red ball every 100
milliseconds. The movement of the balls is done from within an event handler in each ball instance. In essence, there is a loose-coupling between the main Page class which creates the red balls, and the actual ball classes. Once the balls are created, each instance manages its own animation and removes itself from the LayoutRoot when its opacity becomes 0.
The other key to this animation is that each ball subscribes to the CompositionTarget.Rendering event. I found that using this event to animate on works much better because it runs on a separate thread. On the other hand the DispatcherTimer.Tick event is managed and dispatched from within the UI thread, and so it doesn’t keep pace as well as the CompositionTarget.Rendering event.
Download the source code here.
Edit: View part I.I of the Silverlight Math Creativity series here.