Silverlight Animations

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.





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.