SilverLight Data Type Animations

Ratings:
(4)
Views:876
Banner-Img
  • Share this blog:

 

Silverlight Animation

Animations are used to give moments to silver light controls by taking control properties, using animation we can give a rich internet user interface to the Asp.net application.

  • The animation we can classify into two types basically.
  1. Data type animation or from/to/by animation
  2. Key frame animation

Data Type Animation

This animation is used to Animate silver light controls by taking control properties, In the Data type animation  we can give only one target for animation

  • The data type animation we can classify into three types
  • The animation between starting and ending
  1. Double animation
  2. color animation
  3. point animation

Double Animation

using this animation we can give animation to Silverlight control by taking double related properties (or) which property taking numeric values.

EX:- open new Silverlight application

Go to XAML mode

in the canvas tag

<canvas>

<text block x:Name = “t1” Text = “welcome” fontsize = “100” canvas. Left = “15”>

</textblock>

<rectangle x: name = “r1’ height = “150” width = “500” stroke = “yed” stroke thickness = “100” stroke dash array = “2” stroke dash offset = “5”>

<rectangle. Triggers>

<event trigger Routed event = “canvas. Loaded”>

<Begin story board>

<story board>

<double animation story board.Talget name

=”r1” storyboard . Target property= “stroke dash offset “   from = “1” to = “1” auto revels  = “true” repeat behavior = “forever”

</double animation>

</storyboard>

</begin storyboard>

</event trigger>

<Rectangle. Triggers>

</rectangle>

</canvas>

Rectangle. Trigger:

This tag is used to inclement the evens

Event trigger:

Using this tag we can set the implementing event

  • As per XAML, we have to define animation in the storyboard, using storyboard we can control all animation, all storyboards we have to define in the beginning storyboard, all storyboard we can control using begin storyboard.
  • Storyboard. Target name property using for deciding giving animation control
  • Storyboard. Target property using this property we can decide giving animation property
  • From using this property animation starting location
  • To use this property animation ending location
  • Auto revels:- using this property animation in the revels order
  • Repeat behavior: using this property we can set animation repeating type, this property supports three types of repeating types
  1. Times pan (0: 0: 15) ! Repeat animation 1.5 seconds
  2. Iterations (5x) : repeat animation 5 times
  3. Literal (forever ) repeat continuously

Color Animation

This animation is used to animate silver light control by taking color-related properties

EX:- open new silver light application

Go to SAML mode

In the canvas tag

<canvas>

<polygon X:Name = “p1” height = “250” width = “300” fill = “Red” stroke = “Green” stroke thickness = “10”>

<polygon. Points>

<point X = “30” Y= “40” > </point>

<point x= “200” Y = “10”> </point>

<point x= “150” Y = “100”> </point>

</polygon. points>

<polygon. Triggers>

<Event Trigger Routed Event = “canvas. Loaded”>

<begin story board>

<story board>

<color animation storyboard. Target name = “p1” story board. Target property = “(fill), (color)” from = “red”  To = “black” auto reverse = “True” repeat behavior = “Forever”>

</color animation>

</story board>

</Begin story board>

</Event trigger>

</polygon. Triggers>

</polygon>

</canvas>

Polygon:

This control is used to create closed shapes by defining a collection of points

Polygon. Points:

using this tag we can create a workspace for defining points

Point:

This tag is used to define one point by specifying X location and Y location

Point Animation

using this Animation we can animate SilverLight control by taking which properties having two parameters.

Example:- open new silver light application

Go to XAML Mode

In the canvas tag

<canvas>

<Ellipse X: name = “e1” height = “200” width = “300” stoke = “blue” stroke thickness = “10”>

<Ellipse  . fill>

<Radial Gradient Brush X: Name = “I” gradient origin = “.5”

<Gradient stop offset = “.2” color = “red “ > </ gradient stop>

<Gradient stop offset = “.4” colot = “green”> </gradient stop>

<gradient stop offset = “.6” color = “while”> </gradient stop>

<Gradient stop offset =  “.8” color = “black”> </gradient stop>

</radial gradient brush>

</ellipse.fill>

<event Trigger routed Event = “canvas loaded”>

<begin story board>

<story board>

<point animation storyboard. Target name= “rd”  storyboard. Target property = “gradient origin” from = “.1,.1” to “.5,.5”

Auto reverse = “True” Repeat behavior = “Forever”>

</point Animation>

</story board>

</begin story board>

</event trigger>

</Ellipse. Triggers>

</ellipse>

</canvas>

You liked the article?

Like : 0

Vote for difficulty

Current difficulty (Avg): Medium

Recommended Courses

1/15

About Author
Authorlogo
Name
TekSlate
Author Bio

TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills in the market.


Stay Updated


Get stories of change makers and innovators from the startup ecosystem in your inbox