In this article we are going to see how we can create animations in Silverlight.
Silverlight offers a simple way to create animations.
Let's see few examples of creating animations in Silverlight.
![AnmSil1.gif]()
![AnmSil2.gif]()
In this article we are going to check out the Double Animations in Silverlight.
Double Animation animates the value of a Double property between two target
values using linear interpolation over a specified Duration.
More Information can be found here .
http://msdn.microsoft.com/en-us/library/system.windows.
media.animation.doubleanimation%28v=vs.95%29.aspx
XAML Code:
<UserControl.Resources>
<!-- Animates the rectangle's opacity. -->
<Storyboard
x:Name="Storyboard1">
<DoubleAnimation
Storyboard.TargetName="AnimatedRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0"
To="0.0" Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="Forever"
/>
</Storyboard>
</UserControl.Resources>
<Grid
x:Name="LayoutRoot"
Background="White">
<Rectangle
MouseLeftButtonDown="MyAnimatedRectangle_MouseLeftButtonDown"
x:Name="AnimatedRectangle"
Width="100"
Height="100" Fill="Blue"
/>
</Grid>
Code Behind:
private
void MyAnimatedRectangle_MouseLeftButtonDown(object
sender, MouseButtonEventArgs e)
{
Storyboard1.Begin();
}
Compile and Run to view the
animation.
Let's understand the animation we just created.
<DoubleAnimation
Storyboard.TargetName="AnimatedRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0"
To="0.0" Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="Forever"
/>
Storyboard.TargetName: This indicates the Target Control on which the animation
is to be applied.
<Storyboard
x:Name="Storyboard1">
<DoubleAnimation
Storyboard.TargetName="AnimatedRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0"
To="0.0" Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="Forever"
/>
Storyboard.TargetProperty
Storyboard.TargetProperty: This indicates the Property of the Control on which
the animation is to be applied.
<DoubleAnimation
Storyboard.TargetName="AnimatedRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0"
To="0.0"
Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="Forever"
/>
From and To indicate the intial and final values of the Target Property of the
Target Control. Duration indicated the time the animation would last.
One would need to modify this to create a quick or a slow animation.
<DoubleAnimation
Storyboard.TargetName="AnimatedRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0"
To="0.0" Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="Forever"
/>
AutoReverse = True: indicates that once the animation is over the values of the
Target Property of the Target Control should return to as they were before the
animation.
The Default value of this Property is False.
<DoubleAnimation
Storyboard.TargetName="AnimatedRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0"
To="0.0" Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="Forever"
/>
RepeatBehavior = Forever: indicates that the animation runs forever.
Here we are going to see some more animations . Try to understand how we can
create and control animations better .
I have taken this example from the link
http://www.silverlight.net/learn/
creating-ui/animation-and-easing/animations-%28silverlight-quickstart%29
Here we would see how to create Point animations in Silverlight .
XAML code :
<UserControl
x:Class="SilverlightApplication2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<UserControl.Resources>
<Storyboard
x:Name="myStoryboard">
<!--
Animate the center point of the ellipse. -->
<PointAnimation
Storyboard.TargetProperty="Center"
Storyboard.TargetName="MyAnimatedEllipseGeometry"
Duration="0:0:5"
From="20,200"
To="400,100"
RepeatBehavior="Forever"
/>
</Storyboard>
</UserControl.Resources>
<Grid
x:Name="LayoutRoot"
Background="White">
<Path
Fill="Blue">
<Path.Data>
<!-- Describe
an ellipse. -->
<EllipseGeometry
x:Name="MyAnimatedEllipseGeometry"
Center="20,20"
RadiusX="15"
RadiusY="15" />
</Path.Data>
</Path>
<StackPanel
Orientation="Horizontal"
Canvas.Left="10"
Canvas.Top="265">
<!--
Button that begins animation. -->
<Button
Click="Animation_Begin"
Width="65"
Height="30"
Margin="2"
Content="Begin" />
<!--
Button that pauses animation. -->
<Button
Click="Animation_Pause"
Width="65"
Height="30"
Margin="2"
Content="Pause" />
<!--
Button that resumes animation. -->
<Button
Click="Animation_Resume"
Width="65"
Height="30"
Margin="2"
Content="Resume" />
<!--
Button that stops animation. Stopping the animation returns the
ellipse to its original location. -->
<Button
Click="Animation_Stop"
Width="65"
Height="30"
Margin="2"
Content="Stop" />
</StackPanel>
</Grid>
</UserControl>
Point animation is very similar to Double Animation and all its properties are
similar . It animates the value of a Point property between two target values
using linear interpolation over a specified Duration.
Event handling code is given below :
private
void Animation_Begin(object
sender, RoutedEventArgs e)
{
myStoryboard.Begin();
}
private void
Animation_Pause(object sender,
RoutedEventArgs e)
{
myStoryboard.Pause();
}
private void
Animation_Resume(object sender,
RoutedEventArgs e)
{
myStoryboard.Resume();
}
private void
Animation_Stop(object sender,
RoutedEventArgs e)
{
myStoryboard.Stop();
}
We can easily Control the StoryBoard
animation w have created by using the Methods Begin , Pause , Resume and Stop .
The Most Usefull method I felt was Resume and it helps to resume the animation
from the Points we had stopped.
Hope this provides a good startup. We will go indepth into animations in future
articles.