Runtime Animation with Silverlight

As I progress to our game development with Silverlight, I was asked how to animate a UIElement in silverlight 3 from code without using XAML or the Objects and Timeline.

Here is the simplest implementation that I have.

Storyboard myStoryBoard = new Storyboard();
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
Storyboard.SetTarget(myDoubleAnimation, myTargetObject);
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath("Opacity"));
myStoryBoard.Completed += (object sender, EventArgs e) =>
{
	//--Animation Completed
};
myDoubleAnimation.From = 1;
myDoubleAnimation.To = 0;
myDoubleAnimation.Duration = new TimeSpan(0, 0, 0, 0, 5000);
myStoryBoard.Children.Add(myDoubleAnimation);
myStoryBoard.Begin();

Lets Inspect the code.

First we created a new instance of StoryBoard class where our animated object resides.

Storyboard myStoryBoard = new Storyboard();

Then we create a double animation for our UIElements’ property with double or numeric value.

DoubleAnimation myDoubleAnimation = new DoubleAnimation();

After creating an instance of double animation, we then set our target object.

Storyboard.SetTarget(myDoubleAnimation, myTargetObject);

We also need to set our target property through this line.

Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath("Opacity"));

If we have other things to do after our animation is completed, we have to set the
storyboards Completed event.

myStoryBoard.Completed += (object sender, EventArgs e) =>
{
	//--Animation Completed
};

We need to provide a value also for our animations starting point which is achieved through this line.

myDoubleAnimation.From = 1;

And our destination point or value which is 0. In this case we are actually making a fade out effect.

myDoubleAnimation.To = 0;

Then of course the duration of our animation in milliseconds (1000ms=1s)

myDoubleAnimation.Duration = new TimeSpan(0, 0, 0, 0, 5000);

We are done with setting up our double animation. Its time we add it to our storyboard.

myStoryBoard.Children.Add(myDoubleAnimation);

And finally to begin our animation. We call a descriptive method called Begin();

myStoryBoard.Begin();

That’s it. With this simple implementation we can achieve animations or effects like fade-in fade-out. Or move an object from point a to point b.
My next post would be easing, for smooth animations.

Storyboard vStoryboard = new Storyboard();
DoubleAnimation vDoubleAnimation = new DoubleAnimation();
Storyboard.SetTarget(vDoubleAnimation, cSlotsGrid.Children[i]);
Storyboard.SetTargetProperty(vDoubleAnimation, new PropertyPath(“Opacity”));
if (i == cSlotsGrid.Children.Count – 1)
{
vStoryboard.Completed += (object sender, EventArgs e) =>
{
SlotsShowSecondaryCommon();
};
}vDoubleAnimation.From = 1;
vDoubleAnimation.To = 0;
vDoubleAnimation.Duration = new TimeSpan(0, 0, 0, 0, Convert.ToInt32((double)GetValue(HidePauseMillisecondsProperty) / 2));
vStoryboard.Children.Add(vDoubleAnimation);
vStoryboard.Begin();

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: