1 Animation and Storyboard Posted by Steve Wong | at 1:24 AM

Before getting closer to Silverlight, I used to make animation and some application by Flash.

Now, I have to remind all the people, who used to design Flash Application before, should be clear that it has a new system in Silverlight which is totally different from Flash.

We have Storyboard to control the animation of different objects but we have Movie Clip to control those in Flash.

In flash we have to create animation by time line everywhere, but we can do all the animation separately in Silverlight.

We create animation in code-behind as follow:

First we create our new Storyboard and Double Animation :

[sourcecode language='csharp']Storyboard Reflection_Story1 = new Storyboard(); 
DoubleAnimation Reflection_fades = new DoubleAnimation();
[/sourcecode]

Then we have to set what the animation do, the value changed from .... to ....

[sourcecode language='csharp']Reflection_fades.From = 0;
Reflection_fades.To = 1;
[/sourcecode]

Furthermore, we have to let the computer know, how long is the animation last for?

[sourcecode language='csharp']Reflection_fades.Duration = new Duration(TimeSpan.Parse("0:0:1"));
[/sourcecode]

After that, what else we left? We have to tell the computer which object we want to apply for this animation.

[sourcecode language='csharp']Storyboard.SetTarget(Reflection_fades, Target_item);
[/sourcecode]

Also, the property that you are changing from 0 to 1 on the Targert_item.

[sourcecode language='csharp']Storyboard.SetTargetProperty(Reflection_fades, "(Target_item.Opacity)");
[/sourcecode]

Things left are quite simple and easy to understand!
We should let the Storyboard to control our animation, thus we add(hook) it onto the Storyboard.
Of course, we should then add the Storyboard into the Resources so that we can see it in the application.

[sourcecode language='csharp']Reflection_Story1.Children.Add(Reflection_fades);
LayoutRoot.Resources.Add(Reflection_Story1);
[/sourcecode]

Lastly, we should make it starts so we can see what happens to the Opacity of the item.

[sourcecode language='csharp']Reflection_Story1.Begin();
[/sourcecode]

Example is almost finished here, but for more details, you can refer to MSDN.

Because users also need to have a clear concepts of the use of different Animation (like Double, Point...)

Live With Light
Steve Wong (Hong Kong)