Path Animation in Silverlight

I’ve been spending some time working on prototyping some things I want to get working for a game I’m developing, and one thing I wanted was to get a couple of fly’s flying (buzzing?) around a lightbulb.

Ideally I wanted to draw a path and say – Fly – use this path and follow it until the end of time! Turns out in WPF I could do this, but not so in Silverlight. Everything I saw explaining how to do it, involved working out complex (to me) equations to get the motion correct, or using a set of key frames in a storyboard. Neither of which sounded great to me.

I am doing this game in Silverlight 4, and that’s when it struck me – what about the PathListBox? I can put the Fly onto the PathListBox, animate the StartPoint to 100, set the repeat behaviour to ‘Forever’ and get a (moderately) decent path motion…

First things first, take my Fly

fly

and convert it to a user control.

FlyIntoControl

Cunningly named:

FlyAsControl

After that, time to draw my path:

DrawPath

aaaand, convert that bad boy to a Layout Path:

MakeLayoutPath

This automatically creates a PathListBox (sweet):

MakesPathListBox

To which I then drag my Fly!

DragFlyControlOntoPathListBox

I then create a new storyboard (called ‘FlyAnimation’):

CreateStoryboard

Animate the ‘StartPoint’ property at ‘6 seconds’ to be 100%:

SetEndValue

And then set the repeat behaviour to be Forever:

SetRepeatBehaviour

F5 and hmmm nothing…

Oops, forgot to start the storyboard! So, hunt for the ‘ControlStoryboardAction’:

FindControlStoryboard

Drag it onto the Fly control:

ControlStoryboard_OnFly

And set the properties to begin the storyboard on Load:

ControlStoryboard_Settings

Press F5 and bask in path animation glory!

Caveat – I’m not 100% sure this is the best way to do this, but it worked alright for me!

PS. You might want to set the Stroke and Fill properties of your Path to be transparent, otherwise it looks a bit monorail like :)

Print | posted @ Tuesday, September 21, 2010 3:17 AM

Comments on this entry:

Gravatar # re: Path Animation in Silverlight
by joaquin at 5/15/2012 8:35 AM

Thank you for the tutorial =)
Gravatar # re: Path Animation in Silverlight
by Greg Gum at 6/4/2012 9:52 AM

Thanks for this toutorial on Path animation. There is very little on this out there, even on Silverlight.net.

This is another helpful link to a Silverlight TV episode where they cover this topic in detail:

http://channel9.msdn.com/shows/SilverlightTV/Silverlight-TV-25-No-More-Boxes-Exploring-the-PathListBox/
Post A Comment
Title:
Name:
Email:
Comment:
Verification: