How do I create simple animations using a WriteableBitmap?

Question

Greetings, everyone.

I'm trying to learn some Silverlight basics, and have decided to write a simple Mandelbrot-set drawing application for that reason. In Silverlight, of course. ;)

The application is mostly done. I'm using a WriteableBitmap to work on the pixels, and a simple Image placed on an empty form to display this bitmap (using the Source property). I've even managed to get zooming and moving the fractal around under control.

Now I wanted to spice things up a little bit by adding just a slight bit of animations; I know I cannot make the fractal move, as it's a scalar graphics object, but for example, when I zoom in, it would be nice if the initial zoom was a smooth animation, after which the application would recalculate the new, "zoomed in and sharp as a knife" image. Likewise, if I drag the image around (which is used to move the fractal) and the mouse leaves the image area, it would be great if the fractal returned smoothly to it's initial position (as it is now, it just "snaps" back as the initial settings are restored).

My problem is that I have no idea which parameter to control in an animation. I'm using ScaleTransform, for example, for zooming, but that is used to render the WriteableBitmap on the bitmap itself rather than use the transform properties of the image object. I did so because when I started manipulating the image properties, then the whole image started to move around the form, when I'd rather it's boundaries stay in place.

I suspect I may be trying to do something which Silverlight wasn't really meant to do in the first place (or I've started doing this whole thing wrong), but if I COULD add such little animations, that would be great. As such, any tips appreciated.

Answer 1

It sounds like you want to use the Silverlight animation engine to animate your own custom properties, that control your image display, rather than the image elements or containers.

If your properties for controlling the appearance of the image were exposed as double Dependancy Properties, then the animation system can use the basic DoubleAnimation objects to change your settings smoothly over time. You can even author animations in Expression Blend.

The animation engine would certainly give you easing functions etc to smooth out motion. If I had more detail on how your object was structured I could be more specific, but I hope this helps.