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

  • Artikel

Eine „From/To/By“-Animation (auch als „einfache Animation“ bezeichnet) erstellt einen Übergang zwischen zwei Zielwerten (weitere Informationen zu verschiedenen Animationstypen finden Sie unter Übersicht über Animationen ). Mit den Eigenschaften From, To und By legen Sie die Zielwerte für eine einfache Animation fest. In der folgenden Tabelle ist zusammengefasst, wie die Eigenschaften From, To und By zusammen oder getrennt verwendet werden können, um die Zielwerte einer Animation zu bestimmen.

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 Animation verläuft von dem durch die From-Eigenschaft angegebenen Wert bis zum durch die To-Eigenschaft angegebenen Wert.
From und By Die Animation verläuft von dem durch die From-Eigenschaft angegebenen Wert bis zu dem Wert, der durch die Summe der Eigenschaften From und By angegeben wird.
To Die Ausführung der Animation erfolgt ab dem Basiswert der animierten Eigenschaft oder dem Ausgabewert einer vorherigen Animation bis zum 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 zum Wert, der durch die Summe dieses Werts und des von der By-Eigenschaft angegebenen Werts gebildet wird.

Hinweis

Legen Sie für dieselbe Animation nicht gleichzeitig die To-Eigenschaft und die By-Eigenschaft 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 unterschiedlichen Auswirkungen des Festlegens der Eigenschaften To, By und From für Animationen.

Beispiel

<!-- This example shows the different effects of setting
   To, By, and From properties on animations.  -->
<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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