Storyboard Animation in Windows Store Application

This article describes the various types of animations of storyboards in Windows Store Applications using XAML.

The various types of animations work with various value types and calculate intermediate property values in various ways.

In this article I will show you two types of storyboard animations with various properties using XAML.

I have created a Blank Windows Store application using XAML.

First I define two rectangles in the XAML page that I will animate.

<StackPanel>

   <Canvas Width="400" Height="100">

      <Rectangle Name="Scenario2ContinuousRectangle" Width="100" Height="100" Fill="Indigo" />

   </Canvas>

   <Canvas Width="400" Height="100" Margin="0,20,0,0">

     <Rectangle Name="Scenario2KeyFrameRectangle" Width="100" Height="100" Fill="Indigo" />

   </Canvas>

</StackPanel>

The first animation uses ColorAnimation and a DoubleAnimation to animate the object. The ColorAnimation is used to change the property values of type Color and the DoubleAnimation Double using the default linear interpolation to create a smooth rate of change between initial and final values.

Here is code:

I take a storyboard object in which I defined two animation properties, the first is ColorAnimation, as in:
 

<ColorAnimation
    EnableDependentAnimation="true" Storyboard.TargetName="Scenario2ContinuousRectangle"

    Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"

    Duration="0:0:3" To="Green">                       

</ColorAnimation>

The second is DoubleAnimation, as in:

<DoubleAnimation

    Storyboard.TargetName="Scenario2ContinuousRectangle"

    Storyboard.TargetProperty="(Canvas.Left)"

    Duration="0:0:3" To="300">                      

</DoubleAnimation>                          

In the above code I will set the duration and target properties that will animate the value of the Canvas.Left property of the rectangle to 300 for every 3 seconds.

Note: the EnableDependentAnimation flag must be set to True in order to run this animation, since the fill color cannot be independently animated.

The complete code is:
 

<Storyboard x:Name="Scenario2ContinuousStoryboard">
    <ColorAnimation

       EnableDependentAnimation="true"

       Storyboard.TargetName="Scenario2ContinuousRectangle"

       Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"

       Duration="0:0:3" To="Green">                       

     </ColorAnimation>

     <DoubleAnimation

       Storyboard.TargetName="Scenario2ContinuousRectangle"

       Storyboard.TargetProperty="(Canvas.Left)"

       Duration="0:0:3" To="300">                      

    </DoubleAnimation>
</Storyboard>

The second animation replaces ColorAnimation and DoubleAnimation with versions that use keyframes. Keyframes indicate specific intermediate values to occur at specific times, and also indicate how to calculate values between those times. The demonstration uses three discrete keyframes followed by an easing keyframe to create a more complex animation.

Here is code of ColorAnimationUsingKeyFrames:
 

<ColorAnimationUsingKeyFrames

    EnableDependentAnimation="true"

    Storyboard.TargetName="Scenario2KeyFrameRectangle"

    Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"

    Duration="0:0:3">

    <DiscreteColorKeyFrame KeyTime="0:0:0.5" Value="Red" />

    <DiscreteColorKeyFrame KeyTime="0:0:1" Value="Orange" />

    <DiscreteColorKeyFrame KeyTime="0:0:2" Value="Blue" />

    <EasingColorKeyFrame KeyTime="0:0:3" Value="Green" />

</ColorAnimationUsingKeyFrames>

Note: the EnableDependentAnimation flag must be set to True in order to run this animation, siince the fill color cannot be independently animated.

Code of DoubleAnimationUsingKeyFrames.

<DoubleAnimationUsingKeyFrames

     Storyboard.TargetName="Scenario2KeyFrameRectangle"

     Storyboard.TargetProperty="(Canvas.Left)"

     Duration="0:0:3">

    <DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="50" />

    <DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="100" />

    <DiscreteDoubleKeyFrame KeyTime="0:0:2" Value="200" />

    <EasingDoubleKeyFrame KeyTime="0:0:3" Value="300" />

</DoubleAnimationUsingKeyFrames>

The Complete code is:

<Storyboard x:Name="Scenario2KeyFrameStoryboard">

    <ColorAnimationUsingKeyFrames

       EnableDependentAnimation="true"

       Storyboard.TargetName="Scenario2KeyFrameRectangle"

       Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"

       Duration="0:0:3">

      <DiscreteColorKeyFrame KeyTime="0:0:0.5" Value="Red" />

      <DiscreteColorKeyFrame KeyTime="0:0:1" Value="Orange" /> 

      <DiscreteColorKeyFrame KeyTime="0:0:2" Value="Blue" />

      <EasingColorKeyFrame KeyTime="0:0:3" Value="Green" />

   </ColorAnimationUsingKeyFrames>                 

   <DoubleAnimationUsingKeyFrames

      Storyboard.TargetName="Scenario2KeyFrameRectangle"

      Storyboard.TargetProperty="(Canvas.Left)"

      Duration="0:0:3">

     <DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="50" />

     <DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="100" />

     <DiscreteDoubleKeyFrame KeyTime="0:0:2" Value="200" />

     <EasingDoubleKeyFrame KeyTime="0:0:3" Value="300" />

   </DoubleAnimationUsingKeyFrames>
</Storyboard>

 Output: