Animation in Silverlight

Silverlight animation is property-based: The properties
of the elements are modified over an interval of time.

Animation is time-based: The initial state,final state and the
duration is to be set.Silverlight calculates the frame rate.(default 60 frames per second)

Properties in Silverlight have datatypes(double,object,point and color):
Every data type requires a different class of animation

Two strategies for varying a property value in Silverlight animation are:
Linear Interpolation:  Property varies smoothly and continuously over
duration of time.
Keyframe animation:  Properties take many values over duration of time,thus
hopping from one value to another abruptly.

An animation requires:
1) Object
2) A StoryBoard
3) Event Handler

Animations can be started when the page is loaded or can be handled by
event handlers.
1) When page is loaded.
When page is rendered in browser an event trigger attached to page
performs an action of starting the storyboard.
2) When using event handlers
The storyboard is stored as a resource and put into action in response
to any event using code that interacts with the storyboard.

Here are the two examples with the code:

Example1:

Code1: When page is loaded.

<UserControl.Triggers>
<EventTrigger>
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName=”Box1″ Storyboard.TargetProperty=”Width” From=”100″ To=”400″ Duration=”00:00:10″></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</UserControl.Triggers>

<Grid x:Name=”LayoutRoot” Background=”White”>
<Rectangle Width=”100″ Height=”100″ x:Name=”Box1″>
<Rectangle.Fill>
<SolidColorBrush Color=”CadetBlue”></SolidColorBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Text=”Rectangle is increasing in width” FontSize=”25″></TextBlock>
</Grid>

Example 2

Code 2: Using Event handler

<UserControl.Resources>
<Storyboard x:Name=”animate1″>
<DoubleAnimation Storyboard.TargetName=”Box1″ Storyboard.TargetProperty=”Width” From=”100″ To=”400″ Duration=”00:00:10″></DoubleAnimation>
</Storyboard>

</UserControl.Resources>

<Grid x:Name=”LayoutRoot” Background=”White”>
<Rectangle Width=”100″ Height=”100″ x:Name=”Box1″>
<Rectangle.Fill>
<SolidColorBrush Color=”CadetBlue”></SolidColorBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Text=”Rectangle is increasing in width on MouseEnter event” FontSize=”20″></TextBlock>
<Button Height=”51″ Margin=”251,0,246,103″ VerticalAlignment=”Bottom” Content=”Start Animation” Click=”Button_Click”/>
</Grid>

Event Handler Code in C# i.e page.xaml.cs file:

private void Button_Click(object sender, RoutedEventArgs e)
{
animate1.Begin();
}

About these ads