Vue d’ensemble des animations From/To/By

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.

Pré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 qui AnimationTimeline crée une transition entre une valeur de départ et une valeur de fin. Le temps nécessaire à la transition est déterminé par l’animation Duration .

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

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

Types d’animation From/To/By

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

Les classes d’animation From/To/By appartiennent à l’espace System.Windows.Media.Animation de noms 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.

Valeurs cibles

Une animation From/To/By crée une transition entre deux valeurs cibles. Il est courant de spécifier une valeur de départ (définissez-la à l’aide de la From propriété) et d’une valeur de fin (définissez-la à l’aide de la To propriété). Toutefois, vous pouvez également spécifier uniquement une valeur de début, 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 de départ

  Utilisez la From propriété lorsque vous souhaitez spécifier explicitement la valeur de départ d’une animation. Vous pouvez utiliser la From propriété elle-même, ou avec la ou By la To propriété. Si vous spécifiez uniquement la From propriété, l’animation passe de cette valeur à la valeur de base de la propriété animée.

• Valeur de fin

  Pour spécifier une valeur de fin d’animation, utilisez sa To propriété. Si vous utilisez la To propriété elle-même, l’animation obtient sa valeur de départ à partir de la propriété animée ou de la sortie d’une autre animation appliquée à la même propriété. Vous pouvez utiliser la To propriété avec la From propriété pour spécifier explicitement les valeurs de début et de fin de l’animation.

• Valeur de décalage

  La By propriété vous permet de spécifier un décalage au lieu d’une valeur de début ou de fin explicite pour l’animation. La By propriété d’une animation spécifie la quantité d’animation qui modifie une valeur sur sa durée. Vous pouvez utiliser la By propriété par elle-même ou avec la From propriété. Si vous spécifiez uniquement la By propriété, 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 les propriétés et By les FromTopropriétés ensemble ou séparément.

Les exemples de cette section utilisent chacun un DoubleAnimationtype d’animation From/To/By pour animer la Width propriété d’un Rectangle appareil indépendant de 10 pixels haut et 100 pixels indépendants de l’appareil.

Bien que chaque exemple utilise des DoubleAnimationpropriétés From, To et By de toutes les animations From/To/By se comportent de la même façon. Bien que chacun de ces exemples utilise un Storyboard, vous pouvez utiliser des animations From/To/By d’autres façons. Pour plus d’informations, consultez la Vue d'ensemble des techniques d'animation de propriétés.

De/À

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

L’exemple suivant définit la From propriété de la DoubleAnimation valeur 50 et sa To propriété sur 300. Par conséquent, l’animation Width Rectangle est 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.

' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())

Dim myRectangle As New Rectangle()

' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.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.
Dim myDoubleAnimation As 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))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)

À

Lorsque vous définissez uniquement la To propriété, 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é précédemment appliquée à la même propriété, à la valeur spécifiée par la To propriété.

(« Animation de composition » fait référence à une Active ou Filling une animation qui s’applique précédemment à la même propriété qui est toujours en vigueur lorsque l’animation actuelle a été appliquée à l’aide du comportement de Compose transfert.)

L’exemple suivant définit uniquement la To propriété de la DoubleAnimation valeur 300. Comme aucune valeur de départ n’a été spécifiée, la DoubleAnimation valeur de base (100) de la Width propriété est utilisée comme valeur de départ. Celui-ci Width Rectangle est animé de 100 à la valeur cible de l’animation 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.

' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())

Dim myRectangle As New Rectangle()

' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.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.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.To = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))

Storyboard.SetTargetName(myDoubleAnimation, "toAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)

par

Lorsque vous définissez uniquement la By propriété d’une animation, l’animation passe de la valeur de base de la propriété en cours d’animation, ou de la sortie d’une animation de composition à la somme de cette valeur et de la valeur spécifiée par la By propriété.

L’exemple suivant définit uniquement la By propriété de la DoubleAnimation valeur 300. Étant donné que l’exemple ne spécifie pas de valeur de départ, la DoubleAnimation valeur de base de la Width propriété est 100, comme valeur de départ. La valeur de fin est déterminée en ajoutant la By valeur de l’animation, 300, à sa valeur de départ, 100 : 400. Par conséquent, l’animation Width Rectangle est 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.

' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())

Dim myRectangle As New Rectangle()

' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.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.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.By = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))

Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)

From/By

Lorsque vous définissez les propriétés et By les From propriétés d’une animation, l’animation passe de la valeur spécifiée par la From propriété, à la valeur spécifiée par la somme des From propriétés.By

L’exemple suivant définit la From propriété de la DoubleAnimation valeur 50 et sa By propriété sur 300. La valeur de fin est déterminée en ajoutant la By valeur de l’animation, 300, à sa valeur de départ, 50 : 350. Par conséquent, l’animation Width Rectangle est 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.

' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())

Dim myRectangle As New Rectangle()

' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.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.
Dim myDoubleAnimation As 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))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)

De

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

L’exemple suivant définit uniquement la From propriété de la DoubleAnimation valeur 50. Comme aucune valeur de fin n’a été spécifiée, elle DoubleAnimation utilise la valeur de base de la Width propriété, 100, comme valeur de fin. L’objet Width Rectangle est animé de 50 à la valeur de base de la Width propriété, 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.

' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())

Dim myRectangle As New Rectangle()

' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.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.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 50
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))

Storyboard.SetTargetName(myDoubleAnimation, "fromAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)

To/By

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

Autres types d’animations

Les animations From/To/By ne sont pas le seul type d’animations que WPF fournit : elles fournissent également des animations d’images clés et des animations de chemin d’accès.

• Une animation d’image clé est animée avec n’importe quel nombre de valeurs de destination et décrite à l’aide d’images clés. Pour plus d’informations, consultez la Vue d’ensemble des animations d’image clé.

• Une animation de chemin génère des valeurs de sortie à partir d’un PathGeometry. Pour plus d’informations, consultez la 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 la Vue d’ensemble des animations personnalisées.

Voir aussi

• Timeline
• Storyboard
• Vue d’ensemble de l’animation
• Vue d'ensemble des storyboards
• Vue d'ensemble des animations d'image clé
• Vue d'ensemble des animations de tracés
• Vue d'ensemble des animations personnalisées
• Exemple de valeurs cibles d’animation From, To et By