Freigeben über

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

Eine "From/To/By" oder "Einfache Animation" erstellt einen Übergang zwischen zwei Zielwerten (siehe Animationsübersicht für eine Einführung in verschiedene Animationstypen). Wenn Sie die Zielwerte einer einfachen Animation festlegen möchten, verwenden Sie deren FromEigenschaften und ToBy Eigenschaften. In der folgenden Tabelle wird zusammengefasst, wie die FromZielwerte Toeiner Animation zusammen oder By separat verwendet werden können.

Angegebene Eigenschaften Resultierendes Verhalten
From Die Animation wird vom von der From Eigenschaft angegebenen Wert zum Basiswert der animierten Eigenschaft oder zum Ausgabewert einer vorherigen Animation, je nachdem, wie die vorherige Animation konfiguriert ist, voranschreitet.
From und To Die Animation wird vom von der From Eigenschaft angegebenen Wert zum von der To Eigenschaft angegebenen Wert ausgeführt.
From und By Die Animation wird vom von der From Eigenschaft angegebenen Wert zum wert, der durch die Summe der From Eigenschaften und By Eigenschaften angegeben wird.
To Die Animation wird vom Basiswert der animierten Eigenschaft oder dem Ausgabewert einer vorherigen Animation zum durch die To Eigenschaft angegebenen Wert ausgeführt.
By Die Animation wird vom Basiswert der animierten Eigenschaft oder dem Ausgabewert einer vorherigen Animation zur Summe dieses Werts und des durch die By Eigenschaft angegebenen Werts ausgeführt.

Hinweis

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 unterKey-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 von Einstellungs- Tound ByFromEigenschaften 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

  • Last updated on