Storyboard-Übersicht
Diese Übersicht konzentriert sich auf die Verwendung von Übergängen und Storyboards in Windows Animation. Eine Übersicht über die Komponenten von Windows Animation finden Sie unter Übersicht über Windows Animation.
Dieses Thema enthält folgende Abschnitte:
Übergänge
Ein Übergang definiert, wie sich eine einzelne Animationsvariable über ein bestimmtes Zeitintervall ändert. Windows Animation enthält eine Bibliothek allgemeiner Übergänge, die Entwickler auf eine oder mehrere Animationsvariablen anwenden können. Verschiedene Arten von Übergängen verfügen über unterschiedliche Parametersätze, darunter möglicherweise der Wert der Variablen nach Abschluss des Übergangs, die Dauer des Übergangs oder Werte, die für die zugrunde liegende mathematische Funktion eindeutig sind, wie etwa die Beschleunigung oder der Schwingungsbereich.
Alle Übergänge haben zwei implizite Parameter gemeinsam: den Anfangswert und die Anfangsgeschwindigkeit (Steigung) der mathematischen Funktion. Diese können von der Anwendung explizit angegeben werden, werden jedoch 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 eines Drittanbieters verwenden.
| Übergangsname | Beschreibung |
|---|---|
| accelerate-decelerate |
Die Animationsvariable wird über eine bestimmte Dauer beschleunigt und dann verlangsamt. |
| Konstante |
Die Animationsvariable bleibt während des gesamten Übergangs auf ihrem Anfangswert. |
| cubic |
Die Animationsvariable ändert sich innerhalb einer bestimmten Dauer von ihrem Anfangswert zu einem angegebenen Endwert mit einer angegebenen Endgeschwindigkeit. |
| discrete |
Die Animationsvariable bleibt für eine angegebene Verzögerungszeit auf ihrem Anfangswert, wechselt dann sofort zu einem angegebenen Endwert und bleibt für eine bestimmte Haltezeit auf diesem Wert. |
| instantaneous |
Die Animationsvariable wird sofort von ihrem aktuellen Wert in einen angegebenen Endwert geändert. |
| linear |
Die Animationsvariable wechselt innerhalb einer bestimmten Dauer linear von ihrem Anfangswert zu einem angegebenen Endwert. |
| linear from speed |
Die Animationsvariable wechselt linear von ihrem Anfangswert zu einem angegebenen Endwert mit einer angegebenen Geschwindigkeit. |
| parabolic from acceleration |
Die Animationsvariable wechselt von ihrem Anfangswert zu einem angegebenen Endwert mit einer angegebenen Endgeschwindigkeit und ändert ihre Geschwindigkeit mit einer angegebenen Beschleunigung. |
| reversal |
Die Variable ändert die Richtung über eine bestimmte Dauer. Der Endwert entspricht dem Anfangswert, und die endgültige Geschwindigkeit ist der negative Wert der Anfangsgeschwindigkeit. |
| sinusoidal from range |
Die Variable schwingt innerhalb eines gegebenen Wertebereichs mit einer festgelegten Schwingungsdauer für eine bestimmte Dauer. |
| sinusoidal from velocity |
Die Variable schwingt mit einer festgelegten Schwingungsdauer und für eine bestimmte Dauer. Die Amplitude der Schwingung wird durch die Anfangsgeschwindigkeit der Variable bestimmt. |
| smooth stop |
Die Animationsvariable kommt bei einem angegebenen Endwert innerhalb einer maximalen Zeitspanne reibungslos zum Stillstand. |
Die folgende Tabelle enthält Abbildungen für jeden dieser Übergänge.
| Abbildungen |
|---|
     |
   |
   |
 |
Benutzerdefinierte Übergänge
Ein Interpolator definiert die mathematische Funktion, die bestimmt, wie sich eine Animationsvariable im Laufe der Zeit ändert, während sie vom Anfangswert zu einem endgültigen Wert wechselt. Jeder Übergang in der Übergangsbibliothek verfügt über ein zugehöriges Interpolatorobjekt, das vom System bereitgestellt wird und die Interpolatorfunktion implementiert. Wenn eine Anwendung einen Effekt erfordert, 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 von Anwendungen nicht direkt verwendet werden und müssen stattdessen in einen zugehörigen Übergang eingebettet 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 durch die Verwendung der Übergangsbibliothek über alle erforderlichen Übergänge verfügen und daher kein Interpolator implementiert werden muss.
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 auf jeden Fall relativ zueinander synchronisiert und das Storyboard wird als Einheit geplant oder abgebrochen. Nachdem die gewünschten Übergänge erstellt wurden, erstellt eine Anwendung mithilfe des Animations-Managers ein Storyboard, fügt die Übergänge zum Storyboard hinzu, konfiguriert das Storyboard entsprechend und plant seine Wiedergabe so bald wie möglich. 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 im Storyboard ab. Die Dauer eines Übergangs muss nicht festgelegt sein; sie kann durch den Wert und die Geschwindigkeit der animierten Variablen zu Beginn des Übergangs bestimmt werden. Daher kann die Dauer eines Storyboards auch vom Zustand der Variablen abhängen, die es animiert.
Die folgenden Beispiele setzen voraus, 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 (T1, T2, T3, T4, and T5) und fünf Übergänge (T1, T2, T3, T4 und T5) mithilfe der Methoden der IUIAnimationTransitionLibrary-Schnittstelle verwenden.
- Erstellen eines einfachen Storyboards
- Verwenden einer kontextabhängigen Dauer
- Erstellen eines komplexeren Storyboards
- Verwenden von Keyframes
- Halten von Variablen
- Planen eines Storyboards
Erstellen eines einfachen Storyboards
Verwenden Sie zum Erstellen eines einfachen Storyboards die IUIAnimationManager::CreateStoryboard-Methode, um ein neues Storyboard zu erstellen, die IUIAnimationTransitionLibrary::CreateLinearTransition-Methode, um einen linearen Übergang zu erstellen, T1, und die IUIAnimationStoryboard::AddTransition-Methode, um den T1-Übergang auf die Variable X anzuwenden und den resultierenden Übergang zum Storyboard hinzuzufügen.
Durch diesen Prozess entsteht 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 eine feste Zeitdauer ändert.
Beachten Sie, dass für ein solches einfaches Szenario eine alternative Option darin besteht, die IUIAnimationManager::ScheduleTransition-Methode zu verwenden.
Verwenden einer kontextabhängigen Dauer
Während einige Übergänge eine feste Dauer haben, hängt die Dauer anderer vom Anfangswert oder der Geschwindigkeit der animierten Variablen zu Beginn des Übergangs ab. 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 und den übrigen Abbildungen werden solche Übergänge mit beliebiger Dauer mit einem Fragezeichen (?) angezeigt und ihre tatsächliche Dauer wird bei der Wiedergabe des Storyboards bestimmt.
Erstellen eines komplexeren Storyboards
Nachdem Sie ein Storyboard erstellt und einen einzelnen Übergang hinzugefügt haben, können Sie einen zweiten Übergang für die X-Variable anfügen, indem Sie die IUIAnimationStoryboard::AddTransition-Methode erneut aufrufen, aber mit T2 anstelle von T1.
Unter der Annahme, dass der T2-Übergang eine kontextabhängige Dauer hat, enthält das Storyboard jetzt zwei aufeinanderfolgende Übergänge beliebiger Dauer, die sich auf die Variable X auswirken.
Beim erneuten Aufrufen von AddTransition mit Variable Y und Übergang T3 wird am Anfang des Storyboards ein dritter Übergang hinzugefügt. Abhängig von den X- und Y-Werten bei der Wiedergabe des Storyboards kann T3 nach T1 oder sogar nach T2 enden.
Verwenden von Keyframes
Um einen Übergang versetzt vom Anfang des Storyboards hinzuzufügen, müssen Sie zuerst einen Keyframe hinzufügen. Keyframes stellen Zeitpunkte dar und haben selbst keinen Einfluss 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 neue Keyframes an Offsets vom Startpunkt aus hinzufügen, indem Sie die IUIAnimationStoryboard::AddKeyframeAtOffset-Methode mit UI_ANIMATION_KEYFRAME_STORYBOARD_START aufrufen.
Der Offset, bei 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, der 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 an den Enden von Übergängen platziert werden, wobei die IUIAnimationStoryboard::AddKeyframeAfterTransition-Methode verwendet wird. 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 bei der Wiedergabe des Storyboards bekannt ist, werden auch die Offsets von Keyframe2 und Keyframe3 erst dann bestimmt. Folglich können Keyframe2 und sogar Keyframe3 vor Keyframe1 auftreten.
Sowohl der Anfang als auch das Ende eines Übergangs können mit Keyframes ausgerichtet werden, indem die IUIAnimationStoryboard::AddTransitionBetweenKeyframes-Methode verwendet wird. Das folgende Diagramm zeigt das Ergebnis des Hinzufügens eines fünften Übergangs, T5, zur Variable Y zwischen Keyframe2 und Keyframe3. Dadurch wird die Dauer von T5 geändert und je nach dem relativen Offset von Keyframe2 und Keyframe3 länger oder kürzer gemacht.
Halten von Variablen
Wenn T4 nach T2 und T5 endet, stoppt das Storyboard die Animation der Variablen X und Y und macht sie für die Animation anderer Storyboards verfügbar. Die Anwendung kann jedoch die IUIAnimationStoryboard::HoldVariable-Methode aufrufen, um anzufordern, dass das Storyboard einige oder alle der animierten Variablen auf ihren endgültigen Werten hält, bis das Storyboard fertig ist. Das folgende Diagramm zeigt das Ergebnis des Haltens von X und Z, wenn T4 zuletzt abgeschlossen wird. Beachten Sie, dass das Storyboard X auf seinem Endwert hält, bis das Storyboard abgeschlossen ist. Das Halten hat keine Auswirkung auf Z, da das Storyboard endet, wenn T4 fertig ist.
Auch wenn Y nicht von diesem Storyboard gehalten wird, ändert sich sein Wert nach Abschluss von T5 nicht, es sei denn, ein anderes Storyboard animiert es. 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 abgeschlossen ist.
In allen diesen Abbildungen wurde ein beliebiger Satz aktueller Werte für die Variablen angenommen, wenn mit der Wiedergabe des Storyboards begonnen wird. Wenn andere Werte gefunden werden, ist die Dauer der kontextsensitiven Übergänge wahrscheinlich unterschiedlich, wie in der folgenden Abbildung dargestellt.
In diesem Szenario beginnt T5, bevor T3 beendet ist, und T3 wird daher gekürzt. Da T4 früher als T2 und T5 endet, bleibt der Wert von Z bis zum Ende des Storyboards erhalten. Im Allgemeinen können die Werte und Geschwindigkeiten von Variablen beim Start der Wiedergabe eines Storyboards die Reihenfolge der Keyframes sowie die Gesamtlänge und -form des Storyboards beeinflussen.
Planen eines Storyboards
Bei der Planung eines Storyboards wird dessen Startzeit durch dessen Gliederung und die Gliederungen der Storyboards bestimmt, die sich aktuell im Zeitplan befinden. Insbesondere der erste und der letzte Moment, in dem das Storyboard jede einzelne Variable animiert, bestimmen, ob und wann zwei Storyboards kollidieren, aber die internen Details der Übergänge darin sind nicht wichtig.
Die folgende Abbildung zeigt den Entwurf eines Storyboards mit fünf Übergängen, die drei Variablen animieren.
Ein Eckpfeiler der Windows Animation-Plattform ist die Möglichkeit, bei Bedarf eine Animation abzuschließen, bevor eine andere beginnt. Dadurch werden zwar viele logische Probleme beseitigt, es kommt jedoch auch zu willkürlichen Latenzen in der Benutzeroberfläche. Um dies zu beheben, können Anwendungen die längste akzeptable Verzögerung für ein Storyboard angeben, wobei die IUIAnimationStoryboard::SetLongestAcceptableDelay-Methode verwendet wird, und der Animations-Manager verwendet diese Informationen, um das Storyboard vor Ablauf des angegebenen Latenzzeitraums zu planen. Wenn ein Storyboard geplant wird, bestimmt der Animations-Manager, 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 der Status eines Storyboards ändert. Dadurch kann die Anwendung reagieren, wenn die Wiedergabe des Storyboards beginnt, bis zum Ende ausgeführt wird, vollständig aus dem Zeitplan entfernt wird oder die Ausführung aufgrund einer Unterbrechung durch ein Storyboard mit höherer Priorität verhindert wird. Um die Storyboards zu identifizieren, die an Storyboard-Eventhandler (oder Prioritätsvergleiche) übergeben werden, kann eine Anwendung die IUIAnimationStoryboard::SetTag-Methode verwenden, um Storyboards mit Tags zu versehen, ähnlich denen, die zur Identifizierung 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 gestellt werden.
Die folgenden Beispiele zeigen zwei Varianten eines Versuchs, das in den früheren Abschnitten dieses Themas erstellte Storyboard zu planen.
In diesem Szenario wurden bereits sechs Storyboards, A bis F, für die Animation der Variablen W, X, Y und Z geplant, aber nur A und B haben mit der Wiedergabe begonnen. Die längste zulässige Verzögerung des neuen Storyboards mit der Bezeichnung „G“ ist auf die in der folgenden Abbildung dargestellte Dauer eingestellt.
Die Anwendung verfügt über registrierte Prioritätsvergleiche, die die folgende Logik enthalten:
- G kann nur C und E abbrechen und dies nur zum Verhindern eines Fehlers.
- G kann nur A, C, E und F kürzen und nur um Fehler zu vermeiden.
- Jedes Storyboard kann jedes andere Storyboard komprimieren (die Komprimierung erfolgt immer nur, um Fehler zu vermeiden).
Hinweis
Der Qualifizierer "nur um Fehler zu vermeiden" bedeutet, dass die registrierten Prioritätsvergleiche nur dann S_OK zurückgeben, wenn der priorityEffect-Parameter UI_ANIMATION_PRIORITY_EFFECT_FAILURE ist. Weitere Informationen bietet die IUIAnimationPriorityComparison::HasPriority-Methode.
Um G zu starten, bevor die längste akzeptable Verzögerung abgelaufen ist, muss der Animations-Manager Folgendes tun:
- F kürzen
- E abbrechen
Wenn E abgebrochen wird, werden D und F aufgedeckt und auf ihre ursprünglichen Gliederungen zurückgesetzt:
Der Animations-Manager muss C nicht abbrechen oder kürzen, um zu planen, bevor die längste akzeptable Verzögerung abgelaufen ist. Daher bestimmt das Zusammentreffen von C und G, wann G startet.
Nachdem G erfolgreich geplant wurde, kann die Dauer seiner Übergänge bestimmt werden und der Rest seiner Gliederung ist somit bekannt. Die Gliederung kann sich jedoch ändern, wenn anschließend ein anderes Storyboard aus dem Zeitplan entfernt wird.
Als zweites Beispiel betrachten wir ein Szenario wie das oben genannte, allerdings mit einer kürzeren, längsten akzeptablen Verzögerung, die für G angegeben ist.
In diesem Fall werden folgende Maßnahmen ergriffen:
- F kürzen
- E abbrechen
- C abbrechen
Außerdem muss der Animations-Manager D um den angezeigten Betrag komprimieren, damit G nach der längsten akzeptablen Verzögerung und nicht später starten kann.
Um ihr relatives Timing beizubehalten, werden A, B und F ebenfalls komprimiert.
Storyboards für nicht verknüpfte Variablen (nicht angezeigt) würden jedoch nicht komprimiert.
Auch hier ist die Gliederung von G nun bekannt und unterscheidet sich vom Ergebnis im ersten Szenario, da die Variablen zum Start von G andere Werte haben.
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