Freigeben über

Vorgehensweise: Steuern einer Animation mit "Von", "An" und "Nach"

  • Artikel

Eine "From/To/By" oder "Einfache Animation" erstellt einen Übergang zwischen zwei Zielwerten (siehe Animationsübersicht für eine Einführung in verschiedene Animationstypen). Um die Zielwerte einer einfachen Animation festzulegen, verwenden Sie dessen From, Tound By Eigenschaften. In der folgenden Tabelle wird zusammengefasst, wie die eigenschaften From, Tound By zusammen oder separat verwendet werden können, um die Zielwerte einer Animation zu ermitteln.

Angegebene Eigenschaften Resultierendes Verhalten
From Die Animation schreitet von dem von der From-Eigenschaft angegebenen Wert zum Basiswert der animierten Eigenschaft oder zum Ausgabewert einer vorangegangenen Animation voran, abhängig von der Konfiguration der vorherigen Animation.
From und To Die Animation geht vom Wert, der durch die From-Eigenschaft festgelegt ist, zum Wert, der durch die To-Eigenschaft festgelegt ist.
From und By Die Animation verläuft von dem Wert, der durch die From-Eigenschaft angegeben wird, zu dem Wert, der durch die Summe der Eigenschaften From und By angegeben wird.
To Die Animation verläuft vom Basiswert der animierten Eigenschaft oder dem Ausgabewert einer vorherigen Animation bis hin zu dem durch die To-Eigenschaft angegebenen Wert.
By Die Animation verläuft vom Basiswert der zu animierenden Eigenschaft oder dem Ausgabewert einer vorherigen Animation zur Summe aus diesem Wert und dem Wert, der durch die By-Eigenschaft angegeben wird.

Anmerkung

Legen Sie nicht sowohl die To-Eigenschaft als auch die By-Eigenschaft für dieselbe Animation fest.

Wenn Sie andere Interpolationsmethoden verwenden oder zwischen mehr als zwei Zielwerten animieren möchten, verwenden Sie eine Keyframeanimation. Weitere Informationen finden Sie unter Key-Frame Animationsübersicht.

Informationen zum Anwenden mehrerer Animationen auf eine einzelne Eigenschaft finden Sie unter Key-Frame Animationsübersicht.

Das folgende Beispiel zeigt die verschiedenen Effekte der Einstellungen der Eigenschaften To, Byund From bei 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