Vue d'ensemble des animations From/To/By

Article
08/22/2008

Mise à jour : novembre 2007

Cette rubrique explique comment utiliser des animations From/To/By pour animer des propriétés de dépendance. Une animation From/To/By crée une transition entre deux valeurs.

Cette rubrique contient les sections suivantes.

Composants requis

Pour comprendre cette rubrique, vous devez être familiarisé avec les fonctionnalités d'animations WPF. Pour une introduction aux fonctionnalités d'animation, consultez Vue d'ensemble de l'animation.

Qu'est-ce qu'une animation From/To/By ?

Une animation From/To/By est un type d'AnimationTimeline qui crée une transition entre une valeur initiale et une valeur finale. Le temps nécessaire pour que la transition se termine est déterminé par la Duration de cette animation.

Vous pouvez appliquer une animation From/To/By à une propriété en utilisant un Storyboard dans le balisage et le code, ou en utilisant la méthode BeginAnimation dans le code. Vous pouvez également utiliser une animation From/To/By pour créer un AnimationClock et l'appliquer à une ou plusieurs propriétés. Pour plus d'informations sur les différentes méthodes pour appliquer des animations, consultez Vue d'ensemble des techniques d'animation de propriétés.

Les animations From/To/By ne peuvent pas compter plus de deux valeurs cibles. Si vous avez besoin d'une animation comptant plus de deux valeurs cibles, utilisez une animation d'image clé. Les animations d'image clé sont décrites dans Vue d'ensemble des animations d'image clé.

Types d'animations From/To/By

Étant donné que les animations génèrent des valeurs de propriété, il existe différents types d'animations pour les différents types de propriété. Pour animer une propriété qui accepte un Double, telle que la propriété Width d'un élément, utilisez une animation qui produit des valeurs Double. Pour animer une propriété qui accepte un Point, utilisez une animation qui produit des valeurs Point, etc.

Les classes d'animation From/To/By appartiennent à l'espace de noms System.Windows.Media.Animation et utilisent la convention d'affectation de noms suivante :

*<Type>*Animation

Où <Type> est le type de valeur que la classe anime.

WPF fournit les classes d'animation From/To/By suivantes.

Type de propriété	Classe d'animation From/To/By correspondante
Byte	ByteAnimation
Color	ColorAnimation
Decimal	DecimalAnimation
Double	DoubleAnimation
Int16	Int16Animation
Int32	Int32Animation
Int64	Int64Animation
Point	PointAnimation
Quaternion	QuaternionAnimation
Rect	RectAnimation
Rotation3D	Rotation3DAnimation
Single	SingleAnimation
Size	SizeAnimation
Thickness	ThicknessAnimation
Vector3D	Vector3DAnimation
Vector	VectorAnimation

Valeurs cibles

Une animation From/To/By crée une transition entre deux valeurs cibles. Il est courant de spécifier une valeur initiale (définissez-la en utilisant la propriété From) et une valeur finale (définissez-la en utilisant la propriété To). Toutefois, vous pouvez également spécifier uniquement une valeur initiale, une valeur de destination ou une valeur de décalage. Dans ces cas, l'animation obtient la valeur cible manquante de la propriété qui est animée. La liste suivante décrit les différentes manières de spécifier les valeurs cibles d'une animation.

Valeur initiale

Utilisez la propriété From lorsque vous souhaitez spécifier explicitement la valeur initiale d'une animation. Vous pouvez utiliser la propriété From seule, ou avec la propriété To ou By. Si vous spécifiez uniquement la propriété From, l'animation effectue la transition de cette valeur à la valeur de base de la propriété animée.
Valeur finale

Pour spécifier la valeur finale d'une animation, utilisez sa propriété To. Si vous utilisez la propriété To seule, l'animation obtient sa valeur initiale à partir de la propriété qui est animée ou à partir de la sortie d'une autre animation appliquée à la même propriété. Vous pouvez utiliser la propriété To avec la propriété From afin de spécifier explicitement des valeurs initiales et finales pour l'animation.
Valeur de décalage

La propriété By vous permet de spécifier un offset au lieu d'une valeur initiale ou finale explicite pour l'animation. La propriété By d'une animation spécifie de combien l'animation modifie une valeur sur sa durée. Vous pouvez utiliser la propriété By seule ou avec la propriété From. Si vous spécifiez uniquement la propriété By, l'animation ajoute la valeur de décalage à la valeur de base de la propriété ou à la sortie d'une autre animation.

Utilisation des valeurs From/To/By

Les sections suivantes décrivent comment utiliser ensemble ou séparément les propriétés From, To et By.

Les exemples de cette section utilisent chacun un DoubleAnimation qui est un type d'animation From/To/By, pour animer la propriété Width d'un Rectangle qui fait 10 pixels indépendants du périphérique de haut et 100 pixels indépendants du périphérique de large.

Bien que chaque exemple utilise un DoubleAnimation, les propriétés De, À et Par de toutes les animations From/To/By se comportent de la même manière. Bien que chacun de ces exemples utilise un Storyboard, vous pouvez utiliser les animations From/To/By de manière différente. Pour plus d'informations, consultez Vue d'ensemble des techniques d'animation de propriétés.

De/À

Lorsque vous définissez ensemble les valeurs From et To, l'animation passe de la valeur qui est spécifiée par la propriété From à la valeur qui est spécifiée par la propriété To.

L'exemple suivant affecte à la propriété From du DoubleAnimation la valeur 50 et à sa propriété To la valeur 300. Par conséquent, la Width du Rectangle est animée de 50 à 300.

// Demonstrates the From and To properties used together.

// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "fromToAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Black;

// Demonstrates the From and To properties used together.
// Animates the rectangle's Width property from 50 to 300 over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.To = 300;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "fromToAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);

    };

<!-- Demonstrates the From and To properties used together. -->
<Rectangle Name="fromToAnimatedRectangle"
   Height="10" Width="100" HorizontalAlignment="Left"
   Fill="Black">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
      <BeginStoryboard>
        <Storyboard>
        <!-- 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="Width"
          From="50" To="300" Duration="0:0:10" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

À

Lorsque vous définissez uniquement la propriété To, l'animation passe de la valeur de base de la propriété animée, ou de la sortie d'une animation de composition qui a été appliquée précédemment à la même propriété, à la valeur qui est spécifiée par la propriété To.

(Le terme « animation de composition » fait référence à une animation Active ou Filling qui s'appliquait précédemment à la même propriété, qui est encore appliquée, lors de l'application de l'animation actuelle à l'aide du comportement de transfert de travail Compose.)

L'exemple suivant affecte uniquement à la propriété To du DoubleAnimation la valeur 300. Comme aucune valeur initiale n'a été spécifiée, le DoubleAnimation utilise la valeur de base (100) de la propriété Width comme valeur initiale. La Width du Rectangle est animée de 100 à la valeur cible de l'animation qui est de 300.

// Demonstrates the use of the To property.

// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "toAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Gray;

// Demonstrates the To property used by itself. Animates
// the Rectangle's Width property from its base value
// (100) to 300 over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.To = 300;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "toAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);

    };

<!-- Demonstrates the use of the To property. -->
<Rectangle Name="toAnimatedRectangle"
   Height="10" Width="100" HorizontalAlignment="Left"
   Fill="Gray">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
      <BeginStoryboard>
        <Storyboard>

          <!-- 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="Width"
            To="300" Duration="0:0:10" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Par

Lorsque vous définissez uniquement la propriété Byd'une animation, celle-ci passe de la valeur de base de la propriété animée, ou de la sortie d'une animation de composition, à la somme de cette valeur et de la valeur qui est spécifiée par la propriété By.

L'exemple suivant affecte uniquement à la propriété By du DoubleAnimation la valeur 300. Comme l'exemple ne spécifie aucune valeur initiale, le DoubleAnimation utilise la valeur de base de la propriété Width, 100, comme valeur initiale. La valeur finale est déterminée en ajoutant la valeur By de l'animation, 300, à sa valeur initiale, 100 : 400. Par conséquent, la Width du Rectangle est animée de 100 à 400.

// Demonstrates the use of the By property.

// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "byAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.RoyalBlue;

// 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 myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.By = 300;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);

    };

<!-- Demonstrates the use of the By property. -->
<Rectangle Name="byAnimatedRectangle" 
   Height="10" Width="100" HorizontalAlignment="Left"
   Fill="RoyalBlue">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
      <BeginStoryboard>
        <Storyboard>

          <!-- 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="Width" 
            By="300" Duration="0:0:10" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

De/Par

Lorsque vous définissez les propriétés From et By d'une animation, celle-ci passe de la valeur qui est spécifiée par la propriété From à la valeur qui est spécifiée par la somme des propriétés From et By.

L'exemple suivant affecte à la propriété From du DoubleAnimation la valeur 50 et à sa propriété By la valeur 300. La valeur finale est déterminée en ajoutant la valeur By de l'animation, 300, à sa valeur initiale, 50 : 350. Par conséquent, la Width du Rectangle est animée de 50 à 350.

// Demonstrates the use of the From and By properties.

// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "byAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.BlueViolet;

// 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 myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.By = 300;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);
    };

<!-- Demonstrates the use of the From and By properties. -->
<Rectangle Name="fromByAnimatedRectangle" Grid.Row="6" Grid.Column="2"
   Height="10" Width="100" HorizontalAlignment="Left"
   Fill="BlueViolet">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
      <BeginStoryboard>
        <Storyboard>

          <!-- Demonstrates the From and By properties used by 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="Width" 
            From="50" By="300" Duration="0:0:10"  />

        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

De

Lorsque vous spécifiez uniquement la valeur From d'une animation, celle-ci passe de la valeur qui est spécifiée par la propriété From à la valeur de base de la propriété qui est animée ou à la sortie d'une animation de composition.

L'exemple suivant affecte uniquement à la propriété From du DoubleAnimation la valeur 50. Comme aucune valeur finale n'a été spécifiée, le DoubleAnimation utilise la valeur de base de la propriété Width, 100, comme valeur finale. La Width du Rectangle est animée de 50 à la valeur de base de la propriété Width, 100.

// Demonstrates the use of the From property.

// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "fromAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Purple;

// Demonstrates the From property used by itself. Animates the
// rectangle's Width property from 50 to its base value (100)
// over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "fromAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);
    };

<!-- Demonstrates the use of the From property. -->
<Rectangle Name="fromAnimatedRectangle" Grid.Row="8" Grid.Column="2"
   Height="10" Width="100" HorizontalAlignment="Left" 
   Fill="Purple">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
      <BeginStoryboard>
        <Storyboard>
          <!-- 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="Width"
            From="50" Duration="0:0:10"  />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

À/Par

Si vous définissez les propriétés To et By d'une animation, la propriété By est ignorée.

Autres types d'animations

Les animations From/To/By ne sont pas le seul type d'animation fourni par WPF : il offre également des animations d'image clé et des animations de tracés.

Une animation d'image clé est animée avec n'importe quel nombre de valeurs de destination, décrites à l'aide d'images clés. Pour plus d'informations, consultez Vue d'ensemble des animations d'image clé.
Une animation de tracé génère des valeurs de sortie d'un PathGeometry. Pour plus d'informations, consultez Vue d'ensemble des animations de tracés.

WPF vous permet également de créer vos propres types d'animations personnalisés. Pour plus d'informations, consultez Vue d'ensemble des animations personnalisées.

Voir aussi