Partager via

Comment : ajouter une valeur de sortie d'animation à une valeur de départ d'animation

  • Article

Cet exemple montre comment ajouter une valeur de sortie d’animation à une valeur de départ d’animation.

Exemple

La IsAdditive propriété spécifie si vous souhaitez ajouter la valeur de sortie d’une animation à la valeur de départ (valeur de base) d’une propriété animée. Vous pouvez utiliser la propriété avec la IsAdditive plupart des animations de base et la plupart des animations d’images clés. Pour plus d’informations, consultez Vue d’ensemble de l’animation et Vue d’ensemble des animations à images clés.

L’exemple suivant montre l’effet de l’utilisation de la DoubleAnimation.IsAdditive propriété avec DoubleAnimation et de l’utilisation de la DoubleAnimationUsingKeyFrames.IsAdditive propriété avec 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>

Voir aussi