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:

simple_animation1 simple_animation_li2

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

anim_incode11 anim_incode21

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
Posted in Uncategorized. 1 Comment »

One Response to “Animation in Silverlight”

  1. Gaurav Says:

    Hey your blog is really nice, very informative type… :)..esp SilverLight… keep it up..


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 41 other followers