Gewusst wie: Steuern von Animationen mit From, To und By

  • Artikel

Aktualisiert: November 2007

Eine "From/To/By"-Animation (auch "grundlegende Animation") erstellt einen Übergang zwischen zwei Zielwerten (eine Einführung in die verschiedenen Animationstypen finden Sie unter Übersicht über Animationen). Verwenden Sie zum Festlegen der Zielwerte einer grundlegenden Animation die zugehörigen Eigenschaften From, To und By. In der folgenden Tabelle wird zusammengefasst, wie die Eigenschaften From, To und By gemeinsam oder einzeln verwendet werden können, um die Zielwerte einer Animation festzulegen.

Angegebene Eigenschaften

Resultierendes Verhalten

From

Die Ausführung der Animation erfolgt ab dem von der From-Eigenschaft angegebenen Wert bis zum Basiswert der animierten Eigenschaft oder zum Ausgabewert einer vorherigen Animation, je nach Konfiguration der vorherigen Animation.

From und To

Die Ausführung der Animation erfolgt ab dem von der From-Eigenschaft angegebenen Wert bis zu dem von der To-Eigenschaft angegebenen Wert.

From und By

Die Ausführung der Animation erfolgt ab dem von der From-Eigenschaft angegebenen Wert bis zu dem Wert, der durch die Summe der From-Eigenschaft und der By-Eigenschaft angegeben wird.

To

Die Ausführung der Animation erfolgt ab dem Basiswert der animierten Eigenschaft oder dem Ausgabewert einer vorherigen Animation bis zu dem von der To-Eigenschaft angegebenen Wert.

By

Die Ausführung der Animation erfolgt ab dem Basiswert der animierten Eigenschaft oder dem Ausgabewert einer vorherigen Animation bis zu dem Wert, der durch die Summe dieses Werts und des von der By-Eigenschaft angegebenen Werts gebildet wird.

Tipp

Legen Sie die To-Eigenschaft und die By-Eigenschaft nicht in derselben Animation fest.

Um andere Interpolationsmethoden zu verwenden oder eine Animation zwischen mehr als zwei Zielwerten auszuführen, verwenden Sie eine Keyframe-Animation. Weitere Informationen finden Sie unter Übersicht über Keyframe-Animationen.

Informationen zum Anwenden mehrerer Animationen auf eine einzelne Eigenschaft finden Sie unter Übersicht über Keyframe-Animationen.

Das folgende Beispiel zeigt die verschiedenen Effekte, die Sie erzielen, wenn Sie die Eigenschaften To, By und From für Animationen festlegen.

Beispiel

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

Siehe auch

Aufgaben

Beispiel für From, To, and By-Animationszielwerte

Konzepte

Übersicht über Animationen

Übersicht über Keyframe-Animationen