Wednesday, March 30, 2011

Advanced Animation: Animating 15,000 Visuals in Silverlight

In my last post I showed a quick summary of a graphic-intensive dashboard that I helped out with.  I also mentioned that there are a lot of posts out there dogging SL and WPF rendering performance.  But if we get creative with some of the built-in controls SL has to offer we can get some pretty good drawing perf.  I wanted to elaborate on some of the techniques I used to eek-out every bit of perf I could.   The main concepts I want to discuss are:

Procedural Animations
Writeable Bitmaps
Image Blitting

Out of the box, Silverlight and WPF have Storyboards and Timelines to animate objects on the screen.  Storyboards, however, quickly break down once you need to draw more than ~50 items on a screen at once.   Storyboards are great for quick animation (slide-in, slide-out, etc.), but for intense data visualizations we’ll have to get a little closer to the metal.

Procedural Animations

Procedural animations are most commonly found in video games and are used to create complex visual effects. Things like simulating particle systems, physics-based animations, and sprite animations.  But that doesn’t mean we can’t spicy up our everyday-software with some of the same concepts.
They way most procedural animations are implemented are with a simple a Setup and Update, Draw loop.

In Silverlight we can setup our animations by hooking in to the CompositionTarget.Rendering event and then call ‘Update’ and ‘Draw’ each time it ticks. If you’ve ever done any game programming for SL or WPF this should look very familiar as it resembles a typical game ticker.

Here is a sample project you can download to wrap your head around how procedural animations in Silverlight.