Silverlight Key Frame Animation

Key Frame Animation

Silverlight Key Frame Animations are used to implement more complex Animations, depending on the requirement we can give any number of targets. In the key frame animation for giving multiple targets we have to define frames.

The key frame Animation we can classified in to three types

1. Double animation using key frame
2. Color animation using key frame
3. Point animation using key frame

The three types of animations supports three frames

• Linear key frame
• Discrete key frame
• Sp line key frame

Linear key frame

This frame is used to single target to the key frame animation this frame always takes target location and frame time

While executing this frame the user can observe previous value to target value how execute animation

Discrete key frame

Using this frame we can give single target to the key frame animation, we  have to specify target value and frame time, while executing this frame we can observe animation after reaching target location

Sp line key frame

using this frame we can give single target to the key frame animation while defining this frame we have to specify target value and frame time and sp line property

The Microsoft defined sp line key frame based on sp line mathematical function.

Example on double animation using key frame

Open new silverlight  application

Go to XAML mode

In the canvas tag

<canvas>

<rectangle X:Name = “R1” width = “100” Height = “100” stroke = “Red” stroke thickness = “10”>

<rectangle . Triggers>

<Event trigger Routed event =  “Rectangle. Loaded”>

<Begin story board>

<Story board>

<double animation using key frames storyboard – Target name = “r1” storyboard. Target property = “width”>

<linear double key frame key time = “0:0:4”

Value = “400”> </linear double key frame>

<linear double key frame key time = “0:0:20” value = “500”>  </linear double key frame>

<discrete double key frame value = “600” key frame = “0:0:25”> </discrete doublekeyframe>

</double animation using  key frames>

</storyboard>

</begin storyboard>

</event trigger>

</rectangle. Triggers>

</rectangle>

</canvas>

 Example on color animation using key frames

Open new silverlight application

Go to XAML mode

In the canvas tag

<canvas>

<text block X:Name = “t1” text = “welcome” font size = “120” foreground = “red”>

<text block. Triggers>

<event trigger routed event = “canvas. loaded”>

<begin story board>

<color animation using key frames storyboard. Target name = “t1” story board. Target property = “(foreground). (color)” repeat behavior = “forever”>

<linear color key frame key time = “0:0:10” value = “green”>

<linear color key frame>

<linear color key frame key time = “0:0:15” value = “blue”>

</liner color key frame>

<linear color key Frame keytime = “):0:20” value = “black”

<linear color keyframe>

</color animation using key frames>

</story board>

</begin story board>

</event trigger>

</Text block . Triggers>

</text block>

</canvas>

Example on point animation using key frames

Open new silver light application

Go to XAML mode

In the canvas tag

<canvas>

<path X:Name = “p1” height = “300” width = “300” stroke = “red” stroke thickness = “10” Fill = “black”>

<path . data>

<Geometry group>

<rectangle geometry rect = “10, 10, 250, 250”> </Rectangle geo metry>

<Ellipse geometry X:Name = “e1” radius X= “10” Radius Y = “10” center = “30, 30”>

</Ellipse geometry>

</geometry group>

</path. Data>

<path. Triggers>

<Event trigger routed event – “canvas. Loaded”>

<begin story board>

<Story board>

<point animation using key frames storyboard. Target name = “e1” storyboard. Target property = “center”>

<linear point key frame key time = “0:0:10”  value = “230, 30”>

</liner point key frame>

<discrete point key frame keytimes = “0:0:20” value = “200, 230”>

</discrete point key frame>

<sp linepoint key frame key time = “0:0:30” value = “30, 230”

Key sp line = “0.0,.6, .0, .6”>

</sp line pint keyframe>

<linear point key frame key time = “0:0:35” value =  “20, 30”>

</linear point key frame>

</point animation using key frames>

</story board>

</begin story board>

</event trigger>

</ path. Triggers>

</path>

</canvas>