Übersicht über Zeitsteuerungsverhalten

  • Artikel

Dieses Thema beschreibt das Timing-Verhalten von Animationen und anderen Timeline-Objekten.

Voraussetzungen

Als Voraussetzung für dieses Thema sollten Sie mit grundlegenden Animationsfunktionen vertraut sein. Weitere Informationen finden Sie unter Übersicht über Animationen.

Zeitachsentypen

Timeline steht für ein Segment der Zeit. Sie bietet Eigenschaften, mit denen Sie z.B. die Länge dieses Abschnitts, seinen Start, die Anzahl der Wiederholungen und die Geschwindigkeit des Fortschreitens der Zeit im Abschnitt Segment angeben.

Klassen, die von der Timeline-Klasse erben, bieten zusätzliche Funktionen, wie z.B. Animation und Medienwiedergabe. WPF stellt folgende Timeline-Typen bereit.

Zeitachsentypen Beschreibung
AnimationTimeline Abstrakte Basisklasse für Timeline-Objekte, die Ausgabewerte für das Animieren von Eigenschaften generieren.
MediaTimeline Erzeugt eine Ausgabe aus einer Mediendatei.
ParallelTimeline Ein Typ von TimelineGroup, der untergeordnete Timeline-Objekte gruppiert und kontrolliert.
Storyboard Ein Typ von ParallelTimeline, der Zielinformationen für die darin enthaltenen Zeitachsenobjekte liefert.
Timeline Abstrakte Basisklasse, die Zeitsteuerungsverhalten definiert.
TimelineGroup Abstrakte Klasse für Timeline-Objekte, die andere Timeline-Objekte enthalten können.

Eigenschaften, die die Länge einer Zeitachse steuern

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

Begriff BESCHREIBUNG Eigenschaften
Einfache Dauer Zeitspanne, die eine Zeitachse für eine Vorwärtsiteration benötigt. Duration
Eine Wiederholung Zeitspanne, die eine Zeitachse für eine Vorwärtswiedergabe und, sofern die AutoReverse-Eigenschaft wahr ist, für eine Rückwärtswiedergabe benötigt. Duration, AutoReverse
Aktiver Zeitraum Die Zeitspanne, die eine Zeitachse benötigt, um alle von ihrer RepeatBehavior-Eigenschaft angegebenen Wiederholungen durchzuführen. Duration, AutoReverse, RepeatBehavior

Duration-Eigenschaft

Wie bereits erwähnt, stellt eine Zeitachse einen Zeitabschnitt dar. Die Länge dieses Segments wird durch die Duration-Zeitleiste bestimmt. Wenn eine Zeitachse das Ende ihrer Dauer erreicht, wird die Wiedergabe beendet. Wenn die Zeitachse ü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. Die Dauer einer Zeitachse wird manchmal ihre einfache Dauer genannt, um die Dauer einer einzelnen Iteration und die Gesamtlänge der Wiedergabezeit der Animation, einschl. 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.

Das folgende Beispiel zeigt ein DoubleAnimation mit Duration von fünf Sekunden.

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

Container-Zeitleisten, wie z. B. Storyboard und ParallelTimeline, haben eine Standarddauer von Automatic, d. h. sie enden automatisch, wenn ihr letztes untergeordnetes Element die Wiedergabe beendet. Das folgende Beispiel zeigt, dass ein Storyboard, dessen Duration in fünf Sekunden aufgelöst wird, d. h. die Zeit, die alle untergeordneten DoubleAnimation-Objekte benötigen, um ihre Arbeit zu erledigen.

<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 die Duration einer Zeitleiste eines Containers auf einen TimeSpan-Wert setzen, können Sie erzwingen, dass er länger oder kürzer als seine untergeordneten Timeline-Objekte wiedergegeben wird. Wenn Sie Duration auf einen Wert setzen, der kleiner ist als die Länge der untergeordneten Timeline-Objekte der Container-Zeitleiste, wird die Wiedergabe der untergeordneten Timeline-Objekte beendet, wenn die Container-Zeitleiste endet. Das folgende Beispiel setzt die Duration von Storyboard aus den vorangegangenen Beispielen auf drei Sekunden. Daher wird die erste DoubleAnimation nach drei Sekunden gestoppt, wenn 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 eines Timeline-Steuerelements, wie oft es die einfache Dauer wiederholt. Mithilfe der RepeatBehavior-Eigenschaft können Sie angeben, wie oft die Zeitachse (eine Iteration Count) oder die Gesamtdauer der Wiedergabe (einer Wiederholung Duration) wiedergegeben wird. In beiden Fällen durchläuft die Animation so viele vollständige Ausführungen, wie für die erforderliche Anzahl oder Dauer nötig. In der Standardeinstellung haben Zeitachsen einen Iterationszähler von 1.0, d. h. sie werden einmal abgespielt und nicht wiederholt.

Im folgenden Beispiel wird die RepeatBehavior-Eigenschaft verwendet, um DoubleAnimation doppelt so lange abzuspielen, wie es einfach dauert, indem eine Iterationszahl angegeben 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, um DoubleAnimation für die Hälfte seiner einfachen Dauer zu spielen.

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

Wenn Sie die RepeatBehavior-Eigenschaft eines Timeline auf Forever festlegen, wird die Timeline wiederholt, bis er interaktiv oder durch das Zeitmesssystem gestoppt wird. Das folgende Beispiel verwendet die RepeatBehavior-Eigenschaft, um die DoubleAnimation-Wiedergabe auf unbestimmte Zeit zu verlängern.

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

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

AutoReverse-Eigenschaft

Die AutoReverse-Eigenschaft gibt an, ob Timeline am Ende jeder Vorwärtsiteration rückwärts abgespielt wird. Das folgende Beispiel setzt die AutoReverse-Eigenschaft von DoubleAnimation auf true; als Ergebnis animiert sie sich von Null auf 100 und dann von 100 auf Null. Sie wird insgesamt 10 Sekunden wiedergegeben.

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

Wenn Sie einen Count-Wert verwenden, um die RepeatBehavior einer Timeline anzugeben, und die AutoReverse-Eigenschaft von Timeline ist true, besteht eine einzelne Wiederholung aus einer Vorwärtsiteration gefolgt von einer Rückwärtsiteration. Im folgenden Beispiel wird die RepeatBehavior von DoubleAnimation dem vorhergehenden Beispiel auf Count von 2 festgelegt. Daher wird die DoubleAnimation 20 Sekunden lang abgespielt: 5 Sekunden vorwärts, 5 Sekunden rückwärts, erneut 5 Sekunden vorwärts und dann 5 Sekunden rückwärts.

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

Verfügt eine Containerzeitachse über untergeordnete Timeline-Objekte, werden diese umgekehrt, sobald die Containerzeitachse umgekehrt wird. Weitere Beispiele finden Sie unter Angeben, ob die Wiedergaberichtung einer Zeitachse automatisch umgekehrt wird.

BeginTime-Eigenschaft

Mit dieser BeginTime-Eigenschaft können Sie festlegen, wann eine Zeitleiste beginnt. Die Startzeit einer Zeitachse bezieht sich auf die übergeordnete Zeitachse. Eine Anfangszeit von 0 (null) Sekunden bedeutet, dass die Zeitachse gestartet wird, sobald die übergeordnete gestartet wird. Jeder andere Wert erstellt einen Offset zwischen dem Zeitpunkt des Starts der Wiedergabe der übergeordneten Zeitachse und der Wiedergabe der untergeordneten Zeitachse. Beispielsweise bedeutet eine Startzeit von 2 Sekunden, dass die Wiedergabe der Zeitachse gestartet wird, wenn ihre übergeordnete Zeitachse eine Zeit von 2 Sekunden erreicht hat. Standardmäßig haben alle Zeitachsen eine Startzeit von 0 Sekunden. Sie können die Startzeit einer Zeitachse auch auf null festlegen, wodurch verhindert wird, dass die Zeitachse gestartet wird. In WPF geben Sie mithilfe der x:Null-Markuperweiterung 0 an.

Beachten Sie, dass die Anfangszeit aufgrund ihrer RepeatBehavior-Einstellung nicht jedes Mal angewendet wird, wenn eine Zeitleiste wiederholt wird. Wenn Sie eine Animation mit BeginTime von 10 Sekunden und RepeatBehavior von Forever erstellen würden, gäbe es eine 10-sekündige Verzögerung, bevor die Animation zum ersten Mal abgespielt wird, aber nicht bei jeder weiteren Wiederholung. Soll jedoch die übergeordnete Zeitachse der Animation neu gestartet oder wiederholt werden, tritt die Verzögerung von 10 Sekunden auf.

Die BeginTime-Eigenschaft ist nützlich, um Zeitleisten zu staffeln. Das folgende Beispiel wir ein Storyboard-Objekt erstellt, das zwei untergeordnete DoubleAnimation-Objekte hat. Die erste Animation hat eine Duration von fünf Sekunden, die zweite eine Duration von 3 Sekunden. Das Beispiel setzt die BeginTime der zweiten DoubleAnimation auf 5 Sekunden, sodass sie nach dem Ende der ersten DoubleAnimation abgespielt wird.

<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 Timeline das Ende seiner aktiven Gesamtdauer erreicht, legt die FillBehavior-Eigenschaft fest, ob es anhält oder seinen letzten Wert behält. Eine Animation mit einem FillBehavior von HoldEnd "hält" ihren Ausgabewert: die Eigenschaft, die animiert wird, behält den letzten Wert der Animation bei. Der Wert Stop bewirkt, dass die Animation ihre Zieleigenschaft nicht mehr beeinflusst, nachdem sie beendet wurde.

Das folgende Beispiel wir ein Storyboard-Objekt erstellt, das zwei untergeordnete DoubleAnimation-Objekte hat. Beide DoubleAnimation-Objekte animieren die Width einer Rectangle von 0 bis 100. Die Rectangle-Elemente haben nicht-animierte Width-Werte von 500 [geräteunabhängige Pixel].

<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 bietet drei Eigenschaften, mit denen Sie ihre Geschwindigkeit festlegen können:

Weitere Informationen