Freigeben über

Gewusst wie: Festlegen der Dauer einer Animation

  • Artikel

Ein Timeline stellt ein Segment der Zeit dar und die Länge dieses Abschnitts wird durch die Duration der Zeitachse bestimmt. Wenn eine Timeline das Ende ihrer Dauer erreicht, wird die Wiedergabe beendet. Wenn die Timeline über untergeordnete Zeitachsen verfügt, wird deren Wiedergabe ebenfalls beendet. Bei einer Animation gibt die Duration an, wie lange die Animation für den Übergang vom Startwert zum Endwert benötigt.

Für eine Duration können Sie eine bestimmte, endliche Zeit oder die speziellen Werte Automatic oder Forever spezifizieren. Die Dauer einer Animation muss immer ein Zeitwert sein, da eine Animation immer eine definierte, endliche Länge haben muss – andernfalls wüsste die Animation nicht, wie sie den Übergang zwischen den Zielwerten herstellt. Container-Zeitleisten (TimelineGroup-Objekte), wie z. B. Storyboard und ParallelTimeline, haben eine Standarddauer von Automatic, d. h. sie enden automatisch, wenn ihr letztes untergeordnetes Element die Wiedergabe beendet.

Im folgenden Beispiel wird die Breite, Höhe und Füllfarbe eines Rectangle animiert. Auf Animationen und Containerzeitachsen werden Dauern festgelegt, die zu Animationseffekten führen, einschließlich des Steuerns der wahrgenommenen Geschwindigkeit einer Animation und überschreiben der Dauer von untergeordneten Zeitachsen mit der Dauer einer Containerzeitachse.

Beispiel

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <StackPanel Margin="20">
  
    <Rectangle Width="100" Height="100" Name="myRectangle">
      <Rectangle.Fill>
        <SolidColorBrush x:Name="MyAnimatedBrush" Color="Black" />
      </Rectangle.Fill>
      <Rectangle.Triggers>
      
        <!-- Animates the rectangle fill to yellow and width to 300. -->
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard>

            <!-- By default, TimelineGroup objects like Storyboard and ParallelTimeline have 
            a Duration of "Automatic". A TimelineGroup's automatic duration encompasses its 
            last-ending child. In this example, there is only one child of the Storyboard, the
            ParallelTimeline, so when the ParallelTimeline ends, the Storyboard duration will
            automatically end. -->
            <Storyboard>

              <!-- This ParallelTimeline has overriden its default duration of "Automatic" with
              a finite duration of half a second. This will force this Timeline to end after half a
              second even though its child Timelines have a longer duration (2 and 4 seconds respectively). 
              This cuts off the animation prematurely and the rectangle's fill will not go all the way to 
              yellow nor will the rectangle width get all the way to 300. Again, the default duration of a
              ParallelTimeline is "Automatic" so if you remove the finite duration, the ParallelTimeline
              will wait for its child timelines to end before it ends. -->

              <!-- Note: To specify a finite time in XAML, use the syntax of "days:hours:seconds". As mentioned,
              this ParallelTimeline has a duration of half a second. -->
              <ParallelTimeline Duration="0:0:0.5">

                <!-- For Animation Timelines like DoubleAnimation, the duration is one factor that
                determines the rate at which an animation appears to progress. For example, the DoubleAnimation
                below that animates the rectangle height will complete in only one second while the animation
                that animates the width willwill complete in 2 seconds which is relatively fast compared to the DoubleAnimation
                which animates the rectangle width over 4 seconds. -->
                <DoubleAnimation
                  Storyboard.TargetName="myRectangle"
                  Storyboard.TargetProperty="Height"
                  To="300" Duration="0:0:1" />

                <DoubleAnimation
                  Storyboard.TargetName="myRectangle"
                  Storyboard.TargetProperty="Width"
                  To="300" Duration="0:0:4" />

                <ColorAnimation
                  Storyboard.TargetName="MyAnimatedBrush"
                  Storyboard.TargetProperty="Color"
                  To="Yellow" Duration="0:0:2" />

              </ParallelTimeline>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
        
      </Rectangle.Triggers>
    </Rectangle>
  </StackPanel>
</Page>

Siehe auch