Übersicht über From/To/By-Animationen

Artikel
08/20/2008

Aktualisiert: November 2007

In diesem Thema wird beschrieben, wie From/To/By-Animationen verwendet werden, um Abhängigkeitseigenschaften zu animieren. Eine From/To/By-Animation erstellt einen Übergang zwischen zwei Werten.

Dieses Thema enthält folgende Abschnitte.

Vorbereitungsmaßnahmen

Für dieses Thema sollten Sie mit grundlegenden WPF-Animationsfeatures vertraut sein. Eine Einführung in Animationsfeatures finden Sie unter der Übersicht über Animationen.

Was ist eine From/To/By-Animation?

Eine From/To/By-Animation ist ein Typ von AnimationTimeline, der einen Übergang zwischen einem Startwert und einem Endwert erstellt. Die Zeitdauer, nach der der Übergang abgeschlossen ist, wird von Duration der Animation bestimmt.

Sie können eine From/To/By-Animation in Markup und Code mithilfe eines Storyboard oder in Code mit der BeginAnimation-Methode auf eine Eigenschaft anwenden. 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 Anwendungsmethoden für Animationen finden Sie unter Übersicht über die Verfahren zur Animation von Eigenschaften.

From/To/By-Animationen können über höchstens zwei Zielwerte verfügen. Wenn Sie eine Animation mit mehr als zwei Zielwerten benötigen, müssen Sie eine Keyframe-Animation verwenden. Keyframe-Animationen werden unter Übersicht über Keyframe-Animationen beschrieben.

From/To/By-Animationstypen

Da Animationen Eigenschaftenwerte generieren, gibt es für die einzelnen Eigenschaftentypen unterschiedliche Animationstypen. Zum Animieren einer Eigenschaft, die einen Double-Wert entgegennimmt (wie zum Beispiel die Width-Eigenschaft eines Elements), verwenden Sie eine Animation, die Double-Werte erzeugt. Zum Animieren einer Eigenschaft, die einen Point-Wert entgegennimmt, verwenden Sie eine Animation, die Point-Werte erzeugt, usw.

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

*<Typ>*Animation

Wobei <Typ> für den Typ von Wert steht, den die Klasse animiert.

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

Eigenschaftentyp	Zugehörige From/To/By-Animationsklasse
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. Üblicherweise wird ein Startwert (in der From-Eigenschaft) und ein Endwert (in der To-Eigenschaft) angegeben. Sie können aber 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 Möglichkeiten, die Zielwerte einer Animation anzugeben.

Startwert

Verwenden Sie die From-Eigenschaft, wenn Sie den Startwert einer Animation explizit angeben möchten. Sie können die From-Eigenschaft allein oder zusammen mit der To-Eigenschaft oder der 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

Verwenden Sie die To-Eigenschaft einer Animation, um einen Endwert anzugeben. 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 Start- und Endwerte für die Animation explizit 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 ein Wert während einer Animation geändert wird. Sie können die By-Eigenschaft allein oder zusammen mit der From-Eigenschaft verwenden. Wenn Sie nur die By-Eigenschaft angeben, addiert die Animation den Offsetwert zum Basiswert der Eigenschaft oder zur Ausgabe einer anderen Animation.

Verwenden von From/To/By-Werten

In den folgenden Abschnitten wird beschrieben, wie die Eigenschaften From, To und By einzeln oder zusammen verwendet werden.

In jedem Beispiel in diesem Abschnitt wird der From/To/By-Animationstyp DoubleAnimation verwendet, um die Width-Eigenschaft eines Rectangle-Objekts zu animieren, das 10 geräteunabhängige Pixel hoch und 100 geräteunabhängige Pixel breit ist.

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

From/To

Wenn Sie die Werte From und To zusammen festlegen, verläuft die Animation von dem in der From-Eigenschaft festgelegten Wert zu dem in der To-Eigenschaft festgelegten Wert.

Im folgenden Beispiel wird für die From-Eigenschaft der DoubleAnimation der Wert 50 festgelegt, und für ihre To-Eigenschaft der Wert 300. Als Ergebnis wird die Width-Eigenschaft des Rectangle von 50 zu 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. -->
<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>

To

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

("Composing-Animation" bezieht sich auf eine zuvor auf dieselbe Eigenschaft angewendete Active- oder Filling-Animation, die noch wirksam ist, wenn die aktuelle Animation mittels des Compose-Übergabeverhaltens angewendet wird.)

Im folgenden Beispiel wird nur für die To-Eigenschaft von DoubleAnimation der Wert 300 festgelegt. Da kein Startwert angegeben wurde, verwendet DoubleAnimation den Basiswert (100) der Width-Eigenschaft als Startwert. Die Width-Eigenschaft von Rectangle wird von 100 zum Zielwert 300 der Animation 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. -->
<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>

Von

Wenn Sie nur die By-Eigenschaft einer Animation festlegen, verläuft die Animation vom Basiswert der Eigenschaft, die animiert wird, bzw. von der Ausgabe einer Composing-Animation, zu der Summe aus diesem Wert und dem durch die By-Eigenschaft angegebenen Wert.

Im folgenden Beispiel wird nur für die By-Eigenschaft von DoubleAnimation der Wert 300 festgelegt. Da in dem Beispiel kein Startwert angegeben wird, verwendet DoubleAnimation den Basiswert der Width-Eigenschaft (100) als ihren Startwert. Der Endwert wird ermittelt, indem der By-Wert der Animation (300) zu ihrem Startwert (100) addiert wird: 400. Demzufolge wird Width von Rectangle von 100 zu 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. -->
<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>

From/By

Wenn Sie die Eigenschaften From und By einer Animation festlegen, verläuft die Animation von dem durch die From-Eigenschaft angegebenen Wert bis zu dem von der Summe der Eigenschaften From und By angegebenen Wert.

Im folgenden Beispiel wird für die From-Eigenschaft von DoubleAnimation der Wert 50 und für ihre By-Eigenschaft der Wert 300 festgelegt. Der Endwert wird bestimmt, indem der By-Wert der Animation (300) zu ihrem Startwert (50) addiert wird: 350. Demzufolge wird Width von Rectangle von 50 zu 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. -->
<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>

Von

Wenn Sie nur den From-Wert einer Animation festlegen, verläuft die Animation von dem von der From-Eigenschaft angegebenen Wert bis zu dem Basiswert der Eigenschaft, die animiert wird, bzw. zu der Ausgabe einer Composing-Animation.

Im folgenden Beispiel wird nur für die From-Eigenschaft von DoubleAnimation der Wert 50 festgelegt. Da kein Endwert angegeben wurde, verwendet DoubleAnimation den Basiswert der Width-Eigenschaft (100) als Endwert. Die Width-Eigenschaft von Rectangle wird von 50 bis zu dem 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. -->
<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>

To/By

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

Andere Animationstypen

Außer From/To/By-Animationen stellt WPF noch weitere Animationstypen zur Verfügung: Keyframe-Animationen und Path-Animationen.

Eine Keyframe-Animation animiert entlang einer beliebigen Anzahl von Zielwerten, die mithilfe von Keyframes beschrieben werden. Weitere Informationen finden Sie unter Übersicht über Keyframe-Animationen.
Eine Path-Animation generiert Ausgabewerte von einem PathGeometry. Weitere Informationen finden Sie unter Übersicht über Pfadanimationen.

Mit WPF können Sie auch eigene benutzerdefinierte Animationstypen erstellen. Weitere Informationen finden Sie unter Übersicht über benutzerdefinierte Animationen.

Siehe auch