Comment : contrôler une animation avec From, To et By

  • Article

Une animation "From/To/By" ou une "animation de base" crée une transition entre deux valeurs cibles (consultez Vue d'ensemble de l'animation pour une introduction aux différents types d'animations). Pour définir les valeurs cibles d'une animation de base, utilisez ses propriétés From, To et By. Le tableau suivant récapitule la manière dont les propriétés From, To et By peuvent être utilisées pour déterminer les valeurs cibles d'une animation.

Propriétés spécifiées

Comportement résultant

From

L'animation passe de la valeur définie par la propriété From à la valeur de base de la propriété en cours d'animation ou à la valeur de sortie de l'animation qui la précède en fonction de la configuration de cette dernière.

From et To

L'animation passe de la valeur définie par la propriété From à la valeur définie par la propriété To.

From et By

L'animation passe de la valeur définie par la propriété From à la valeur définie par la somme des propriétés From et By.

To

L'animation passe de la valeur de base de la propriété animée ou de la valeur de sortie de l'animation qui la précède à la valeur définie par la propriété To.

By

L'animation passe de la valeur de base de la propriété en cours d'animation ou de la valeur de sortie de l'animation qui la précède à la somme de cette dernière valeur et de la valeur définie par la propriété By.
RemarqueRemarque

Ne définissez pas à la fois la propriété To et la propriété By sur la même animation.

Pour utiliser d'autres méthodes d'interpolation ou animer plus de deux valeurs cibles, utilisez une animation d'image clé. Consultez Vue d'ensemble des animations d'image clé pour plus d'informations.

Pour plus d'informations sur l'application de plusieurs animations à une propriété unique, consultez Vue d'ensemble des animations d'image clé.

L'exemple suivant indique les effets différents de la définition de propriétés To, By et From sur les animations.

Exemple

<!-- This example shows the different effects of setting
   To, By, and From properties on animations.  -->
<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">

  <StackPanel Margin="20">

    <!-- Demonstrates the From and To properties used together. -->
    <Rectangle Name="fromToAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the To property. -->
    <Rectangle Name="toAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the By property. -->
    <Rectangle Name="byAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the From and By properties. -->
    <Rectangle Name="fromByAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the From property. -->
    <Rectangle Name="fromAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />
    <Button>
      Start Animations
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard FillBehavior="Stop">

              <!-- Demonstrates the From and To properties used together.
                 Animates the rectangle's Width property from 50 to 300 over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="fromToAnimatedRectangle" 
                Storyboard.TargetProperty="(Rectangle.Width)"
                From="50" To="300" Duration="0:0:10" />

              <!-- Demonstrates the To property used by itself.
                 Animates the Rectangle's Width property from its base value
                 (100) to 300 over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="toAnimatedRectangle" Storyboard.TargetProperty="(Rectangle.Width)"
                To="300" Duration="0:0:10" />

              <!-- Demonstrates the By property used by itself.
                 Increments the Rectangle's Width property by 300 over 10 seconds.
                 As a result, the Width property is animated from its base value
                 (100) to 400 (100 + 300) over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="byAnimatedRectangle" Storyboard.TargetProperty="(Rectangle.Width)" 
                By="300" Duration="0:0:10" />

              <!-- Demonstrates the From and By properties used together.
                 Increments the Rectangle's Width property by 300 over 10 seconds.
                 As a result, the Width property is animated from 50
                 to 350 (50 + 300) over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="fromByAnimatedRectangle" Storyboard.TargetProperty="(Rectangle.Width)" 
                From="50" By="300" Duration="0:0:10"  />

              <!-- Demonstrates the From property used by itself.
                 Animates the rectangle's Width property from 50 to its base value (100)
                 over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="fromAnimatedRectangle" Storyboard.TargetProperty="(Rectangle.Width)"
                From="50" Duration="0:0:10"  />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>
  </StackPanel>
</Page>

Voir aussi

Concepts

Vue d'ensemble de l'animation

Vue d'ensemble des animations d'image clé

Autres ressources

Valeurs cibles d'animation From, To et By, exemple (page éventuellement en anglais)