Silverlight Animation

.1962 Ferrari 250 GTO


Screen Capture of 1962 Ferrari 250 GTO Animation

.Silverlight Animation

"Silverlight offers various types of animations through the use of the Storyboard object. Every animation must have a storyboard which is responsible for organizing and controlling the animation."


Silverlight offers various types of animations throught the use of the Storyboard object. Every animation must have a storyboard that is responsible for organizing and controlling the animation defined within it.

  1. Storyboards
    • A Silverlight Storyboard Class is a container timeline that provides object and property targeting information for its child animations.
    • Storyboard animations can be used to visually indicate when a button was pressed, or visually enhance page transitions, or animate any FrameworkElement
    • Storyboards are usually created using Microsoft Expression Blend, however they can also be coded.
    • A Storyboard must be made a resource that is available to the object to be animated.
    • As descibed in Microsoft's Animation Overview, animations generate property values. Different types of animations exist for different property types. To animate a property that takes a Double value, (eg. Width property), use an animation that produces Double values, such as the DoubleAnimation. To animate a property that takes a Point value, use an animation that produces Point values, such as PointAnimation. Some common types of animations are:
      • ColorAnimation - animate the color of s SolidColorBrush or a GradientStop.
      • DoubleAnimation- Animate the Width or Height of any FrameworkElement.
      • PointAnimation- Animate the center position of an EllipseGeometry.
    • As descibed in Microsoft's Storyboards Overview, a Storyboard is a type of container timeline that provides targeting information for the timelines it contains. A Storyboard can contain any type of Timeline, including other container timelines and animations. Storyboard objects enable you to combine timelines that affect a variety of objects and properties into a single timeline tree, making it easy to organize and control complex timing behaviors. For example, suppose you want a button that does these three things:
      • Grow and change color when the user selects the button
      • Shrink away and then grow back to its original size when clicked
      • Shrink and fade to 50 percent opacity when it becomes disabled

      In this case, you have multiple sets of animations that apply to the same object, and you want to play at different times, dependent on the state of the button. Storyboard objects enable you to organize animations and apply them in groups to one or more objects.

  2. Storyboard Simple Example
    • Below is a simple example of a storyboard animation. When you mouse over the car, it increases in size. When you click on the car it drives away:

      Get Microsoft Silverlight


      Ferrari Animation (Move Mouse Over and Click On)

      MainPage.xaml

      <UserControl x:Class="Ferrari.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="75" d:DesignWidth="1216" Background="#FCFAF8">

          <UserControl.Resources>
              <Storyboard x:Name="GoFerrari">
                  <DoubleAnimation
                     Storyboard.TargetName="Ferrari"
                     Storyboard.TargetProperty="Width"
                      To="216" Duration="0:0:5">
                  </DoubleAnimation>
                  <DoubleAnimation
                     Storyboard.TargetName="Ferrari"
                     Storyboard.TargetProperty="Height"
                      To="100" Duration="0:0:5">
                  </DoubleAnimation>
              </Storyboard>
              <Storyboard x:Name="GoFerrari2">
                  <DoubleAnimation
                     Storyboard.TargetName="TranslateFerrari"
                     Storyboard.TargetProperty="X"
                      To="-750" Duration="0:0:1">
                      <DoubleAnimation.EasingFunction>
                          <PowerEase EasingMode="EaseIn"></PowerEase>
                      </DoubleAnimation.EasingFunction>
                  </DoubleAnimation>
                  <DoubleAnimation
                     Storyboard.TargetName="TranslateFerrari"
                     Storyboard.TargetProperty="Y"
                      To="150" Duration="0:0:1">
                      <DoubleAnimation.EasingFunction>
                          <PowerEase EasingMode="EaseIn"></PowerEase>
                      </DoubleAnimation.EasingFunction>
                  </DoubleAnimation>
              </Storyboard>
          </UserControl.Resources>

          <Grid x:Name="LayoutRoot" Background="#FCFAF8">
              <Image x:Name="Ferrari" MouseEnter="Ferrari_MouseEnter" MouseLeftButtonDown="Ferrari_MouseLeftButtonDown" HorizontalAlignment="Center" Height="50" VerticalAlignment="Center" Width="108" Source="ferrarigtof.jpg" Stretch="Fill">
                  <Image.RenderTransform>
                      <TranslateTransform x:Name="TranslateFerrari"></TranslateTransform>
                  </Image.RenderTransform>
              </Image>
          </Grid>
      </UserControl>

      MainPage.xaml.cs

      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Net;
      using System.Windows;
      using System.Windows.Browser;
      using System.Windows.Controls;
      using System.Windows.Documents;
      using System.Windows.Input;
      using System.Windows.Media;
      using System.Windows.Media.Animation;
      using System.Windows.Shapes;

      namespace Ferrari
      {
          public partial class MainPage : UserControl
          {
              public MainPage()
              {
                  InitializeComponent();
              }

              private void Ferrari_MouseEnter(object sender, MouseEventArgs e)
              {
                 // MessageBox.Show("hi");
                  GoFerrari.Begin();
              }

              private void Ferrari_MouseLeftButtonDown(object sender, MouseEventArgs e)
              {
                   //MessageBox.Show("hi");
                  GoFerrari2.Begin();

                  var host = HtmlPage.Document.GetElementById("silverlightControlHost");
                  host.SetStyleAttribute("height", "0px");
              }
          }
      }

  1. Storyboard Animates on Page Load
    • The Triggers attached property can be used on the element to be animated. The Loaded event works with the trigger so the animation starts as soon as the page is loaded,
    • Below is the above color change animation that runs for 10 seconds and starts when the page is loaded:

      Get Microsoft Silverlight


      Rectangle Color Change (Mouse Over Rectangle)

      MainPage.xaml

      <UserControl x:Class="Storyboard.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="200" d:DesignWidth="200">

          <Grid x:Name="LayoutRoot" Background="White">
              <Rectangle Height="150"
                         Width="150"
                         Fill="Blue"
                         x:Name="theRectangle">
                  <Rectangle.Triggers>
                      <EventTrigger RoutedEvent="Rectangle.Loaded" >
                      <BeginStoryboard>
                         <Storyboard x:Name="ColorAnimation">
                         <ColorAnimation Storyboard.TargetName="theRectangle"
                                         Storyboard.TargetProperty="(Fill) . (SolidColorBrush.Color)"
                                         From="Blue"
                                         To="DarkGoldenrod"
                                         Duration="0:0:10" />
                           </Storyboard>
                      </BeginStoryboard>
                      </EventTrigger>
                  </Rectangle.Triggers>
             </Rectangle>           
                     
          </Grid>
      </UserControl>

  1. Repeating - the RepeatBehavior property allows the animation to be repeated a specified number of times:

    (eg. RepeatBehavior="Forever").

  2. Reversing - the AutoReverse property allow a completed animation to then run backwards to the beginning:

    (eg. AutoReverse="True").

  3. Easing Functions - easing functions provide the animation with acceleration, deceleration, or bouncy behaviors. Three modes control when
    the easing takes place during the animation. EaseIn=Starting of Animation EaseOut=Ending of Animation EaseInOut=During Entire Animation:

    (eg. CubicEase EasingMode = "EaseInOut")

  4. Bitmap Caching - is used for performance enhancement by caching the visual elements the first time they are rendered. Subsequent renderings are made from cache. The first step to using bitmap caching is to enable in at the parameter level of the Silverlight plugin:

    (eg. parm name="EnableGPUAcceleration" value="true").

    The second step is to set the property on the object to be animated:

    (eg. CacheMode="BitMapCache")

  5. Animation Types
    • Silverlight provides two categories of Animation Types :
      • From/To/By - Animates between a starting and ending value:
        1. To specify a starting value, set the From property of the animation.
        2. To specify an ending value, set the To property of the animation.
        3. To specify an ending value relative to the starting value, set the By property of the animation (instead of the To property).
      • Key-frame - Animates between a series of values specified using key-frame objects. Key-frame animations are more powerful than From/To/By animations because you can specify any number of target values and even control their interpolation method. Key-frame animations are described in detail in Key-Frame Animations.
  1. Key-Frame Animations
    • Like a From/To/By animation, a key-frame animation animates the value of a target property. It creates a transition among its target values over its Duration. However, a From/To/By animation creates a transition between two values, but a single key-frame animation can create transitions among any number of target values.
    • Unlike a From/To/By animation, a key-frame animation has no From, To, or By properties with which to set its target values. Instead, you describe a key-frame animation's target values by using key-frame objects. To specify the animation's target values, you create key-frame objects and add them to the animation's KeyFrames property. When the animation runs, it transitions between the frames you specified.
    • In addition to supporting multiple target values, some key-frame methods even support multiple interpolation methods. An animation's interpolation method defines how it transitions from one value to the next. There are three types of interpolations: discrete, linear, and splined.
    • Below is a keyframes-based animation that moves a rectangle across the screen by using the TranslateX transformation:

Get Microsoft Silverlight


Key-Frame Animation (Click on Rectangle to Start))

MainPage.xaml

<UserControl x:Class="Storyboard3.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">

    <Canvas>
        <Canvas.Resources>
            <Storyboard x:Name="myStoryboard">

                <!-- Animate the TranslateTransform's X property
           from 0 to 350, then 50, then 200 over 10 seconds. -->
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyAnimatedTranslateTransform"
                                               Storyboard.TargetProperty="X"
                                               Duration="0:0:10">

                    <!-- Using a LinearDoubleKeyFrame, the rectangle moves
           steadily from its starting position to 500 over
           the first 3 seconds.  -->
                    <LinearDoubleKeyFrame Value="500"
                                          KeyTime="0:0:3" />

                    <!-- Using a DiscreteDoubleKeyFrame, the rectangle suddenly
           appears at 400 after the fourth second of the animation. -->
                    <DiscreteDoubleKeyFrame Value="400"
                                            KeyTime="0:0:4" />

                    <!-- Using a SplineDoubleKeyFrame, the rectangle moves
           back to its starting point. The animation starts out slowly at
           first and then speeds up. This KeyFrame ends after the 6th
           second. -->
                    <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00"
                                          Value="0"
                                          KeyTime="0:0:6" />

                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </Canvas.Resources>

        <Rectangle MouseLeftButtonDown="Mouse_Clicked"
                   Fill="Blue"
                   Width="50"
                   Height="50">
            <Rectangle.RenderTransform>
                <TranslateTransform x:Name="MyAnimatedTranslateTransform"
                                    X="0"
                                    Y="0" />
            </Rectangle.RenderTransform>
        </Rectangle>

    </Canvas>

</UserControl>


MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Storyboard3
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        // When the user clicks the Rectangle, the animation
        // begins.
        private void Mouse_Clicked(object sender, MouseEventArgs e)
        {
            myStoryboard.Begin();
        }


    }
}



Reference Articles


Top