Übersicht über From/To/By-Animationen

  • Artikel

Dieses Thema beschreibt, wie Sie From/To/By-Animationen verwenden, um Abhängigkeitseigenschaften zu animieren. Eine From/To/By-Animation erstellt einen Übergang zwischen zwei Werten.

Voraussetzungen

Als Voraussetzung für dieses Thema sollten Sie mit WPF-Animationsfunktionen vertraut sein. Eine Einführung in Animationsfunktionen finden Sie unter Übersicht über Animationen.

Was ist eine From/To/By-Animation?

Eine From/To/By-Animation ist eine Art von AnimationTimeline die einen Übergang zwischen einem Startwert und einen Endwert erstellt. Die Zeit, die der Übergang dauert, wird durch die Duration der Animation bestimmt.

Sie können eine Von/Bis-Animation auf eine Eigenschaft anwenden, indem Sie ein Storyboard in Markup und Code verwenden, oder indem Sie die BeginAnimation-Methode im Code verwenden. Sie können mit einer From/To/By-Animation auch eine AnimationClock erstellen und sie auf eine oder mehrere Eigenschaften anwenden. Weitere Informationen zu den verschiedenen Methoden zum Anwenden von Animationen finden Sie unter Übersicht über die Verfahren zur Animation von Eigenschaften.

From/To/By-Animationen können nicht über mehr als zwei Zielwerte verfügen. Wenn Sie eine Animation benötigen, die über mehr als zwei Zielwerte verfügt, verwenden Sie eine Keyframe-Animation. Keyframe-Animationen werden unter Übersicht über Keyframe-Animationen beschrieben.

From/To/By-Animationstypen

Da Animationen Eigenschaftswerte generieren, gibt es für die einzelnen Eigenschaftentypen unterschiedliche Animationstypen. Um eine Eigenschaft zu animieren, die ein Double annimmt, wie z. B. die Width-Eigenschaft eines Elements, verwenden Sie eine Animation, die Double-Werte erzeugt. Um eine Eigenschaft zu animieren, die einen Point-Wert annimmt, verwenden Sie eine Animation, die Point-Werte erzeugt, und so weiter.

From/To/By-Animationsklassen gehören zum System.Windows.Media.Animation-Namespace und verwenden folgende Benennungskonvention:

<Type>Animation

Wobei <Typ> der Wertetyp ist, den die Klasse animiert.

WPF stellt die folgenden From/To/By-Animationsklassen zur Verfügung.

Eigenschaftstyp Entsprechende From/To/By-Animationsklassen
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

Zielwerte

Eine From/To/By-Animation erstellt einen Übergang zwischen zwei Zielwerten. Es ist üblich, einen Startwert (den Sie mit der From-Eigenschaft festlegen) und einen Endwert (den Sie mit der To-Eigenschaft festlegen) anzugeben. Sie können jedoch auch nur einen Startwert, einen Zielwert oder einen Offsetwert angeben. In diesen Fällen ruft die Animation den fehlenden Zielwert aus der Eigenschaft ab, die animiert wird. Die folgende Liste beschreibt die verschiedenen Methoden, um die Zielwerte einer Animation anzugeben.

  • Startwert

    Verwenden Sie diese From-Eigenschaft, wenn Sie den Startwert einer Animation explizit angeben möchten. Sie können die From-Eigenschaft selbst oder mit der To- oder By-Eigenschaft verwenden. Wenn Sie nur die From-Eigenschaft angeben, erfolgt durch die Animation ein Übergang von diesem Wert zu dem Basiswert der animierten Eigenschaft.

  • Endwert

    Um einen Endwert für eine Animation festzulegen, verwenden Sie deren To-Eigenschaft. Wenn Sie die To-Eigenschaft allein verwenden, ruft die Animation ihren Startwert aus der Eigenschaft ab, die animiert wird, oder aus der Ausgabe einer anderen Animation, die auf dieselbe Eigenschaft angewendet wird. Sie können die To-Eigenschaft zusammen mit der From-Eigenschaft verwenden, um explizit Start- und Endwerte für die Animation anzugeben.

  • Offsetwert

    Mit der By-Eigenschaft können Sie einen Offset anstatt expliziter Start- oder Endwerte für die Animation angeben. Die By-Eigenschaft einer Animation gibt an, um wie viel Wert während der Animation geändert wird. Sie können die By-Eigenschaft selbst oder mit der From-Eigenschaft verwenden. Wenn Sie nur die By-Eigenschaft angeben, fügt die Animation den Offsetwert zum Basiswert der Eigenschaft oder zur Ausgabe einer anderen Animation hinzu.

Verwenden von From/To/By-Werten

In den folgenden Abschnitten wird beschrieben, wie Sie die Eigenschaften und die From-, To-, By-Eigenschaften zusammen oder separat verwenden.

Die Beispiele in diesem Abschnitt verwenden jeweils eine DoubleAnimation, die eine Art von Von/Bis-Animation ist, um die Width-Eigenschaft von Rectangle zu animieren, die 10 geräteunabhängige Pixel hoch und 100 geräteunabhängige Pixel breit ist.

Obwohl jedes Beispiel eine DoubleAnimation verwendet wird, verhalten sich die From-, To- und By-Eigenschaften aller From/To/By-Animationen identisch. Obwohl jedes dieser Beispiele ein Storyboard verwendet, können Sie From/To/By-Animationen auch auf andere Weise verwenden. Weitere Informationen finden Sie unter Übersicht über die Verfahren zur Animation von Eigenschaften.

Von/An

Wenn Sie die From- und To-Werte zusammen festlegen, erfolgt der Fortschritt der Animation vom Wert, der von der From-Eigenschaft angegeben wird, zum Wert, der von der To-Eigenschaft angegeben wird.

Das folgende Beispiel setzt die From-Eigenschaft des DoubleAnimation auf 50 und seine To-Eigenschaft auf 300. Infolgedessen wird die Width von der Rectangle von 50 bis 300 animiert.

// 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)

Beschreibung

Wenn Sie nur die To-Eigenschaft festlegen, verläuft die Animation vom Basiswert der animierten Eigenschaft oder von der Ausgabe einer Composing-Animation, die zuvor auf dieselbe Eigenschaft angewendet wurde, zu dem von der To-Eigenschaft angegebenen Wert.

("Zusammengesetzte Animation" bezieht sich auf eine Active- oder eine Filling-Animation, die zuvor auf dieselbe Eigenschaft angewendet wurde, die immer noch in Kraft ist, wenn die aktuelle Animation mit Hilfe des Compose-Übergabeverhaltens angewendet wurde).

Im folgenden Beispiel wird die To-Eigenschaft der DoubleAnimation auf 300 festgelegt. Da kein Startwert angegeben wurde, verwendet DoubleAnimation den Basiswert (100) der Width-Eigenschaft als Startwert. Der Width von Rectangle wird von 100 auf den Zielwert der Animation von 300 animiert.

// 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)

nach

Wenn Sie nur die By-Eigenschaft einer Animation festlegen, schreitet die Animation vom Basiswert der Eigenschaft, die animiert wird, oder von der Ausgabe einer zusammengesetzten Animation bis zur Summe dieses Wertes und des Wertes, der durch die By-Eigenschaft festgelegt ist, fort.

Im folgenden Beispiel wird die By-Eigenschaft der DoubleAnimation auf 300 festgelegt. Da das Beispiel keinen Startwert angibt, verwendet DoubleAnimation den Basiswert der Width-Eigenschaft, 100, als Startwert. Der Endwert wird ermittelt, indem der By-Wert der Animation, 300, zu ihrem Startwert, 100, addiert wird: 400. Infolgedessen wird die Width von der Rectangle von 100 bis 400 animiert.

// 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

Wenn Sie die From- und By-Eigenschaften einer Animation festlegen, wird die Animation von dem Wert, der von der From-Eigenschaft angegeben wird, zum Wert, der durch die Summe der From- und By-Eigenschaften angegeben wird, vorangestellt.

Das folgende Beispiel setzt die From-Eigenschaft des DoubleAnimation auf 50 und seine By-Eigenschaft auf 300. Der Endwert wird ermittelt, indem der By-Wert der Animation, 300, zu ihrem Startwert, 50, addiert wird: 350. Infolgedessen wird die Width von der Rectangle von 50 bis 350 animiert.

// 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)

From

Wenn Sie nur den From-Wert einer Animation angeben, schreitet die Animation von dem Wert, der durch die From-Eigenschaft angegeben ist, zum Basiswert der Eigenschaft, die animiert wird, oder zur Ausgabe einer zusammengesetzten Animation fort.

Im folgenden Beispiel wird die From-Eigenschaft der DoubleAnimation auf 50 festgelegt. Da kein Endwert angegeben wurde, verwendet DoubleAnimation den Basiswert der Width-Eigenschaft, 100, als Endwert. Die Width von Rectangle wird von 50 auf den Basiswert der Width-Eigenschaft, 100, animiert.

// 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

Wenn Sie sowohl die To-Eigenschaften einer Animation als auch die By-Eigenschaften einer Animation festlegen, wird die By-Eigenschaft ignoriert.

Andere Animationstypen

From/To/By-Animationen sind nicht die einzige Art von Animationen, die WPF bietet: es werden auch Keyframe-Animationen und Path-Animationen zur Verfügung gestellt.

Mit WPF können Sie außerdem Ihre eigenen benutzerdefinierten Animationstypen erstellen. Weitere Informationen finden Sie unter Übersicht über benutzerdefinierte Animationen.

Weitere Informationen