Übersicht über Zeitsteuerungsverhalten

In diesem Thema wird das Zeitsteuerungsverhalten von Animationen und anderen Timeline-Objekten beschrieben.

Erforderliche Komponenten

Für dieses Thema sollten Sie mit grundlegenden Animationsfeatures vertraut sein. Weitere Informationen finden Sie unter Übersicht über Animationen.

Zeitachsentypen

Eine Timeline stellt einen Zeitabschnitt dar. Sie stellt Eigenschaften bereit, mit denen Sie für das jeweilige Zeitsegment die Länge, den Zeitpunkt des Starts, die Anzahl der Wiederholungen, wie schnell die Zeit durchlaufen wird und vieles mehr festlegen können.

Klassen, die von der Zeitachsenklasse erben, stellen zusätzliche Funktionen bereit, z. B. Animation und Medienwiedergabe. WPF stellt die folgenden Timeline-Typen zur Verfügung.

Eigenschaften, die die Länge einer Zeitachse steuern

Eine Timeline stellt einen Zeitabschnitt dar. Die Länge einer Zeitachse kann auf verschiedene Arten beschrieben werden. In der folgenden Tabelle werden mehrere Begriffe für die Beschreibung der Länge einer Zeitachse definiert.

Duration-Eigenschaft

Wie bereits erwähnt stellt eine Zeitachse einen Zeitabschnitt dar. Die Länge dieses Abschnitts wird von der Duration der Zeitachse bestimmt. Wenn eine Zeitachse das Ende ihrer Dauer erreicht, wird ihre Wiedergabe beendet. Wenn die Zeitachse über untergeordnete Zeitachsen verfügt, wird deren Wiedergabe ebenfalls beendet. Bei einer Animation gibt die Duration an, wie viel Zeit die Animation für den Übergang vom Startwert zum Endwert benötigt. Die Dauer einer Zeitachse wird manchmal auch als deren einfache Dauer bezeichnet, um zwischen der Dauer einer einzelnen Iteration und der gesamten Wiedergabedauer der Animation einschließlich Wiederholungen zu unterscheiden. Sie können eine Dauer mit einem endlichen Zeitwert oder den speziellen Werten Automatic oder Forever angeben. Die Dauer einer Animation sollte in einen TimeSpan-Wert aufgelöst werden, damit sie einen Übergang zwischen den Werten ausführen kann.

Im folgenden Beispiel wird eine DoubleAnimation mit einer Duration von fünf Sekunden veranschaulicht.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5"  />

Containerzeitachsen wie Storyboard und ParallelTimeline verfügen standardmäßig über die Dauer Automatic. Das heißt, sie enden automatisch, sobald die Wiedergabe ihres letzten untergeordneten Elements beendet ist. Im folgenden Beispiel wird ein Storyboard veranschaulicht, dessen Duration in fünf Sekunden aufgelöst wird. Diese Zeit wird benötigt, bis alle untergeordneten DoubleAnimation-Objekte abgeschlossen sind.

<Storyboard >

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5"  />

  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  />

</Storyboard>

Indem Sie für die Duration einer Containerzeitachse einen TimeSpan-Wert festlegen, können Sie erzwingen, dass die Abspielzeit der Containerzeitachse länger oder kürzer ist, als die ihrer untergeordneten Timeline-Objekte. Wenn Sie für die Duration einen Wert festlegen, der kleiner ist als die Länge der untergeordneten Timeline-Objekte der Containerzeitachse, wird die Wiedergabe der untergeordneten Timeline-Objekte zum selben Zeitpunkt beendet wie die Wiedergabe der Containerzeitachse. Im folgenden Beispiel wird die Duration für das Storyboard aus den vorangehenden Beispielen auf drei Sekunden festgelegt. Dadurch wird die erste DoubleAnimation nach drei Sekunden angehalten, sobald sie die Breite des Zielrechtecks auf 60 animiert hat.

<Storyboard Duration="0:0:3">

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5"  />

  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  />

</Storyboard>

RepeatBehavior-Eigenschaft

Die RepeatBehavior-Eigenschaft einer Timeline legt fest, wie oft diese ihre einfache Dauer wiederholt. Mithilfe der RepeatBehavior-Eigenschaft können Sie festlegen, wie oft (Iteration-Count) oder wie lange (Wiederholungs-Duration eine Zeitachse insgesamt wiedergegeben wird. In beiden Fällen wird die Animation so oft von Anfang bis Ende wiederholt, bis die Vorgaben für die Anzahl bzw. die Zeit der Wiederholungsläufe erfüllt sind. Die Standardeinstellung der Iterationen von Zeitachsen ist 1.0, d. h. sie wird einmal abgespielt und nicht wiederholt.

Im nächsten Beispiel wird mithilfe der RepeatBehavior-Eigenschaft ein Iterationszähler festgelegt, damit die DoubleAnimation doppelt so lang wie ihre einfache Dauer wiedergegeben wird.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2x" />

Im nächsten Beispiel wird die RepeatBehavior-Eigenschaft verwendet, damit die DoubleAnimation nur zur Hälfte ihrer einfachen Dauer wiedergegeben wird.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="0.5x" />

Wenn Sie die RepeatBehavior-Eigenschaft einer Timeline auf Forever festlegen, wird die Timeline unbegrenzt wiederholt, bis ihre Wiedergabe interaktiv oder durch das Zeitsteuerungssystem beendet wird. Im folgenden Beispiel wird die RepeatBehavior-Eigenschaft verwendet, damit die DoubleAnimation unbegrenzt wiederholt wird.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="Forever" />

Ein zusätzliches Beispiel finden Sie unter Gewusst wie: Wiederholen einer Animation.

AutoReverse-Eigenschaft

Die AutoReverse-Eigenschaft gibt an, ob eine Timeline am Ende jeder Vorwärtsiteration rückwärts wiedergegeben wird. Im folgenden Beispiel wird für die AutoReverse-Eigenschaft einer DoubleAnimation der Wert true festgelegt. Dadurch wird sie von 0 zu 100 und anschließend von 100 zu 0 animiert. Sie wird insgesamt 10 Sekunden lang abgespielt.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  AutoReverse="True" />

Wenn Sie einen Count-Wert verwenden, um das RepeatBehavior einer Timeline festzulegen und für die AutoReverse-Eigenschaft dieser Timeline der Wert true festgelegt ist, besteht eine einzelne Wiederholung aus einer Vorwärtsiteration gefolgt von einer Rückwärtsiteration. Im folgenden Beispiel wird für das RepeatBehavior der DoubleAnimation aus dem vorangehenden Beispiel eine Count von zwei festgelegt. Dadurch wird die DoubleAnimation 20 Sekunden lang abgespielt: fünf Sekunden vorwärts, fünf Sekunden rückwärts, erneut fünf Sekunden vorwärts und schließlich erneut fünf Sekunden rückwärts.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2" 
  AutoReverse="True" />

Wenn eine Containerzeitachse über untergeordnete Timeline-Objekte verfügt, ändert sich deren Wiedergaberichtung parallel zur Wiedergaberichtung der Containerzeitachse. Weitere Beispiele finden Sie unter Gewusst wie: Angeben, ob die Wiedergaberichtung einer Zeitachse automatisch umgekehrt wird.

BeginTime-Eigenschaft

Mit der BeginTime-Eigenschaft können Sie angeben, wann eine Zeitachse beginnt. Die Anfangszeit einer Zeitachse ist zu ihrer übergeordneten Zeitachse relativ. Eine Anfangszeit von 0 (null) Sekunden bedeutet, dass die Zeitachse zeitgleich mit ihrer übergeordneten Zeitachse beginnt. Jeder andere Wert bewirkt eine Verschiebung zwischen den Zeitpunkten, zu denen die Wiedergabe der übergeordneten und die der untergeordneten Zeitachse beginnt. Bei einer Anfangszeit von zwei Sekunden beginnt die Wiedergabe der Zeitachse, sobald ihre übergeordnete Zeitachse die Dauer von zwei Sekunden überschritten hat. Standardmäßig haben alle Zeitachsen eine Anfangszeit von 0 (null) Sekunden. Sie können als Anfangszeit einer Zeitachse auch null festlegen. Dadurch wird verhindert, dass die Zeitachse beginnt. In WPF wird NULL mithilfe der x:Null-Markuperweiterung angegeben.

Beachten Sie, dass die Anfangszeit nicht jedes Mal erneut angewendet wird, wenn eine Zeitachse aufgrund ihrer RepeatBehavior-Einstellung wiederholt wird. Wenn Sie eine Animation mit einer BeginTime von zehn Sekunden erstellen und für das RepeatBehavior den Wert Forever festlegen, gibt es vor der ersten Wiedergabe der Animation eine Verzögerung von zehn Sekunden, bei den darauf folgenden Wiederholungen jedoch nicht. Wenn die übergeordnete Zeitachse der Animation jedoch neu gestartet oder wiederholt wird, tritt diese zehn Sekunden lange Verzögerung auf.

Die BeginTime-Eigenschaft eignet sich für die Staffelung von Zeitachsen. Im folgenden Beispiel wird ein Storyboard erstellt, das über zwei untergeordnete DoubleAnimation-Objekte verfügt. Die erste Animation verfügt über eine Duration von fünf Sekunden, die zweite über eine Duration von drei Sekunden. Im Beispiel wird die BeginTime der zweiten DoubleAnimation auf fünf Sekunden festgelegt, sodass die Wiedergabe beginnt, sobald die erste DoubleAnimation beendet ist.

<Storyboard>

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5" 
    BeginTime="0:0:0" />


  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  
    BeginTime="0:0:5" />

</Storyboard>

FillBehavior-Eigenschaft

Wenn eine Timeline das Ende ihrer gesamten Aktivitätsdauer erreicht, bestimmt die FillBehavior-Eigenschaft, ob sie beendet wird oder ihren letzten Wert beibehält. Eine Animation mit einem FillBehavior von HoldEnd "behält" ihren Ausgabewert: Die animierte Eigenschaft behält den letzten Wert der Animation bei. Ein Wert von Stop bewirkt, dass das Beenden der Animation keine Auswirkungen auf ihre Zieleigenschaft hat.

Im folgenden Beispiel wird ein Storyboard erstellt, das über zwei untergeordnete DoubleAnimation-Objekte verfügt. Beide DoubleAnimation-Objekte animieren die Width-Eigenschaft für ein Rectangle-Element von 0 zu 100. Die Rectangle-Elemente verfügen über nicht animierte Width-Werte von 500 geräteunabhängigen Pixeln.

• Die FillBehavior-Eigenschaft der ersten DoubleAnimation wird auf den Standardwert HoldEnd festgelegt. Dadurch bleibt der Wert für die Breite des Rechtecks bei 100, sobald die DoubleAnimation beendet wird.

• Die FillBehavior-Eigenschaft der zweiten DoubleAnimation wird auf Stop festgelegt. Dadurch wird die Width für das zweite Rectangle auf den Wert 500 zurückgesetzt, sobald die DoubleAnimation beendet wird.

<Rectangle Name="MyRectangle" 
 Width="500" Height="100"
 Opacity="1" Fill="Red">
</Rectangle>

<Rectangle Name="MyOtherRectangle" 
 Width="500" Height="100"
 Opacity="1" Fill="Orange">
</Rectangle>

<Button Content="Start FillBehavior Example">
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation 
            Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
            From="0" To="100" Duration="0:0:5" 
            FillBehavior="HoldEnd" />
          <DoubleAnimation 
            Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
            From="0" To="100" Duration="0:0:5"  
            FillBehavior="Stop" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

Eigenschaften, die die Geschwindigkeit einer Zeitachse steuern

Die Timeline-Klasse stellt drei Eigenschaften zum Festlegen ihrer Geschwindigkeit zur Verfügung:

• SpeedRatio: Gibt die Geschwindigkeit an, mit der die Zeit für eine Timeline relativ zu ihrem übergeordneten Element fortschreitet. Werte, die größer sind als eins, erhöhen die Geschwindigkeit der Timeline und ihrer untergeordneten Timeline-Objekte. Werte zwischen 0 (null) und 1 verringern die Geschwindigkeit. Der Wert 1 gibt an, dass die Timeline mit derselben Geschwindigkeit fortschreitet wie ihr übergeordnetes Element. Die SpeedRatio-Einstellung einer Containerzeitachse beeinflusst auch alle ihre untergeordneten Timeline-Objekte.

• AccelerationRatio: Gibt den Prozentwert der Duration einer Zeitachse an, der für das Beschleunigen verwendet wird. Ein Beispiel finden Sie unter Gewusst wie: Beschleunigen oder Verlangsamen einer Animation.

• DecelerationRatio: Gibt den Prozentwert der Duration einer Zeitachse an, der für das Verlangsamen verwendet wird. Ein Beispiel finden Sie unter Gewusst wie: Beschleunigen oder Verlangsamen einer Animation.

Siehe auch

Konzepte

Übersicht über Animationen

Übersicht über das Animations- und Zeitsteuerungssystem

Übersicht über Zeitsteuerungsereignisse

Weitere Ressourcen

Gewusst-wie-Themen zu Animation und Zeitsteuerung

Beispiel zum Verhalten der Animationszeitsteuerung