An animation is an illusion that is created by quickly cycling through a series of images, where each image is slightly different from the last.
An animation updates the value of a property over a period of time.
When we are cycling group of image the brain will perceive group of images as a single changing scene
In any file this illusion is created by using cameras that record many photographs or frames each second.
When the frames are played back by a projector the audience see a moving picture
In silver light animations can enhance your graphical creations by adding movement and interactivity
In silver light we animate objects but apply by applying animations to their individual properties
Story board controls animations with timer line and provides object and property targeting information for it child animations.
In silver light to create storyboards we use story board class.
Story board is physically does not exits, rather it is a logical implementation used to apply the animations we use the following syntax to create story board in xaml.
<Story Board___> properties
One (or) more child formations>
</story board>
Begin():- This method initiates or sorts the set of animations associated with the story board
Pause():- This method is used to pause the animation clock associated with the story board.
Resume():- used to resume the animation clock that is in pause state or runtime state associated with the story board
Stop():- Used to stop the story Board. That is all animations associated with story board will be stopped
Auto Reverse :- When set to true the animation will take back to original state after completing forward animation. That is during the timeline first forward animation will be executed. After completion of forward animation, backward animation will be implemented or applied
False:- No back word animation will be implemented
Begin time:- Used to set or get the time value at which the animation or timeline should begin. In general the begin time format will be [days] house: Minutes: seconds [.fract: onalseconds]
If we did not give any value animation will begin at time of execution of being method()
Duration:- used to set or get a value which indicates length of the time for animation.
We use the following format for the duration
[days.] -- 0to 23 hours: Minutes --0 to 59: seconds – 0 to 9 [functional seconds] optional
Repeat Behavior:- Used to set or get a value that indicates how many times animation should be repeated
If we give set Repeat behavior as 2x animation will be repeated If we give set Repeat Behavior as 2X animation will be repeated 2 times, 3X animation will be repeated for 3 times and 4x – 4 times etc
If we set repeat behavior is Forever animation will be repeated continuously through the execution time of the application. We can integrate this repeat behavior with duration. Like
Duration = “0:0:2” Repeat behaviors = “0:0:4” à animation will be repeated for 2 times.
Duration = “0:0:2” repeat behavior=”0:0:6” à repeated for 3 times.
Attached properties with storyboard class:-
Target name
Target property
These properties will be attached to animation classes when we create any animation class within the story board.
Target name:- This property is used to set the required silver light control id to which we want to apply the animations. Target property:- used to set or get the property name of the silver light control set in target name property with which we want to apply animation.
To use these properties we use the following syntax. Within the storyboard container tag
<animation alls story board. Target name = “control ID”
Story board. Target property = “property name
Duration =”value” Begin Time=”value” Auto reverse = “ value”
Repeat Behavior = “Value”/>
Types of Animation:-
These are 3 types of animations in silver light
Double animation
Color animation
Point animation
All there classes are present in system. Windows. Media. Animation]
Double animation is used to animate the value of a double property between two target values using linear Interpolation over a specified duration The class is used to implement this animation is double animation present in system. Windows. Media. Animation A double animation in which creates a transition b/w two values
Properties:-
From
To
Begin Time
Duration
From:- used to set a value from which animation clock begin
To :- used to set a value up to where animation should continue
The color animation is used to animated the value of a color property b/w values using linear interpolation over a specified duration
The color animation class creates a transition between two target values
Color animation class is present in system. Windows. Media. Animation
The properties are same as double animation
From
To
Begin Time
Duration
This animation is used to animate the value or point property between target values using lines interpolation over a specified duration the point animation class is used to create a transition between two target values
From
To
Begin Time
Duration
Repeat behavior
Create an object to which animation is to be applied
Add on event Trigger to the object
Create the story board
Apply the required animation using the respective animation class
Set the attached properties of animation class i.e target name and target property
Set the properties and their values of animation class.
1) <Rectangle name= “R” Fill = “Red” width = “100” Height = “50”> 2) <rectangle .trigger> <Event Trigger
<Begin Story Board> <Story Board xi name=”SBI>
4) <Double animation story board. Target name = “R”
5) Storyboard. Target property = “width” From = “100”
6) To =”200” Duration = “0:0:5”/>
</Story board>
</Begin story board>
</event trigger>
</rectangle. Trigger>
<Rectangle>
Crate a new silver light application go to XAML source and write the following are eg to apply the animation to the height of a rectangle
<Rectangle name = “R1”
Height = “50” width = “100”
<Rectangle.Trigger>Fill = “red”>
<Event Trigger>
<Begin story Board
<story Board x: Name = “SBI”>
<Double Animation story board. Target name = “R1”
Story board. Target property = “Height” from =”50” To = “150”
Duration = “0:0:5”/>
</story Board>
</Begin Story Board>
</Event Trigger>
<Rectangle. Trigger>
</rectangle>
EG : with double animation using opacity property
<Rectangle name = “R1” height = “150” width = “100” fill = “orange”>
<Rectangle.Triger>
<Event Trigger>
<Begin story Board>
<story board x: name = “SBI”>
<double animation story board. Target name = “x1”
Story board. Target property = “opacity” from = “1.0” to “0.0”
Highest lowest
Thickness thickness
</story board>
</begin story board>
</event Trigger>
</rectangle.Trigger>
</rectangle.>
Example with color animation
EG:- To change color from red to green
<Rectangle name = “R1” height “150” width = “100”
Fill = “red”>
<Rectangle. Trigger>
<event Trigger>
<Begin story board>
<story board x:Name = “SBI”>
Create a new silver Light application
Go To source
Write the following code.
<path fill = “Blue”>
<path.data>
<Ellipse geometry x:name=”E1” center = “30, 60” radius x = “40” radius y = “20”/>
<path. Data>
</path>
<canvas>
<canvas. Resources>
<story board S:Name= “SBI”>
<point Animation story board. Target name=”E1” story board .Target property = “center” From=”80, 60” to = “200, 200”
Duration = “0:0:5”/>
</Story board>
</canvas-Resources>
<canvas>
Create a button control, write the following code in button click event
Protected button click (objectr sender, routed event args
{
SBI.Begin();
}
Eg to control the animation programmatically the code is some as above for source and write it in new silver light application
<Grid X:=
<path fill = Blue>
<path.data,
<Ellipse geometry X:name= “E1” enter = “80,60”
Radius x= “40” Radius y = “20”/>
</path.data>
</path>
<canvas>
<convas. Resources>
<Story board x: Name = “SBI”>
<point animation story board. Target name = “E1”
Story board. Target property = “center” from = “80, 60” to
“200,200” duration = “0:0:5”/>
</Story board>
</canvas resources>
<canvas>
Create the buttons and write the following code protected void btn start – click – Route d event args e
{ SBI.Begin(); }
Protected void to be pause – click(..)
{
Protected void to be resume – click (--
{ SBI. Resume();
} protected void to be stop – click (--)
{
SBI. Stop ();
}
Protected void to be resume – click (--
{ SBI. Resume(); } protected void to be stop – click (--)
{ SBI. Stop (); }
Data binding in silver light represents attaching the data from source to target. Whenever we bind the data in silver light the data source need not be database. It might be a silver light object or XML source or database.
You liked the article?
Like : 0
Vote for difficulty
Current difficulty (Avg): Medium
1/15
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