Edit

Share via

How to: Add an Animation Output Value to an Animation Starting Value

  • Article

This example shows how to add an animation output value to an animation starting value.

Example

The IsAdditive property specifies whether you want the output value of an animation added to the starting value (base value) of an animated property. You can use the IsAdditive property with most basic animations and most key frame animations. For more information, see Animation Overview and Key-Frame Animations Overview.

The following example shows the effect of using the DoubleAnimation.IsAdditive property with DoubleAnimation and using the DoubleAnimationUsingKeyFrames.IsAdditive property with DoubleAnimationUsingKeyFrames.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <StackPanel Margin="20" >

    <!-- This rectangle is animated with DoubleAnimation and IsAdditive set to "True". -->
    <Rectangle Name="withIsAdditive"
      Width="100" Height="20" Margin="12,0,0,5" Fill="#AA3333FF" HorizontalAlignment="Left" />

    <!-- This rectangle is animated with DoubleAnimation and IsAdditive set to "False". -->
    <Rectangle Name="withoutIsAdditive"
      Width="100" Height="20" Margin="12,0,0,5" Fill="#AA3333FF" HorizontalAlignment="Left" />

    <!-- This rectangle is animated with DoubleAnimationUsingKeyFrames and IsAdditive set to "True". -->
    <Rectangle Name="withIsAdditiveUsingKeyFrames"
      Width="100" Height="20" Margin="12,0,0,5" Fill="#AA3333FF" HorizontalAlignment="Left" />

    <!-- This rectangle is animated with DoubleAnimationUsingKeyFrames and IsAdditive set to "False". -->
    <Rectangle Name="withoutIsAdditiveUsingKeyFrames"
      Width="100" Height="20" Margin="12,0,0,5" Fill="#AA3333FF" HorizontalAlignment="Left" />

    <!-- Create a button to restart the animations. -->
    <Button Margin="0,30,0,0" HorizontalAlignment="Left">
      Restart Animations
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>

              <!-- DoubleAnimation with IsAdditive set to "True". Because IsAdditive is set to "True" the 
                   actual starting value of the animation is equal to the sum of the default starting 
                   value of 100 (From="100)and the animation output value of 100 (From="100" To="200") Therefore
                   the animation begins at 200 pixels. Notice that each time the button is clicked and the 
                   animation is initiated, the animation starting value builds upon the preceeding ending value. -->
              <DoubleAnimation 
                Storyboard.TargetName="withIsAdditive" 
                Storyboard.TargetProperty="Width" 
                Duration="0:0:3" From="100" To="200" IsAdditive="True" />

              <!-- DoubleAnimation with IsAdditive set to "False". The starting value is the default starting
                   value of 100 pixels and subsequent animations do not build on earlier ones. -->
              <DoubleAnimation 
                Storyboard.TargetName="withoutIsAdditive" 
                Storyboard.TargetProperty="Width" 
                Duration="0:0:3" From="100" To="200" IsAdditive="False" />

              <!-- DoubleAnimationUsingKeyFrames with IsAdditive set to "True". Similar to the DoubleAnimation
                   above, this animation adds its output value to its starting value. Note that the output value
                   is the total output value from all the key frames for a total output of 100 pixels. -->
              <DoubleAnimationUsingKeyFrames
                 Storyboard.TargetName="withIsAdditiveUsingKeyFrames"
                 Storyboard.TargetProperty="Width"
                 IsAdditive="True" >
                <DoubleAnimationUsingKeyFrames.KeyFrames>
                  <LinearDoubleKeyFrame Value="100" KeyTime="0:0:0" />
                  <LinearDoubleKeyFrame Value="130" KeyTime="0:0:1" />
                  <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="200" KeyTime="0:0:3" />
                </DoubleAnimationUsingKeyFrames.KeyFrames>
              </DoubleAnimationUsingKeyFrames>

              <!-- DoubleAnimationUsingKeyFrames with IsAdditive set to "False". The starting value is the 
                   default starting value of 100 pixels and subsequent animations do not build on earlier ones. -->
              <DoubleAnimationUsingKeyFrames
                 Storyboard.TargetName="withoutIsAdditiveUsingKeyFrames"
                 Storyboard.TargetProperty="Width"
                 IsAdditive="False" >
                <DoubleAnimationUsingKeyFrames.KeyFrames>
                  <LinearDoubleKeyFrame Value="100" KeyTime="0:0:0" />
                  <LinearDoubleKeyFrame Value="130" KeyTime="0:0:1" />
                  <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="200" KeyTime="0:0:3" />
                </DoubleAnimationUsingKeyFrames.KeyFrames>
              </DoubleAnimationUsingKeyFrames>

            </Storyboard>

          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>
  </StackPanel>
</Page>

See also