Storyboardübersicht
Diese Übersicht konzentriert sich auf die Verwendung von Übergängen und Storyboards in der Windows-Animation. Eine Übersicht über die Komponenten der Windows-Animation finden Sie unter Übersicht über die Windows-Animation.
Dieses Thema enthält folgende Abschnitte:
Transitions
Ein Übergang definiert, wie sich eine einzelne Animationsvariable über ein bestimmtes Zeitintervall ändert. Die Windows-Animation enthält eine Bibliothek allgemeiner Übergänge, die Entwickler auf eine oder mehrere Animationsvariablen anwenden können. Verschiedene Arten von Übergängen haben unterschiedliche Mengen von Parametern, die den Wert der Variablen nach Abschluss des Übergangs, die Dauer des Übergangs oder größen, die für die zugrunde liegende mathematische Funktion eindeutig sind, z. B. Beschleunigung oder Schwingungsbereich.
Alle Übergänge haben zwei implizite Parameter: den Anfangswert und die Anfangsgeschwindigkeit (Steigung) der mathematischen Funktion. Diese können von der Anwendung explizit angegeben werden, werden aber in der Regel vom Animations-Manager auf den Wert und die Geschwindigkeit der Animationsvariablen festgelegt, wenn der Übergang beginnt.
Übergangsbibliothek
Die folgenden Übergänge werden derzeit von der Übergangsbibliothek bereitgestellt. Wenn eine Anwendung einen Effekt erfordert, der nicht mithilfe der Übergangsbibliothek angegeben werden kann, können Entwickler andere Arten von Übergängen erstellen, indem sie einen benutzerdefinierten Interpolator für die Anwendung implementieren oder eine Übergangsbibliothek von einem Drittanbieter verwenden.
| Übergangsname | BESCHREIBUNG |
|---|---|
| beschleunigen und verlangsamen |
Die Animationsvariable beschleunigt sich und verlangsamt sich dann über eine bestimmte Dauer. |
| Konstante |
Die Animationsvariable bleibt während des Übergangs bei ihrem Anfangswert. |
| Kubisch |
Die Animationsvariable ändert sich von ihrem Anfangswert in einen angegebenen Endwert mit einer angegebenen Endgeschwindigkeit über eine bestimmte Dauer. |
| Diskrete |
Die Animationsvariable bleibt für eine angegebene Verzögerungszeit bei ihrem Anfangswert, wechselt dann sofort zu einem angegebenen Endwert und bleibt für eine bestimmte Haltezeit bei diesem Wert. |
| Momentanen |
Die Animationsvariable ändert sich sofort vom aktuellen Wert in einen angegebenen Endwert. |
| linear |
Die Animationsvariable wechselt linear von ihrem Anfangswert zu einem angegebenen Endwert über eine bestimmte Dauer. |
| linear von Der Geschwindigkeit |
Die Animationsvariable wechselt linear von ihrem Anfangswert zu einem angegebenen Endwert mit einer angegebenen Geschwindigkeit. |
| parabolisch aus Beschleunigung |
Die Animationsvariable wechselt von ihrem Anfangswert zu einem angegebenen Endwert mit einer angegebenen Endgeschwindigkeit und ändert ihre Geschwindigkeit mit einer angegebenen Beschleunigung. |
| Umkehrung |
Die Variable ändert die Richtung über eine bestimmte Dauer. Der endgültige Wert ist mit dem Anfangswert identisch, und die Endgeschwindigkeit ist negativ auf die Anfangsgeschwindigkeit. |
| sinusförmiger Bereich |
Die Variable oszilliert innerhalb eines angegebenen Wertebereichs mit einer angegebenen Oszillationsdauer für eine bestimmte Dauer. |
| sinusförmige Geschwindigkeit |
Die Variable oszilliert mit einem angegebenen Zeitraum der Schwingung für eine bestimmte Dauer. Die Amplitude der Schwingung wird durch die Anfangsgeschwindigkeit der Variablen bestimmt. |
| smooth stop |
Die Animationsvariable wird mit einem angegebenen Endwert innerhalb einer maximalen Dauer beendet. |
Die folgende Tabelle enthält Abbildungen für jeden dieser Übergänge.
| Abbildungen |
|---|
    der  |
   |
  der  |
 |
Benutzerdefinierte Übergänge
Ein Interpolator definiert die mathematische Funktion, die bestimmt, wie sich eine Animationsvariable im Laufe der Zeit ändert, wenn sie von ihrem Anfangswert zu einem endgültigen Wert fortschreitet. Jeder Übergang in der Übergangsbibliothek verfügt über ein zugeordnetes Interpolatorobjekt, das vom System bereitgestellt wird und die Interpolatorfunktion implementiert. Wenn eine Anwendung einen Effekt benötigt, der nicht mithilfe der Übergangsbibliothek angegeben werden kann, kann sie einen oder mehrere benutzerdefinierte Übergänge implementieren, indem sie für jeden neuen Übergang ein Interpolatorobjekt implementiert. Interpolatorobjekte können nicht direkt von Anwendungen verwendet werden und müssen stattdessen in einem zugeordneten Übergang umschlossen werden. Eine Übergangsfactory wird verwendet, um Übergänge aus einem Interpolatorobjekt zu generieren. Weitere Informationen finden Sie unter IUIAnimationInterpolator und IUIAnimationTransitionFactory .
Beachten Sie, dass die meisten Anwendungen über alle erforderlichen Übergänge verfügen, indem sie die Übergangsbibliothek verwenden und daher keinen Interpolator implementieren müssen.
Storyboards
Ein Storyboard ist eine Sammlung von Übergängen, die im Laufe der Zeit auf eine oder mehrere Animationsvariablen angewendet werden. Die Übergänge in einem Storyboard bleiben garantiert relativ zueinander synchronisiert, und das Storyboard wird als Einheit geplant oder abgebrochen. Nach dem Erstellen der gewünschten Übergänge erstellt eine Anwendung mithilfe des Animations-Managers ein Storyboard, fügt die Übergänge zum Storyboard hinzu, konfiguriert das Storyboard entsprechend und plant, es so schnell wie möglich wiederzugeben. Der Animations-Manager bestimmt die tatsächliche Startzeit des Storyboards, da es möglicherweise Konflikte mit anderen Storyboards gibt, die derzeit dieselben Variablen animieren.
Die Gesamtdauer eines Storyboards hängt von der Dauer der Übergänge innerhalb des Storyboards ab. Die Dauer eines Übergangs muss nicht festgelegt werden; sie kann durch den Wert und die Geschwindigkeit der animierten Variablen bestimmt werden, wenn der Übergang beginnt. Die Dauer eines Storyboards kann also auch vom Zustand der Variablen abhängen, die es animiert.
In den folgenden Beispielen wird davon ausgegangen, dass ein Animations-Manager, eine Übergangsbibliothek und ein Timer erstellt wurden. Weitere Informationen finden Sie unter Erstellen der Hauptanimationsobjekte. In den Beispielen wird auch davon ausgegangen, dass die Anwendung drei Animationsvariablen (X, Y und Z) mithilfe der IUIAnimationManager::CreateAnimationVariable-Methode und fünf Übergänge (T1, T2, T3, T4 und T5) erstellt hat, indem sie die methoden der IUIAnimationTransitionLibrary-Schnittstelle verwendet.
- Erstellen eines einfachen Storyboards
- Verwenden einer Context-Sensitive Dauer
- Erstellen eines komplexeren Storyboards
- Verwenden von Keyframes
- Haltevariablen
- Planen eines Storyboards
Erstellen eines einfachen Storyboards
Um ein einfaches Storyboard zu erstellen, verwenden Sie die IUIAnimationManager::CreateStoryboard-Methode , um ein neues Storyboard zu erstellen, die IUIAnimationTransitionLibrary::CreateLinearTransition-Methode , um einen linearen Übergang, T1, und die IUIAnimationStoryboard::AddTransition-Methode zu erstellen, um den T1-Übergang auf die Variable X anzuwenden und den resultierenden Übergang zum Storyboard hinzuzufügen.
Dieser Prozess ergibt ein einfaches Storyboard, wie in der folgenden Abbildung dargestellt. Das Storyboard enthält einen Übergang, T1, sodass sich der Wert der Variablen X linear über einen festen Zeitraum ändert.
Beachten Sie, dass für ein so einfaches Szenario eine alternative Option die Verwendung der IUIAnimationManager::ScheduleTransition-Methode ist.
Verwenden einer Context-Sensitive Dauer
Während einige Übergänge eine feste Dauer haben, hängt die Dauer anderer von dem Anfangswert oder der Geschwindigkeit der animierten Variablen ab, wenn der Übergang beginnt. Beispielsweise erstellt die IUIAnimationTransitionLibrary::CreateLinearTransitionFromSpeed-Methode einen Übergang mit einer Dauer, die proportional zur Differenz zwischen dem Anfangswert der Animationsvariablen und dem angegebenen Endwert ist. In dieser Abbildung und den restlichen Abbildungen werden solche Übergänge mit beliebigen Daueren mit einem Fragezeichen (?) dargestellt, und ihre tatsächliche Dauer wird bestimmt, wenn das Storyboard abgespielt wird.
Erstellen eines komplexeren Storyboards
Nachdem Sie ein Storyboard erstellt und einen einzelnen Übergang (T1) hinzugefügt haben, können Sie einen zweiten Übergang für die X-Variable anfügen, indem Sie die IUIAnimationStoryboard::AddTransition-Methode erneut aufrufen, jedoch mit T2 anstelle von T1.
Unter der Annahme, dass der T2-Übergang eine kontextabhängige Dauer hat, enthält das Storyboard jetzt zwei Rückübergänge mit beliebiger Dauer, die sich auf die Variable X auswirken.
Durch erneutes Aufrufen von AddTransition mit variablem Y und Übergang T3 wird am Anfang des Storyboards ein dritter Übergang hinzugefügt. Abhängig von den Werten von X und Y, wenn das Storyboard wiedergegeben wird, kann T3 nach T1 oder sogar nach T2 enden.
Verwenden von Keyframes
Um einen Übergang am Anfang des Storyboards an einem Offset hinzuzufügen, müssen Sie zunächst einen Keyframe hinzufügen. Keyframes stellen Zeitpunkte dar und haben an sich keine Auswirkung auf das Verhalten des Storyboards. Jedes Storyboard verfügt über einen impliziten Keyframe, der den Anfang des Storyboards darstellt, UI_ANIMATION_KEYFRAME_STORYBOARD_START; Sie können von Anfang an neue Keyframes an Offsets hinzufügen, indem Sie die IUIAnimationStoryboard::AddKeyframeAtOffset-Methode mit UI_ANIMATION_KEYFRAME_STORYBOARD_START aufrufen.
Der Offset, an dem Sie einen Keyframe hinzufügen, ist immer relativ zu einem anderen Keyframe. Das folgende Diagramm zeigt das Ergebnis des Hinzufügens von Keyframe1 und Übergang T4, das auf die Variable Z angewendet, mit keyframe1 ausgerichtet und mit einer festen Dauer erstellt wird. Da die Dauer der anderen Übergänge noch nicht bekannt ist, ist T4 möglicherweise nicht der letzte Übergang, der abgeschlossen wird.
Keyframes können auch mit der IUIAnimationStoryboard::AddKeyframeAfterTransition-Methode an den Enden von Übergängen platziert werden. Das folgende Diagramm zeigt das Ergebnis des Hinzufügens von Keyframe2 nach T1 und keyframe3 nach T2.
Da die Dauer von T1 und T2 erst bekannt ist, wenn das Storyboard wiedergegeben wird, werden auch die Offsets von Keyframe2 und Keyframe3 erst dann bestimmt. Daher können keyframe2 und sogar keyframe3 früher als keyframe1 auftreten.
Sowohl der Anfang als auch das Ende eines Übergangs können mithilfe der IUIAnimationStoryboard::AddTransitionBetweenKeyframes-Methode an Keyframes ausgerichtet werden. Das folgende Diagramm zeigt das Ergebnis des Hinzufügens eines fünften Übergangs (T5) für die Variable Y zwischen keyframe2 und keyframe3. Dadurch wird die Dauer von T5 geändert, sodass sie je nach den relativen Offsets von Keyframe2 und Keyframe3 länger oder kürzer wird.
Speichern von Variablen
Wenn T4 nach T2 und T5 endet, beendet das Storyboard die Animierung der Variablen X und Y und stellt sie für andere Storyboards zum Animieren zur Verfügung. Die Anwendung kann jedoch die IUIAnimationStoryboard::HoldVariable-Methode aufrufen, um anzufordern, dass das Storyboard einige oder alle variablen enthält, die es animiert, bis das Storyboard abgeschlossen ist. Das folgende Diagramm zeigt das Ergebnis des Haltens von X und Z, wenn T4 zuletzt abgeschlossen ist. Beachten Sie, dass das Storyboard X auf seinem endgültigen Wert enthält, bis das Storyboard abgeschlossen ist. Der Haltevorgang hat keine Auswirkung auf Z, da das Storyboard endet, wenn T4 abgeschlossen ist.
Obwohl Y nicht von diesem Storyboard gehalten wird, ändert sich sein Wert nach Abschluss von T5 nicht, es sei denn, es wird von einem anderen Storyboard animiert. Da Y nicht gehalten wird, kann jedes andere Storyboard, unabhängig von der Priorität, Y animieren, nachdem T5 abgeschlossen ist. Da X dagegen gehalten wird, kann ein Storyboard mit niedrigerer Priorität X erst animieren, wenn dieses Storyboard fertig ist.
Alle diese Abbildungen haben einen beliebigen Satz aktueller Werte für die Variablen angenommen, wenn das Storyboard abgespielt wird. Wenn andere Werte gefunden werden, sind die Dauer der kontextabhängigen Übergänge wahrscheinlich unterschiedlich, wie in der folgenden Abbildung gezeigt.
In diesem Szenario beginnt T5, bevor T3 abgeschlossen ist, und T3 wird daher gekürzt. Da T4 vor T2 und T5 abgeschlossen wird, wird der Wert von Z bis zum Ende des Storyboards gehalten. Im Allgemeinen können sich die Werte und Geschwindigkeiten von Variablen beim Start der Wiedergabe eines Storyboards auf die Keyframereihenfolge und die Gesamtlänge und Form des Storyboards auswirken.
Planen eines Storyboards
Bei der Planung eines Storyboards wird die Startzeit durch seine Gliederung und die Konturen der Storyboards bestimmt, die sich derzeit im Zeitplan befinden. Insbesondere der erste und letzte Moment, in dem das Storyboard jede einzelne Variable animiert, bestimmen, ob und wann zwei Storyboards kollidieren, aber die internen Details der Übergänge innerhalb sind nicht wichtig.
Die folgende Abbildung zeigt die Gliederung eines Storyboards mit fünf Übergängen, die drei Variablen animieren.
Ein Eckpfeiler der Windows-Animationsplattform ist die Unterstützung, eine Animation bei Bedarf abzuschließen, bevor eine andere beginnt. Dies beseitigt zwar viele logische Probleme, führt aber auch zu einer beliebigen Latenz in der Benutzeroberfläche. Um dies zu beheben, können Anwendungen die längste zulässige Verzögerung für den Start eines Storyboards mithilfe der IUIAnimationStoryboard::SetLongestAcceptableDelay-Methode angeben, und der Animations-Manager verwendet diese Informationen, um das Storyboard zu planen, bevor der angegebene Latenzzeitraum abläuft. Wenn ein Storyboard geplant ist, bestimmt der Animationsmanager, ob andere Storyboards zuerst abgebrochen, gekürzt, abgeschlossen und/oder komprimiert werden müssen.
Eine Anwendung kann einen Handler registrieren, der aufgerufen wird, wenn sich die status eines Storyboards ändert. Dadurch kann die Anwendung reagieren, wenn das Storyboard mit der Wiedergabe beginnt, bis zum Abschluss ausgeführt wird, vollständig aus dem Zeitplan entfernt wird oder aufgrund einer Unterbrechung durch ein Storyboard mit höherer Priorität am Abschluss gehindert wird. Um die Storyboards zu identifizieren, die an Storyboard-Ereignishandler (oder Prioritätsvergleiche) übergeben werden, kann eine Anwendung die IUIAnimationStoryboard::SetTag-Methode verwenden, um Tags auf Storyboards anzuwenden, ähnlich denen, die zum Identifizieren von Variablen verwendet werden können. Wie bei der Wiederverwendung von Storyboards müssen Entwickler bei der Verwendung von Tags zur Identifizierung von Storyboards vorsichtig sein und sicherstellen, dass keine Mehrdeutigkeiten auftreten, wenn Benutzeraktionen dazu führen, dass viele Storyboards in die Warteschlange eingereiht werden.
Die folgenden Beispiele zeigen zwei Varianten eines Versuchs, das storyboard zu planen, das in den vorherigen Abschnitten dieses Themas erstellt wurde.
In diesem Szenario wurden bereits sechs Storyboards (A bis F) geplant, um die Variablen W, X, Y und Z zu animieren, aber nur A und B haben mit der Wiedergabe begonnen. Für das neue Storyboard mit der Bezeichnung G ist die längste zulässige Verzögerung auf die in der folgenden Abbildung gezeigte Dauer festgelegt.
Die Anwendung verfügt über registrierte Prioritätsvergleiche, die die folgende Logik enthalten:
- G kann nur C und E abbrechen, und nur, um Fehler zu verhindern.
- G kann nur A, C, E und F kürzen und nur, um Fehler zu verhindern.
- Jedes Storyboard kann jedes andere Storyboard komprimieren (die Komprimierung erfolgt immer nur, um Fehler zu verhindern).
Hinweis
Der Qualifizierer "nur zum Verhindern von Fehlern" bedeutet, dass die registrierten Prioritätsvergleiche nur dann S_OK zurückgeben, wenn der parameter priorityEffectUI_ANIMATION_PRIORITY_EFFECT_FAILURE ist. Weitere Informationen finden Sie in der IUIAnimationPriorityComparison::HasPriority-Methode .
Um G zu starten, bevor die längste zulässige Verzögerung abgelaufen ist, muss der Animations-Manager folgendes tun:
- Kürzen von F
- Abbrechen von E
Wenn E abgebrochen wird, werden D und F aufgedeckt und rückgängig machen zu ihren ursprünglichen Gliederungen:
Der Animations-Manager muss C nicht abbrechen oder kürzen, um einen Zeitplan zu planen, bevor die längste akzeptable Verzögerung abgelaufen ist, sodass die Besprechung von C und G bestimmt, wann G beginnt.
Nachdem G erfolgreich geplant wurde, kann die Dauer seiner Übergänge bestimmt werden, und der Rest seiner Gliederung ist daher bekannt. Die Gliederung kann sich jedoch ändern, wenn anschließend ein anderes Storyboard aus dem Zeitplan entfernt wird.
Betrachten Sie als zweites Beispiel ein Szenario wie das oben, jedoch mit einer kürzeren, für G angegebenen, längsten akzeptablen Verzögerung.
In diesem Fall werden die folgenden Aktionen ausgeführt:
- Kürzen von F
- Abbrechen von E
- Abbrechen von C
Außerdem muss der Animations-Manager D um den angezeigten Betrag komprimieren, damit G nach der längsten zulässigen Verzögerung und nicht später gestartet werden kann.
Um die relative Zeitdauer beizubehalten, werden A, B und F ebenfalls komprimiert.
Storyboards für nicht verwandte Variablen (nicht dargestellt) werden jedoch nicht komprimiert.
Auch hier ist die Gliederung von G jetzt bekannt und unterscheidet sich vom Ergebnis im ersten Szenario, da die Variablen unterschiedliche Werte haben, wenn G beginnt.
Zugehörige Themen
Feedback
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Issues stufenweise als Feedbackmechanismus für Inhalte abbauen und durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter https://aka.ms/ContentUserFeedback.
Feedback senden und anzeigen für