Developer Flotsam

Late last year I was on a plane from Sydney to Melbourne to open the first Silverlight Designer and Developer Network meet.

I was thinking about how the night would go when I had the thought that it would be cool to have something to put on the projector to create some atmosphere whilst people are getting seated etc.

The idea I came up with was to take the SDDN logo and make some snow float around it. With the Animation Chainer under my arm and some spare time on the plane (about an hour) I got to work… turned out the job was easier than I thought.

The actual snow randomisation and animation code turned out to be about 10 lines!

Sample and demo

Live Demo

<Sample Code>

Snow Animation Sample Code

</Sample Code>

How it works

The basic premise is that the code loops through 200 times and creates random sized Ellipse objects (the snow). It then applies a random animation to each Ellipse.

When the animation completes it automatically calls back in the animation creation method to kick off the next animation.

The length of each animation is randomised to create a more natural looking snow field… also this serves to ensure that there is no delay/freeze whilst Silverlight is processing the end animations.

void reDoAnims(AnimationConfig g, object context)
{
	// the main guts of the animation... each time one animation finishes, this code is called by the callback.
	Ellipse tt = context as Ellipse;

	double maxWidth = this.ActualWidth;
	double maxHeight = this.ActualHeight;

	double moveTop = (double)randNo.Next(0, Convert.ToInt32(maxHeight));
	double moveLeft = (double)randNo.Next(0, Convert.ToInt32(maxWidth));

	int keyTime = randNo.Next(10, 20);

	m.Add()
		   .DoubleAnimationK()
		   .Target(tt)
		   .Property(Canvas.LeftProperty)
		   .KeyFrame(moveLeft, new TimeSpan(0, 0, keyTime))
		   .Queue()
		   .DoubleAnimationK()
		   .Property(Canvas.TopProperty)
		   .KeyFrame(moveTop, new TimeSpan(0, 0, keyTime))
		   .TimelineContext(tt)
		   .TimelineCompleteAction(reDoAnims) // when this animation finishes call back this method to reinitialise the object.
		   .Queue();

	m.Begin(false, false);
}

Walking through the code from m.Add() on…

• Create the animation group
• Add a new double animation with keyframes
• Set the target to the Ellipse (from the passed on Context)
• Target the Ellipse’s Canvas.LeftProperty for animation
• Add a keyframe… Animate Canvas.LeftProperty to “moveLeft” over “keyTime” length. Both values are randomised
• Queue this animation and ready for another one
• Create another double animation with keyframes
• Target the Canvas.TopProperty this time
• Once again, use the randomised values to animate
• Set the context of the animation to the Ellipse. When the callback is called the Ellipse will be the context so the animation can be re-applied (with new random values)
• Set the callback so when this animation completes another one is automatically created
• Queue the animation
• Begin the animations!

Download the code and enjoy!

Leading on from this my brother Alex and I created a little Christmas card for the clients of Readify.

View the Readify Christmas Card.

Wait for the snow to settle then shake the globe!