In this article we are going to see how we can creata animations in Silverlight .
Silverlight offers a much simpler way to create animations .
Lets see few examples of creating animations in Silverlight .
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> <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.
Lets 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 .
Hope this provides a good startup . We will go indepth into animations in future articles .