Vue d’ensemble du storyboard
Cette vue d’ensemble se concentre sur la façon dont les transitions et les storyboards sont utilisés dans l’animation Windows. Pour obtenir une vue d’ensemble des composants de l’animation Windows, consultez Vue d’ensemble de l’animation Windows.
Cette rubrique contient les sections suivantes :
Transitions
Une transition définit la façon dont une variable d’animation unique change sur un intervalle de temps particulier. L’animation Windows comprend une bibliothèque de transitions courantes que les développeurs peuvent appliquer à une ou plusieurs variables d’animation. Différents types de transitions ont différents ensembles de paramètres, qui peuvent inclure la valeur de la variable à la fin de la transition, la durée de la transition ou des quantités propres à la fonction mathématique sous-jacente, telles que l’accélération ou la plage d’oscillation.
Toutes les transitions partagent deux paramètres implicites : la valeur initiale et la vitesse initiale (pente) de la fonction mathématique. Elles peuvent être spécifiées explicitement par l’application, mais sont généralement définies par le gestionnaire d’animations sur la valeur et la vitesse de la variable d’animation au début de la transition.
Bibliothèque de transition
Les transitions suivantes sont actuellement fournies par la bibliothèque de transition. Si une application nécessite un effet qui ne peut pas être spécifié à l’aide de la bibliothèque de transition, les développeurs peuvent créer d’autres types de transitions en implémentant un interpolateur personnalisé pour l’application ou en utilisant une bibliothèque de transition d’un tiers.
| Nom de la transition | Description |
|---|---|
| accélération-décélération |
La variable d’animation s’accélère, puis ralentit sur une durée donnée. |
| constant |
La variable d’animation reste à sa valeur initiale tout au long de la transition. |
| cubiques |
La variable d’animation passe de sa valeur initiale à une valeur finale spécifiée, avec une vitesse finale spécifiée, sur une durée donnée. |
| Discret |
La variable d’animation reste à sa valeur initiale pendant un délai spécifié, bascule instantanément vers une valeur finale spécifiée et reste à cette valeur pendant une durée donnée. |
| Instantanée |
La variable d’animation passe instantanément de sa valeur actuelle à une valeur finale spécifiée. |
| linear |
La variable d’animation passe linéairement de sa valeur initiale à une valeur finale spécifiée sur une durée donnée. |
| linéaire à partir de la vitesse |
La variable d’animation passe linéairement de sa valeur initiale à une valeur finale spécifiée avec une vitesse spécifiée. |
| parabolique de l’accélération |
La variable d’animation passe de sa valeur initiale à une valeur finale spécifiée, avec une vitesse finale spécifiée, en modifiant sa vitesse avec une accélération spécifiée. |
| Inversion |
La variable change de direction sur une durée donnée. La valeur finale sera la même que la valeur initiale et la vitesse finale sera la valeur négative de la vitesse initiale. |
| sinusoïal de la plage |
La variable oscille dans une plage de valeurs donnée, avec une période d’oscillation spécifiée, pour une durée donnée. |
| sinusoïal de la vitesse |
La variable oscille avec une période d’oscillation spécifiée, pour une durée donnée. L’amplitude de l’oscillation est déterminée par la vitesse initiale de la variable. |
| arrêt lisse |
La variable d’animation arrive à un arrêt lisse à une valeur finale spécifiée, dans une durée maximale. |
Le tableau suivant contient des illustrations pour chacune de ces transitions.
| Illustrations |
|---|
     |
   |
   |
 |
Transitions personnalisées
Un interpolateur définit la fonction mathématique qui détermine comment une variable d’animation change au fil du temps à mesure qu’elle progresse de sa valeur initiale à une valeur finale. Chaque transition dans la bibliothèque de transition a un objet interpolateur associé qui est fourni par le système et implémente la fonction interpolateur. Si une application nécessite un effet qui ne peut pas être spécifié à l’aide de la bibliothèque de transition, elle peut implémenter une ou plusieurs transitions personnalisées en implémentant un objet interpolateur pour chaque nouvelle transition. Les objets Interpolator ne peuvent pas être utilisés directement par les applications et doivent être encapsulés dans une transition associée. Une fabrique de transition est utilisée pour générer des transitions à partir d’un objet interpolateur. Pour plus d’informations, consultez IUIAnimationInterpolator et IUIAnimationTransitionFactory .
Notez que la plupart des applications auront toutes les transitions dont elles ont besoin à l’aide de la bibliothèque de transition et n’ont donc pas besoin d’implémenter d’interpolateur.
Storyboards
Un storyboard est une collection de transitions appliquées à une ou plusieurs variables d’animation au fil du temps. Les transitions dans un storyboard sont garanties de rester synchronisées les unes par rapport aux autres, et le storyboard est planifié ou annulé en tant qu’unité. Après avoir créé les transitions souhaitées, une application crée un storyboard à l’aide du gestionnaire d’animations, ajoute les transitions au storyboard, configure le storyboard de manière appropriée et planifie sa lecture dès que possible. Le gestionnaire d’animations détermine l’heure de début réelle du storyboard, car il peut y avoir des conflits avec d’autres storyboards qui animent actuellement les mêmes variables.
La durée globale d’un storyboard dépend de la durée des transitions dans le storyboard. La durée d’une transition n’a pas besoin d’être fixe; elle peut être déterminée par la valeur et la vélocité des variables animées au début de la transition. Ainsi, la durée d’un storyboard peut également dépendre de l’état des variables qu’il anime.
Les exemples suivants supposent qu’un gestionnaire d’animations, une bibliothèque de transition et un minuteur ont été créés. Pour plus d’informations, consultez Créer les objets d’animation principaux. Les exemples supposent également que l’application a créé trois variables d’animation (X, Y et Z) à l’aide de la méthode IUIAnimationManager::CreateAnimationVariable et cinq transitions (T1, T2, T3, T4 et T5) à l’aide de l’une des méthodes de l’interface IUIAnimationTransitionLibrary .
- Création d’un storyboard simple
- Utilisation d’une durée de Context-Sensitive
- Création d’un storyboard plus complexe
- Utilisation d’images clés
- Conservation des variables
- Planification d’un storyboard
Création d’un storyboard simple
Pour créer un storyboard simple, utilisez la méthode IUIAnimationManager::CreateStoryboard pour créer un storyboard, la méthode IUIAnimationTransitionLibrary::CreateLinearTransition pour créer une transition linéaire, T1, et la méthode IUIAnimationStoryboard::AddTransition pour appliquer la transition T1 à la variable X et ajouter la transition résultante au storyboard.
Ce processus génère un storyboard simple, comme illustré dans la figure suivante. Le storyboard contient une transition, T1, de sorte que la valeur de la variable X change linéairement sur une durée fixe.
Notez que pour un scénario aussi simple, une autre option consiste à utiliser la méthode IUIAnimationManager::ScheduleTransition .
Utilisation d’une durée de Context-Sensitive
Bien que certaines transitions aient une durée fixe, la durée d’autres dépend de la valeur initiale ou de la vitesse de la variable animée au début de la transition. Par exemple, la méthode IUIAnimationTransitionLibrary::CreateLinearTransitionFromSpeed crée une transition dont la durée est proportionnelle à la différence entre la valeur initiale de la variable d’animation et la valeur finale spécifiée. Dans cette illustration et dans les illustrations restantes, ces transitions avec des durées arbitraires sont affichées avec un point d’interrogation (?), et leurs durées réelles sont déterminées lorsque le storyboard est lu.
Création d’un storyboard plus complexe
Après avoir créé un storyboard et ajouté une transition unique, T1, vous pouvez ajouter une deuxième transition pour la variable X en appelant à nouveau la méthode IUIAnimationStoryboard::AddTransition , mais avec T2 au lieu de T1.
En supposant que la transition T2 a une durée qui respecte le contexte, le storyboard contient maintenant deux transitions de suite de durée arbitraire affectant la variable X.
L’appel d’AddTransition avec la variable Y et la transition T3 ajoute une troisième transition au début du storyboard. Selon les valeurs de X et Y lorsque le storyboard est lu, T3 peut se terminer après T1 ou même après T2.
Utilisation d’images clés
Pour ajouter une transition à un décalage par rapport au début du storyboard, vous devez d’abord ajouter une image clé. Les images clés représentent des instants dans le temps et, par elles-mêmes, n’ont aucun effet sur le comportement du storyboard. Chaque storyboard a une image clé implicite représentant le début du storyboard, UI_ANIMATION_KEYFRAME_STORYBOARD_START ; Vous pouvez ajouter de nouvelles images clés à des décalages à partir du début en appelant la méthode IUIAnimationStoryboard::AddKeyframeAtOffset avec UI_ANIMATION_KEYFRAME_STORYBOARD_START.
Le décalage auquel vous ajoutez une image clé est toujours relatif à une autre image clé. Le diagramme suivant montre le résultat de l’ajout de keyframe1 et de la transition T4, qui est appliqué à la variable Z, aligné avec keyframe1 et créé avec une durée fixe. Bien sûr, comme les durées des autres transitions ne sont pas encore connues, T4 n’est peut-être pas la dernière transition à se terminer.
Les images clés peuvent également être placées aux extrémités des transitions, à l’aide de la méthode IUIAnimationStoryboard::AddKeyframeAfterTransition . Le diagramme suivant montre le résultat de l’ajout de keyframe2 après T1 et de keyframe3 après T2.
Étant donné que les durées de T1 et T2 ne sont pas connues tant que le storyboard n’est pas lu, les décalages de l’image clé2 et de l’image clé3 ne sont pas déterminés jusqu’alors. Par conséquent, keyframe2 et même keyframe3 peuvent se produire avant le keyframe1.
Le début et la fin d’une transition peuvent être alignés sur les images clés à l’aide de la méthode IUIAnimationStoryboard::AddTransitionBetweenKeyframes . Le diagramme suivant montre le résultat de l’ajout d’une cinquième transition, T5, sur la variable Y, entre keyframe2 et keyframe3. Cela modifie la durée de T5, ce qui la rend plus longue ou plus courte en fonction des décalages relatifs de l’image clé2 et de l’image clé3.
Conservation des variables
Si T4 se termine après T2 et T5, le storyboard cesse d’animer les variables X et Y, ce qui les rend disponibles pour que d’autres storyboards soient animés. Toutefois, l’application peut appeler la méthode IUIAnimationStoryboard::HoldVariable pour demander que le storyboard contienne tout ou partie des variables qu’il anime à leurs valeurs finales jusqu’à ce que le storyboard soit terminé. Le diagramme suivant montre le résultat de la conservation de X et Z lorsque T4 se termine en dernier. Notez que le storyboard conserve X à sa valeur finale jusqu’à ce que le storyboard soit terminé. La conservation n’a aucun effet sur Z, car le storyboard se termine à la fin de T4.
Même si Y n’est pas détenu par ce storyboard, sa valeur ne change pas une fois T5 terminée, sauf si un autre storyboard l’anime. Étant donné que Y n’est pas conservé, tout autre storyboard, quelle que soit la priorité, peut animer Y une fois que T5 est terminé. En revanche, comme X est conservé, un storyboard de priorité inférieure ne peut pas animer X tant que ce storyboard n’est pas terminé.
Toutes ces illustrations ont supposé un ensemble arbitraire de valeurs actuelles pour les variables lorsque le storyboard commence à jouer. Si d’autres valeurs sont rencontrées, les durées des transitions contextuelles sont susceptibles d’être différentes, comme illustré dans l’illustration suivante.
Dans ce scénario, T5 commence avant la fin de T3, et T3 est donc réduit. Étant donné que T4 se termine avant T2 et T5, la valeur de Z est conservée jusqu’à la fin du storyboard. En général, les valeurs et les vitesses des variables lorsqu’un storyboard commence à jouer peuvent affecter l’ordre des images clés, ainsi que la longueur et la forme globales du storyboard.
Planification d’un storyboard
Lors de la planification d’un storyboard, son heure de début est déterminée par son contour et les contours des storyboards qui sont actuellement dans la planification. Plus précisément, le premier et le dernier moment où le storyboard anime chaque variable individuelle déterminent si et quand deux storyboards entrent en collision, mais les détails internes des transitions à l’intérieur ne sont pas importants.
L’illustration suivante montre le contour d’un storyboard avec cinq transitions animant trois variables.
L’une des pierres angulaires de la plateforme d’animation Windows est sa prise en charge pour permettre à une animation de se terminer avant qu’une autre ne commence, si nécessaire. Bien que cela élimine de nombreux problèmes logiques, il introduit également une latence arbitraire dans l’interface utilisateur. Pour ce faire, les applications peuvent spécifier le délai acceptable le plus long pour le démarrage d’un storyboard, à l’aide de la méthode IUIAnimationStoryboard::SetLongestAcceptableDelay , et le gestionnaire d’animation utilise ces informations pour planifier le storyboard avant l’expiration de la période de latence spécifiée. Lorsqu’un storyboard est planifié, le gestionnaire d’animation détermine si d’autres storyboards doivent d’abord être annulés, rognés, terminés et/ou compressés.
Une application peut inscrire un gestionnaire qui sera appelé lorsque le status d’un storyboard change. Cela permet à l’application de répondre lorsque le storyboard démarre la lecture, s’exécute jusqu’à l’achèvement, est supprimé entièrement de la planification ou est empêché de se terminer en raison d’une interruption par un storyboard de priorité plus élevée. Pour identifier les storyboards passés aux gestionnaires d’événements de storyboard (ou les comparaisons de priorités), une application peut utiliser la méthode IUIAnimationStoryboard::SetTag pour appliquer des balises aux storyboards, comme celles qui peuvent être utilisées pour identifier des variables. Comme pour la réutilisation des storyboards, les développeurs doivent faire preuve de prudence lors de l’utilisation d’étiquettes pour identifier les storyboards et s’assurer que des ambiguïtés ne se produisent pas lorsque les actions de l’utilisateur entraînent la mise en file d’attente de nombreux storyboards.
Les exemples suivants illustrent deux variantes d’une tentative de planification du storyboard créé dans les sections précédentes de cette rubrique.
Dans ce scénario, six storyboards, de A à F, ont déjà été planifiés pour animer les variables W, X, Y et Z, mais seuls A et B ont commencé à jouer. Le nouveau storyboard, intitulé G, a son délai acceptable le plus long défini sur la durée indiquée dans l’illustration suivante.
L’application a inscrit des comparaisons de priorité qui incluent la logique suivante :
- G peut annuler uniquement C et E, et uniquement pour éviter l’échec.
- G peut couper uniquement A, C, E et F, et uniquement pour éviter les défaillances.
- N’importe quel storyboard peut compresser n’importe quel autre storyboard (la compression est toujours effectuée uniquement pour empêcher l’échec).
Notes
Le qualificateur « uniquement pour éviter l’échec » signifie que les comparaisons de priorité inscrites retournent S_OK uniquement lorsque le paramètre priorityEffect est UI_ANIMATION_PRIORITY_EFFECT_FAILURE. Pour plus d’informations, consultez la méthode IUIAnimationPriorityComparison::HasPriority .
Pour démarrer G avant que le délai acceptable le plus long ne soit écoulé, le gestionnaire d’animations doit effectuer les opérations suivantes :
- Découper F
- Annuler E
Lorsque E est annulé, D et F sont découverts et reviennent à leurs contours d’origine :
Le gestionnaire d’animation n’a pas besoin d’annuler ou de couper C pour planifier avant que son délai acceptable le plus long soit écoulé, de sorte que la réunion de C et G détermine le moment où G démarre.
Une fois que G a été correctement planifié, les durées de ses transitions peuvent être déterminées et le reste de son plan est donc connu. Toutefois, le plan peut changer si un autre storyboard est ensuite supprimé de la planification.
Comme deuxième exemple, considérez un scénario comme celui ci-dessus, mais avec un délai acceptable plus long plus court spécifié pour G.
Dans ce cas, les actions suivantes sont effectuées :
- Découper F
- Annuler E
- Annuler C
En outre, le gestionnaire d’animations doit compresser D selon la quantité indiquée pour permettre à G de démarrer après son délai acceptable le plus long, et non plus après.
Pour conserver leur minutage relatif, A, B et F sont également compressés.
Toutefois, les storyboards sur des variables non liées (non affichées) ne sont pas compressés.
Encore une fois, le contour de G est maintenant connu et est différent du résultat dans le premier scénario, car les variables ont des valeurs différentes lorsque G commence.
Rubriques connexes
Commentaires
Bientôt disponible : Tout au long de 2024, nous allons supprimer progressivement GitHub Issues comme mécanisme de commentaires pour le contenu et le remplacer par un nouveau système de commentaires. Pour plus d’informations, consultez https://aka.ms/ContentUserFeedback.
Envoyer et afficher des commentaires pour