Freigeben über

Storyboardanimationen

  • Artikel

Storyboardanimationen sind nicht nur Animationen im visuellen Sinne. Eine Storyboardanimation ist eine Möglichkeit, den Wert einer Abhängigkeitseigenschaft als Zeitfunktion zu ändern. Einer der Hauptgründe, warum Sie möglicherweise eine Storyboardanimation benötigen, die nicht aus der Animationsbibliothek stammt, besteht darin, den visuellen Zustand für ein Steuerelement als Teil einer Steuerelementvorlage oder Seitendefinition zu definieren.

Unterschiede mit Silverlight und WPF

Wenn Sie mit Microsoft Silverlight oder Windows Presentation Foundation (WPF) vertraut sind, lesen Sie diesen Abschnitt. andernfalls können Sie es überspringen.

Im Allgemeinen ist das Erstellen von Storyboardanimationen in einer Windows-Runtime-App wie Silverlight oder WPF. Es gibt jedoch eine Reihe wichtiger Unterschiede:

  • Storyboardanimationen sind nicht die einzige Möglichkeit, eine Benutzeroberfläche visuell zu animieren, noch sind sie die einfachste Möglichkeit für App-Entwickler, dies zu tun. Anstatt Storyboardanimationen zu verwenden, empfiehlt es sich häufig, Designanimationen und Übergangsanimationen zu verwenden. Diese können schnell empfohlene UI-Animationen erstellen, ohne sich in die Ungenauigkeiten der Animationseigenschaftsadressierung zu integrieren. Weitere Informationen finden Sie in der Übersicht über Animationen.
  • In der Windows-Runtime enthalten viele XAML-Steuerelemente Designanimationen und Übergangsanimationen als Teil ihres integrierten Verhaltens. In den meisten Fällen haben WPF- und Silverlight-Steuerelemente kein Standardanimationsverhalten.
  • Nicht alle benutzerdefinierten Animationen, die Sie erstellen, können standardmäßig in einer Windows-Runtime-App ausgeführt werden, wenn das Animationssystem feststellt, dass die Animation möglicherweise zu einer schlechten Leistung in der Benutzeroberfläche führen kann. Animationen, bei denen das System feststellt, dass sich die Leistung negativ auf die Leistung auswirkt, werden als abhängige Animationen bezeichnet. Dies hängt davon ab, da die Uhr ihrer Animation direkt mit dem UI-Thread arbeitet, bei dem auch aktive Benutzereingaben und andere Updates versuchen, die Laufzeitänderungen auf die Benutzeroberfläche anzuwenden. Eine abhängige Animation, die umfangreiche Systemressourcen im UI-Thread verbraucht, kann dazu führen, dass die App in bestimmten Situationen nicht reagiert. Wenn ihre Animation eine Layoutänderung verursacht oder sich auf andere Weise auf die Leistung des UI-Threads auswirkt, müssen Sie die Animation häufig explizit aktivieren, damit sie ausgeführt wird. Dafür ist die EnableDependentAnimation-Eigenschaft für bestimmte Animationsklassen vorgesehen. Weitere Informationen finden Sie unter Abhängige und unabhängige Animationen .
  • Benutzerdefinierte Beschleunigungsfunktionen werden derzeit im Windows-Runtime nicht unterstützt.

Definieren von Storyboardanimationen

Eine Storyboardanimation ist eine Möglichkeit, den Wert einer Abhängigkeitseigenschaft als Zeitfunktion zu ändern. Die Eigenschaft, die Sie animieren, ist nicht immer eine Eigenschaft, die sich direkt auf die Benutzeroberfläche Ihrer App auswirkt. Da XAML jedoch die Ui für eine App definiert, handelt es sich in der Regel um eine UI-bezogene Eigenschaft, die Sie animieren. Sie können z. B. den Winkel eines RotateTransform-Formulars oder den Farbwert des Hintergrunds einer Schaltfläche animieren.

Einer der Hauptgründe für die Definition einer Storyboardanimation ist, wenn Sie ein Steuerelementautor sind oder ein Steuerelement neu erstellen und visuelle Zustände definieren. Weitere Informationen finden Sie unter Storyboardanimationen für visuelle Zustände.

Unabhängig davon, ob Sie visuelle Zustände oder eine benutzerdefinierte Animation für eine App definieren, gelten die Konzepte und APIs für Storyboardanimationen, die in diesem Thema beschrieben werden, hauptsächlich für beide.

Um animiert zu werden, muss die Eigenschaft, auf die Sie mit einer Storyboardanimation abzielen, eine Abhängigkeitseigenschaft sein. Eine Abhängigkeitseigenschaft ist ein wichtiges Feature der Windows-Runtime XAML-Implementierung. Die schreibbaren Eigenschaften der am häufigsten verwendeten UI-Elemente werden in der Regel als Abhängigkeitseigenschaften implementiert, sodass Sie sie animieren, datengebundene Werte anwenden oder eine Formatvorlage anwenden und die Eigenschaft mit einem Setter als Ziel festlegen können. Weitere Informationen zur Funktionsweise von Abhängigkeitseigenschaften finden Sie in der Übersicht über Abhängigkeitseigenschaften.

Meistens definieren Sie eine Storyboardanimation, indem Sie XAML schreiben. Wenn Sie ein Tool wie Microsoft Visual Studio verwenden, wird der XAML-Code für Sie erzeugt. Es ist auch möglich, eine Storyboardanimation mit Code zu definieren, aber das ist weniger häufig.

Schauen wir uns ein einfaches Beispiel an. In diesem XAML-Beispiel wird die Opacity-Eigenschaft für ein bestimmtes Rectangle-Objekt animiert.

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>

  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

Identifizieren des zu animierenden Objekts

Im vorherigen Beispiel wurde das Storyboard die Opacity-Eigenschaft eines Rechtecks animiert. Sie deklarieren die Animationen für das Objekt selbst nicht. Stattdessen führen Sie dies innerhalb der Animationsdefinition eines Storyboards durch. Storyboards werden in der Regel in XAML definiert, die sich nicht in unmittelbarer Nähe der XAML-UI-Definition des zu animierenden Objekts befinden. Stattdessen sind sie in der Regel als XAML-Ressource eingerichtet.

Um eine Animation mit einem Ziel zu verbinden, verweisen Sie anhand des identifizierenden Programmiernamens auf das Ziel. Sie sollten immer das x:Name-Attribut in der XAML-UI-Definition anwenden, um das Objekt zu benennen, das Sie animieren möchten. Anschließend legen Sie das zu animierende Objekt fest, indem Sie "Storyboard.TargetName" in der Animationsdefinition festlegen. Für den Wert von Storyboard.TargetName verwenden Sie die Namenszeichenfolge des Zielobjekts, was Sie zuvor und an anderer Stelle mit dem x:Name-Attribut festgelegt haben.

Ausrichten der zu animierenden Abhängigkeitseigenschaft

Sie legen einen Wert für Storyboard.TargetProperty in der Animation fest. Dadurch wird bestimmt, welche spezifische Eigenschaft des Zielobjekts animiert wird.

Manchmal müssen Sie auf eine Eigenschaft abzielen, die keine unmittelbare Eigenschaft des Zielobjekts ist, die jedoch tiefer in einer Objekteigenschaftsbeziehung geschachtelt ist. Häufig müssen Sie dies tun, um einen Drilldown in eine Reihe von beitragenden Objekt- und Eigenschaftswerten zu erstellen, bis Sie auf einen Eigenschaftstyp verweisen können, der animiert werden kann (Double, Point, Color). Dieses Konzept wird als indirekte Zielbestimmung bezeichnet, und die Syntax für die Zielbestimmung einer Eigenschaft wird auf diese Weise als Eigenschaftspfad bezeichnet.

Im Folgenden sehen Sie ein Beispiel. Ein häufiges Szenario für eine Storyboardanimation besteht darin, die Farbe eines Teils einer App-UI oder eines Steuerelements zu ändern, um darzustellen, dass sich das Steuerelement in einem bestimmten Zustand befindet. Angenommen, Sie möchten den Vordergrund eines TextBlocks animieren, damit es von Rot zu Grün wechselt. Sie erwarten, dass eine ColorAnimation beteiligt ist und das richtig ist. Keine der Eigenschaften für UI-Elemente, die sich auf die Farbe des Objekts auswirken, weisen jedoch den Typ "Color" auf. Stattdessen sind sie vom Typ Brush. Was Sie also tatsächlich für animationen verwenden müssen, ist die Color-Eigenschaft der SolidColorBrush-Klasse, bei der es sich um einen vom Pinsel abgeleiteten Typ handelt, der in der Regel für diese farbbezogenen UI-Eigenschaften verwendet wird. Und so sieht dies in Bezug auf die Darstellung eines Eigenschaftspfads für die Eigenschaftenadressierung Ihrer Animation aus:

<Storyboard x:Name="myStoryboard">
  <ColorAnimation
    Storyboard.TargetName="tb1"
    Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
    From="Red" To="Green"/>
</Storyboard>

Hier erfahren Sie, wie Sie sich diese Syntax in Bezug auf ihre Teile vorstellen:

  • Jeder Satz von () Klammern schließt einen Eigenschaftsnamen ein.
  • Innerhalb des Eigenschaftennamens gibt es einen Punkt, und dieser Punkt trennt einen Typnamen und einen Eigenschaftsnamen, sodass die eigenschaft, die Sie identifizieren, eindeutig ist.
  • Der Punkt in der Mitte, der sich nicht in Klammern befindet, ist ein Schritt. Dies wird von der Syntax so interpretiert, dass der Wert der ersten Eigenschaft (ein Objekt) verwendet wird, ein Schritt in das Objektmodell und eine bestimmte Untereigenschaft des Werts der ersten Eigenschaft.

Im Folgenden finden Sie eine Liste der Animationsadressierungsszenarien, in denen Sie wahrscheinlich indirekte Eigenschaftenadressierung verwenden, und einige Eigenschaftspfadzeichenfolgen, die der verwendeten Syntax nähern:

Sie werden feststellen, dass einige dieser Beispiele eckige Klammern um Zahlen verwenden. Dies ist ein Indexer. Sie gibt an, dass der vorangehende Eigenschaftsname eine Sammlung als Wert aufweist und dass Sie ein Element (wie durch einen nullbasierten Index identifiziert) innerhalb dieser Auflistung wünschen.

Sie können auch angefügte XAML-Eigenschaften animieren. Schließen Sie immer den vollständigen Namen der angefügten Eigenschaft in Klammern ein, z. B (Canvas.Left). . Weitere Informationen finden Sie unter Animieren von angefügten XAML-Eigenschaften.

Weitere Informationen zum Verwenden eines Eigenschaftspfads für die indirekte Zielbestimmung der zu animierten Eigenschaft finden Sie unter Property-Path-Syntax oder Storyboard.TargetProperty angefügte Eigenschaft.

Animationstypen

Das Windows-Runtime Animationssystem verfügt über drei spezifische Typen, auf die Storyboardanimationen angewendet werden können:

Es gibt auch einen generalisierten Objektanimationstyp für Objektverweiswerte, den wir später besprechen werden.

Angeben der animierten Werte

Bisher haben wir Ihnen gezeigt, wie Sie das Objekt und die zu animierende Eigenschaft als Ziel festlegen, aber noch nicht beschrieben haben, was die Animation beim Ausführen mit dem Eigenschaftswert bewirkt.

Die beschriebenen Animationstypen werden manchmal als "Von/nach/"-Animationen bezeichnet. Dies bedeutet, dass die Animation den Wert einer Eigenschaft im Laufe der Zeit mithilfe einer oder mehrerer dieser Eingaben ändert, die aus der Animationsdefinition stammen:

  • Der Wert beginnt mit dem Wert "Von" . Wenn Sie keinen From-Wert angeben, ist der Startwert der Wert, den die animierte Eigenschaft zum Zeitpunkt der Ausführung der Animation hat. Dies kann ein Standardwert, ein Wert aus einer Formatvorlage oder Vorlage oder ein Wert sein, der speziell von einer XAML-UI-Definition oder einem App-Code angewendet wird.
  • Am Ende der Animation ist der Wert " An ".
  • Wenn Sie auch einen Endwert relativ zum Startwert angeben möchten, legen Sie die By-Eigenschaft fest. Sie legen dies anstelle der To-Eigenschaft fest.
  • Wenn Sie keinen To-Wert oder einen By-Wert angeben, ist der Endwert der Wert, den die animierte Eigenschaft zum Zeitpunkt der Ausführung der Animation hat. In diesem Fall wäre es besser, einen From-Wert zu haben, da andernfalls die Animation den Wert überhaupt nicht ändert. Die Anfangs- und Endwerte sind beide identisch.
  • Eine Animation weist in der Regel mindestens eine von From, By oder To auf, aber nie alle drei.

Schauen wir uns das frühere XAML-Beispiel erneut an, und sehen wir uns die Werte "Von" und "An" und "Duration" erneut an. Das Beispiel animiert die Opacity-Eigenschaft, und der Eigenschaftstyp von Opacity ist Double. Die hier zu verwendende Animation ist also DoubleAnimation.

From="1.0" To="0.0" Gibt an, dass die Opacity-Eigenschaft beim Ausführen der Animation mit dem Wert 1 beginnt und auf 0 animiert wird. Anders ausgedrückt, was diese Double-Werte für die Opacity-Eigenschaft bedeuten, bewirkt diese Animation, dass das Objekt undurchsichtig gestartet und dann transparent wird.

...
<Storyboard x:Name="myStoryboard">
  <DoubleAnimation
    Storyboard.TargetName="MyAnimatedRectangle"
    Storyboard.TargetProperty="Opacity"
    From="1.0" To="0.0" Duration="0:0:1"/>
</Storyboard>
...

Duration="0:0:1" Gibt an, wie lange die Animation dauert, d. h., wie schnell das Rechteck ausgeblendet wird. Eine Duration-Eigenschaft wird in Form von Stunden:Minuten:Sekunden angegeben. Die Zeitdauer in diesem Beispiel ist eine Sekunde.

Weitere Informationen zu Dauerwerten und der XAML-Syntax finden Sie unter Duration.

Hinweis

Wenn Sie für das gezeigte Beispiel sicher waren, dass der Startzustand des animierten Objekts immer gleich 1 ist, entweder über die Standardeinstellung oder einen expliziten Satz, könnten Sie den From-Wert weglassen, die Animation würde den impliziten Anfangswert verwenden, und das Ergebnis wäre identisch.

From/To/By ist nullwertebar

Wir haben bereits erwähnt, dass Sie From, To oder By weglassen und somit aktuelle nicht animierte Werte als Ersatz für einen fehlenden Wert verwenden können. Von, To oder By-Eigenschaften einer Animation sind nicht vom Typ, den Sie erraten können. Der Typ der DoubleAnimation.To-Eigenschaft lautet beispielsweise nicht Double. Stattdessen ist es eine Nullwerte für Double. Und der Standardwert ist NULL, nicht 0. Dieser Nullwert ist, wie das Animationssystem unterscheidet, dass Sie keinen speziellen Wert für eine From-, To- oder By-Eigenschaft festgelegt haben. Visual C++-Komponentenerweiterungen (C++/CX) verfügen nicht über einen nullfähigen Typ, daher wird stattdessen IReference verwendet.

Andere Eigenschaften einer Animation

Die nächsten in diesem Abschnitt beschriebenen Eigenschaften sind alle optional, da sie Standardeinstellungen aufweisen, die für die meisten Animationen geeignet sind.

AutoReverse

Wenn Sie weder AutoReverse noch RepeatBehavior für eine Animation angeben, wird diese Animation einmal ausgeführt und für die als Dauer angegebene Zeit ausgeführt.

Die AutoReverse-Eigenschaft gibt an, ob eine Zeitachse umgekehrt wiedergegeben wird, nachdem sie das Ende der Dauer erreicht hat. Wenn Sie sie auf "true" festlegen, kehrt die Animation nach dem Erreichen des Endes der deklarierten Dauer um, und ändern Sie den Wert von seinem Endwert (In) wieder in den Anfangswert (Von). Dies bedeutet, dass die Animation für die Dauer doppelt so lange ausgeführt wird.

RepeatBehavior

Die RepeatBehavior-Eigenschaft gibt entweder an, wie oft eine Zeitachse wiedergegeben wird, oder eine größere Dauer, innerhalb der die Zeitachse wiederholt werden soll. Standardmäßig weist eine Zeitachse eine Iterationsanzahl von "1x" auf, was bedeutet, dass sie einmal für die Dauer wiedergegeben wird und nicht wiederholt wird.

Sie können dazu führen, dass die Animation mehrere Iterationen ausführt. Beispielsweise bewirkt ein Wert von "3x", dass die Animation dreimal ausgeführt wird. Sie können auch eine andere Dauer für RepeatBehavior angeben. Diese Dauer sollte länger sein als die Dauer der Animation selbst, um wirksam zu sein. Wenn Sie z. B. einen RepeatBehavior von "0:0:10" angeben, für eine Animation mit einer Dauer von "0:0:2", wird diese Animation fünf mal wiederholt. Wenn diese nicht gleichmäßig dividiert werden, wird die Animation zu dem Zeitpunkt abgeschnitten, zu dem die RepeatBehavior-Zeit erreicht ist, was möglicherweise durchgeht. Schließlich können Sie den Sonderwert "Forever" angeben, wodurch die Animation unendlich ausgeführt wird, bis sie absichtlich beendet wird.

Weitere Informationen zu RepeatBehavior-Werten und der XAML-Syntax finden Sie unter RepeatBehavior.

FillBehavior="Stop"

Wenn eine Animation endet, verlässt die Animation den Eigenschaftswert standardmäßig als endgültigen To - oder By-Modified-Wert, auch nachdem die Dauer überschritten wurde. Wenn Sie jedoch den Wert der FillBehavior-Eigenschaft auf FillBehavior.Stop festlegen, wird der Wert des animierten Werts auf den Wert zurückgesetzt, der vor der Anwendung der Animation war, oder genauer auf den aktuellen effektiven Wert, der durch das Abhängigkeitseigenschaftssystem bestimmt wird (weitere Informationen zu dieser Unterscheidung finden Sie in der Übersicht über Abhängigkeitseigenschaften).

BeginTime

Standardmäßig lautet "BeginTime" einer Animation "0:0:0", sodass sie beginnt, sobald das enthaltende Storyboard ausgeführt wird. Sie können dies ändern, wenn das Storyboard mehr als eine Animation enthält und Sie die Startzeiten der anderen im Vergleich zu einer anfänglichen Animation abstuft oder eine absichtliche kurze Verzögerung erstellen möchten.

SpeedRatio

Wenn Sie mehr als eine Animation in einem Storyboard haben, können Sie die Zeitrate einer oder mehrerer Animationen relativ zum Storyboard ändern. Es ist das übergeordnete Storyboard, das letztendlich steuert, wie die Dauer während der Ausführung der Animationen verstrichen ist. Diese Eigenschaft wird nicht sehr häufig verwendet. Weitere Informationen finden Sie unter SpeedRatio.

Definieren mehrerer Animationen in einem Storyboard

Der Inhalt eines Storyboards kann mehr als eine Animationsdefinition sein. Möglicherweise verfügen Sie über mehrere Animationen, wenn Sie verwandte Animationen auf zwei Eigenschaften desselben Zielobjekts anwenden. Beispielsweise können Sie sowohl die TranslateX- als auch die TranslateY-Eigenschaft eines TranslateTransform-Elements ändern, das als RenderTransform eines UI-Elements verwendet wird. Dadurch wird das Element diagonal übersetzt. Sie benötigen zwei verschiedene Animationen, um dies zu erreichen, aber Möglicherweise möchten Sie, dass die Animationen Teil desselben Storyboards sind, da diese beiden Animationen immer zusammen ausgeführt werden sollen.

Die Animationen müssen nicht denselben Typ aufweisen oder auf dasselbe Objekt abzielen. Sie können unterschiedliche Dauer haben und müssen keine Eigenschaftswerte freigeben.

Wenn das übergeordnete Storyboard ausgeführt wird, werden alle Animationen ebenfalls ausgeführt.

Die Storyboard-Klasse verfügt tatsächlich über viele der gleichen Animationseigenschaften wie die Animationstypen, da beide die Timeline-Basisklasse verwenden. Daher kann ein Storyboard über einen RepeatBehavior oder eine BeginTime verfügen. Sie legen diese in der Regel nicht auf einem Storyboard fest, es sei denn, Sie möchten, dass alle enthaltenen Animationen dieses Verhalten aufweisen. Im Allgemeinen gilt jede Timeline-Eigenschaft , die für ein Storyboard festgelegt ist, für alle untergeordneten Animationen. Wenn das Storyboard nicht festgelegt werden soll, weist das Storyboard eine implizite Dauer auf, die aus dem längsten Dauerwert der enthaltenen Animationen berechnet wird. Eine explizit festgelegte Dauer für ein Storyboard , das kürzer als eine seiner untergeordneten Animationen ist, führt dazu, dass diese Animation abgeschnitten wird, was normalerweise nicht wünschenswert ist.

Ein Storyboard darf keine zwei Animationen enthalten, die versuchen, die gleiche Eigenschaft für dasselbe Objekt anzuimieren und zu animieren. Wenn Sie dies versuchen, erhalten Sie einen Laufzeitfehler, wenn das Storyboard versucht, auszuführen. Diese Einschränkung gilt auch dann, wenn sich die Animationen aufgrund absichtlich unterschiedlicher BeginTime-Werte und Dauer nicht in der Zeit überlappen. Wenn Sie wirklich eine komplexere Animationszeitachse auf dieselbe Eigenschaft in einem einzigen Storyboard anwenden möchten, ist dies die Verwendung einer Keyframeanimation. Siehe Keyframe- und Beschleunigungsfunktionsanimationen.

Das Animationssystem kann mehrere Animationen auf den Wert einer Eigenschaft anwenden, wenn diese Eingaben aus mehreren Storyboards stammen. Die Verwendung dieses Verhaltens für gleichzeitig ausgeführte Storyboards ist nicht üblich. Es ist jedoch möglich, dass eine appdefinierte Animation, die Sie auf eine Steuerelementeigenschaft anwenden, den HoldEnd-Wert einer Animation ändert, die zuvor als Teil des visuellen Zustandsmodells des Steuerelements ausgeführt wurde.

Definieren eines Storyboards als Ressource

Ein Storyboard ist der Container, in den Sie Animationsobjekte einfügen. In der Regel definieren Sie das Storyboard als Ressource, die für das Objekt verfügbar ist, das Sie animieren möchten, entweder in Ressourcen auf Seitenebene oder Application.Resources.

Dieses nächste Beispiel zeigt, wie das vorherige Beispiel Storyboard in einer Ressourcendefinition auf Seitenebene enthalten wäre, wobei das Storyboard eine Schlüsselressource der Stammseite ist. Beachten Sie das x:Name-Attribut. Mit diesem Attribut definieren Sie einen Variablennamen für das Storyboard, sodass andere Elemente in XAML und Code später auf das Storyboard verweisen können.

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>
  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

Das Definieren von Ressourcen im XAML-Stamm einer XAML-Datei wie "page.xaml" oder "app.xaml" ist eine gängige Methode zum Organisieren von Schlüsselressourcen in XAML. Sie können Ressourcen auch in separate Dateien aufteilen und in Apps oder Seiten zusammenführen. Weitere Informationen finden Sie unter ResourceDictionary- und XAML-Ressourcenverweise.

Hinweis

Windows-Runtime XAML unterstützt das Identifizieren von Ressourcen entweder mithilfe des x:Key-Attributs oder des x:Name-Attributs. Die Verwendung des x:Name-Attributs ist für ein Storyboard häufiger, da Sie schließlich anhand des Variablennamens darauf verweisen möchten, damit Sie die Begin-Methode aufrufen und die Animationen ausführen können. Wenn Sie x:Key-Attribut verwenden, müssen Sie ResourceDictionary-Methoden wie den Item-Indexer verwenden, um es als Schlüsselressource abzurufen und dann das abgerufene Objekt in Storyboard zu umwandeln, um die Storyboard-Methoden zu verwenden.

Storyboards für visuelle Zustände

Sie platzieren Ihre Animationen auch in einer Storyboardeinheit , wenn Sie die Animationen für den visuellen Zustand eines Steuerelements deklarieren. In diesem Fall gehen die von Ihnen definierten Storyboardelemente in einen VisualState-Container ein, der tiefer in einer Formatvorlage geschachtelt ist (es ist die Formatvorlage, die die Schlüsselressource ist). In diesem Fall benötigen Sie keinen Schlüssel oder Namen für Ihr Storyboard, da es sich um den VisualState-Wert handelt, der über einen Zielnamen verfügt, den der VisualStateManager aufrufen kann. Die Stile für Steuerelemente werden häufig in separate XAML ResourceDictionary-Dateien und nicht in einer Seiten- oder App-Ressourcensammlung platziert. Weitere Informationen finden Sie unter Storyboardanimationen für visuelle Zustände.

Abhängige und unabhängige Animationen

An diesem Punkt müssen wir einige wichtige Punkte zur Funktionsweise des Animationssystems einführen. Insbesondere interagiert animation grundsätzlich mit der Darstellung einer Windows-Runtime-App auf dem Bildschirm und der Verwendung von Verarbeitungsthreads. Eine Windows-Runtime-App verfügt immer über einen Haupt-UI-Thread, und dieser Thread ist für die Aktualisierung des Bildschirms mit aktuellen Informationen verantwortlich. Darüber hinaus verfügt eine Windows-Runtime-App über einen Kompositionsthread, der für die Vorberechnung von Layouts unmittelbar vor dem Anzeigen verwendet wird. Wenn Sie die Benutzeroberfläche animieren, besteht das Potenzial, eine Menge Arbeit für den UI-Thread zu verursachen. Das System muss große Bereiche des Bildschirms mit relativ kurzen Zeitintervallen zwischen den einzelnen Aktualisierungen neu zeichnen. Dies ist erforderlich, um den neuesten Eigenschaftswert der animierten Eigenschaft zu erfassen. Wenn Sie nicht vorsichtig sind, besteht das Risiko, dass eine Animation die Benutzeroberfläche weniger reaktionsfähig machen kann oder sich auf die Leistung anderer App-Features auswirkt, die sich auch im selben UI-Thread befinden.

Die Vielzahl von Animationen, die bestimmt sind, dass das Risiko besteht, den UI-Thread zu verlangsamen, wird als abhängige Animation bezeichnet. Eine Animation, die diesem Risiko nicht unterliegt, ist eine unabhängige Animation. Der Unterschied zwischen abhängigen und unabhängigen Animationen wird nicht nur durch Animationstypen (DoubleAnimation usw.) bestimmt, wie zuvor beschrieben. Stattdessen wird bestimmt, welche spezifischen Eigenschaften Sie animieren, und andere Faktoren wie Vererbung und Zusammensetzung von Steuerelementen. Es gibt Situationen, in denen selbst wenn eine Animation die Benutzeroberfläche ändert, die Animation minimale Auswirkungen auf den UI-Thread haben kann und stattdessen vom Kompositionsthread als unabhängige Animation behandelt werden kann.

Eine Animation ist unabhängig, wenn sie über eines der folgenden Merkmale verfügt:

Warnung

Damit Ihre Animation als unabhängig behandelt werden kann, müssen Sie explizit festlegen Duration="0". Wenn Sie beispielsweise aus diesem XAML entfernen Duration="0" , wird die Animation als abhängig behandelt, obwohl die KeyTime des Frames "0:0:0".

<Storyboard>
  <DoubleAnimationUsingKeyFrames
    Duration="0"
    Storyboard.TargetName="Button2"
    Storyboard.TargetProperty="Width">
    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="200"/>
  </DoubleAnimationUsingKeyFrames>
</Storyboard>

Wenn Ihre Animation diese Kriterien nicht erfüllt, handelt es sich wahrscheinlich um eine abhängige Animation. Standardmäßig führt das Animationssystem keine abhängige Animation aus. Während des Entwicklungs- und Testprozesses sehen Sie ihre Animation möglicherweise nicht einmal. Sie können diese Animation weiterhin verwenden, aber Sie müssen jede solche abhängige Animation explizit aktivieren. Um Die Animation zu aktivieren, legen Sie die EnableDependentAnimation-Eigenschaft des Animationsobjekts auf "true" fest. (Jede Die Zeitachsen-Unterklasse , die eine Animation darstellt, weist eine andere Implementierung der Eigenschaft auf, aber alle haben den Namen EnableDependentAnimation.)

Die Anforderung, abhängige Animationen zu ermöglichen, die auf den App-Entwickler fallen, ist ein bewusster Designaspekt des Animationssystems und der Entwicklungserfahrung. Wir möchten Entwicklern bewusst sein, dass Animationen leistungseinbußen für die Reaktionsfähigkeit Ihrer Benutzeroberfläche haben. Animationen mit schlechter Leistung sind schwer zu isolieren und in einer vollständigen App zu debuggen. Daher ist es besser, nur die abhängigen Animationen zu aktivieren, die Sie wirklich für die Benutzeroberfläche Ihrer App benötigen. Wir wollten es nicht zu einfach machen, die Leistung Ihrer App aufgrund von dekorativen Animationen zu kompromittieren, die viele Zyklen verwenden. Weitere Informationen zu Leistungstipps für Animationen finden Sie unter Optimieren von Animationen und Medien.

Als App-Entwickler können Sie auch eine appweite Einstellung anwenden, die abhängige Animationen immer deaktiviert, auch wenn "EnableDependentAnimation" zutrifft. Siehe Timeline.AllowDependentAnimations.

Tipp

Wenn Sie den Animationsbereich in Blend für Visual Studio 2019 verwenden, werden Warnungen im Designer angezeigt, wenn Sie versuchen, eine abhängige Animation auf eine Eigenschaft mit visuellem Zustand anzuwenden. Warnungen werden in der Buildausgabe oder Fehlerliste nicht angezeigt. Wenn Sie XAML manuell bearbeiten, zeigt der Designer keine Warnung an. Zur Laufzeit beim Debuggen zeigt die Debugausgabe des Ausgabebereichs eine Warnung an, dass die Animation nicht unabhängig ist und übersprungen wird.

Starten und Steuern einer Animation

Alles, was wir Ihnen bisher gezeigt haben, bewirkt nicht, dass eine Animation ausgeführt oder angewendet wird! Bis die Animation gestartet und ausgeführt wird, sind die Wertänderungen, die eine Animation in XAML deklariert, latent und werden noch nicht geschehen. Sie müssen eine Animation explizit auf eine Weise starten, die sich auf die App-Lebensdauer oder die Benutzeroberfläche bezieht. Auf der einfachsten Ebene starten Sie eine Animation, indem Sie die Begin-Methode auf dem Storyboard aufrufen, das das übergeordnete Element für diese Animation ist. Sie können Methoden aus XAML nicht direkt aufrufen, sodass Sie unabhängig davon, was Sie tun, um Ihre Animationen zu aktivieren, den Code verwenden. Dies ist entweder der CodeBehind für die Seiten oder Komponenten Ihrer App oder die Logik Ihres Steuerelements, wenn Sie eine benutzerdefinierte Steuerelementklasse definieren.

In der Regel rufen Sie "Begin" auf, und lassen Sie die Animation einfach bis zum Abschluss der Dauer ausführen. Sie können jedoch auch die Methoden "Pause", "Resume" und "Stop" verwenden, um das Storyboard zur Laufzeit sowie andere APIs zu steuern, die für komplexere Animationssteuerungsszenarien verwendet werden.

Wenn Sie "Begin" auf einem Storyboard aufrufen, das eine Animation enthält, die unendlich wiederholt (RepeatBehavior="Forever"), wird diese Animation ausgeführt, bis die Seite, die sie enthält, entladen wird, oder Sie rufen "Pause" oder "Stop" explizit auf.

Starten einer Animation aus App-Code

Sie können Animationen entweder automatisch oder als Reaktion auf Benutzeraktionen starten. Für den automatischen Fall verwenden Sie in der Regel ein Objektlebensdauerereignis, z . B. Loaded , um als Animationstrigger zu fungieren. Das Loaded-Ereignis ist ein gutes Ereignis dafür, da die Benutzeroberfläche zu diesem Zeitpunkt für die Interaktion bereit ist und die Animation am Anfang nicht abgeschnitten wird, da noch ein anderer Teil der Benutzeroberfläche geladen wurde.

In diesem Beispiel wird das PointerPressed-Ereignis an das Rechteck angefügt, sodass die Animation beginnt, wenn der Benutzer auf das Rechteck klickt.

<Rectangle PointerPressed="Rectangle_Tapped"
  x:Name="MyAnimatedRectangle"
  Width="300" Height="200" Fill="Blue"/>

Der Ereignishandler startet das Storyboard (die Animation) mithilfe der Begin-Methode des Storyboards.

myStoryboard.Begin();

myStoryboard().Begin();

myStoryboard->Begin();

myStoryBoard.Begin()

Sie können das Completed-Ereignis behandeln, wenn eine andere Logik ausgeführt werden soll, nachdem die Animation die Anwendung von Werten abgeschlossen hat. Außerdem kann die GetAnimationBaseValue-Methode hilfreich sein, um Eigenschaftensystem-/Animationsinteraktionen zu behandeln.

Tipp

Immer wenn Sie eine Codierung für ein App-Szenario ausführen, in dem Sie eine Animation aus App-Code starten, sollten Sie erneut überprüfen, ob eine Animation oder ein Übergang bereits in der Animationsbibliothek für Ihr UI-Szenario vorhanden ist. Die Bibliotheksanimationen ermöglichen eine konsistentere Benutzeroberfläche in allen Windows-Runtime Apps und sind einfacher zu verwenden.

 

Animationen für visuelle Zustände

Das Ausführungsverhalten für ein Storyboard , das zum Definieren des visuellen Zustands eines Steuerelements verwendet wird, unterscheidet sich davon, wie eine App ein Storyboard direkt ausführen kann. Wie auf eine Definition des visuellen Zustands in XAML angewendet, ist das Storyboard ein Element eines mit VisualState enthaltenen Elements, und der Zustand als Ganzes wird mithilfe der VisualStateManager-API gesteuert. Alle Animationen innerhalb werden entsprechend ihren Animationswerten und Zeitachseneigenschaften ausgeführt, wenn das enthaltende VisualState-Objekt von einem Steuerelement verwendet wird. Weitere Informationen finden Sie unter Storyboards für visuelle Zustände. Bei visuellen Zuständen unterscheidet sich das scheinbare FillBehavior.For visual states, the apparent FillBehavior is different. Wenn ein visueller Zustand in einen anderen Zustand geändert wird, werden alle vom vorherigen visuellen Zustand angewendeten Eigenschaftsänderungen und deren Animationen abgebrochen, auch wenn der neue visuelle Zustand keine spezielle Animation auf eine Eigenschaft anwendet.

Storyboard und EventTrigger

Es gibt eine Möglichkeit, eine Animation zu starten, die vollständig in XAML deklariert werden kann. Diese Technik wird jedoch nicht mehr häufig verwendet. Es ist eine ältere Syntax von WPF und frühen Versionen von Silverlight vor der VisualStateManager-Unterstützung. Diese EventTrigger-Syntax funktioniert weiterhin in Windows-Runtime XAML aus Import-/Kompatibilitätsgründen, funktioniert jedoch nur für ein Triggerverhalten basierend auf dem FrameworkElement.Loaded-Ereignis. Beim Versuch, andere Ereignisse auszulösen, werden Ausnahmen ausgelöst oder nicht kompiliert. Weitere Informationen finden Sie unter EventTrigger oder BeginStoryboard.

Animieren angefügter XAML-Eigenschaften

Es ist kein gängiges Szenario, Sie können jedoch einen animierten Wert auf eine angefügte XAML-Eigenschaft anwenden. Weitere Informationen dazu, was angefügte Eigenschaften sind und wie sie funktionieren, finden Sie unter Übersicht über angefügte Eigenschaften. Für die Adressierung einer angefügten Eigenschaft ist eine Eigenschaftspfadsyntax erforderlich, die den Eigenschaftsnamen in Klammern einschließt. Sie können die integrierten angefügten Eigenschaften wie Canvas.ZIndex mithilfe einer ObjectAnimationUsingKeyFrames animieren, die diskrete ganzzahlige Werte anwendet. Eine bestehende Einschränkung der Windows-Runtime XAML-Implementierung besteht jedoch darin, dass Sie keine benutzerdefinierte angefügte Eigenschaft animieren können.

Weitere Animationstypen und nächste Schritte zum Animieren der Benutzeroberfläche

Bisher haben wir die benutzerdefinierten Animationen gezeigt, die zwischen zwei Werten animiert werden, und dann die Werte während der Ausführung der Animation linear interpolieren. Diese werden von Zu-Nach-Zeichen-Animationen// aufgerufen. Es gibt jedoch einen anderen Animationstyp, mit dem Sie Zwischenwerte deklarieren können, die zwischen Anfang und Ende liegen. Diese werden als Keyframeanimationen bezeichnet. Es gibt auch eine Möglichkeit zum Ändern der Interpolationslogik für eine Von-nach-Animation// oder eine Keyframeanimation. Dies umfasst das Anwenden einer Beschleunigungsfunktion. Weitere Informationen zu diesen Konzepten finden Sie unter Keyframe- und Beschleunigungsfunktionsanimationen.