Vue d’ensemble des storyboards
Cette vue d’ensemble se concentre sur la façon dont les transitions et les storyboards sont utilisés dans Windows Animation. Pour une vue d’ensemble des composants de Windows Animation, veuillez consulter la section Vue d’ensemble de Windows Animation.
Cette rubrique contient les sections suivantes :
Transitions
Une transition définit comment une seule variable d’animation change sur un intervalle de temps particulier. Windows Animation inclut 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 uniques à la fonction mathématique sous-jacente, comme l’accélération ou l’amplitude de l’oscillation.
Toutes les transitions partagent deux paramètres implicites : la valeur initiale et la vitesse initiale (pente) de la fonction mathématique. Ces paramètres peuvent être spécifiés explicitement par l’application, mais sont généralement définis par le gestionnaire d’animation à la valeur et à la vitesse de la variable d’animation au début de la transition.
Bibliothèque de transitions
Les transitions suivantes sont actuellement fournies par la bibliothèque de transitions. Si une application nécessite un effet qui ne peut pas être spécifié en utilisant la bibliothèque de transitions, 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 transitions tierce.
| Nom de la transition | Description |
|---|---|
| accélération-décélération |
La variable d’animation accélère puis ralentit sur une durée donnée. |
| constant |
La variable d’animation reste à sa valeur initiale pendant toute la transition. |
| cubique |
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. |
| discrète |
La variable d’animation reste à sa valeur initiale pendant un temps de délai spécifié, puis passe instantanément à une valeur finale spécifiée et reste à cette valeur pendant un temps de maintien donné. |
| instantanée |
La variable d’animation change 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 en fonction 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 en fonction 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, changeant 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 l’opposée de la vitesse initiale. |
| sinusoïdale en fonction de l’amplitude |
La variable oscille dans une plage de valeurs donnée, avec une période d’oscillation spécifiée, pendant une durée donnée. |
| sinusoïdale en fonction de la vitesse |
La variable oscille avec une période d’oscillation spécifiée, pendant une durée donnée. L’amplitude de l’oscillation est déterminée par la vitesse initiale de la variable. |
| arrêt en douceur |
La variable d’animation s’arrête en douceur à une valeur finale spécifiée, dans une durée maximale. |
La table suivante 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 en progressant de sa valeur initiale à une valeur finale. Chaque transition de la bibliothèque de transitions a un objet interpolateur associé qui est fourni par le système et implémente la fonction d’interpolateur. Si une application nécessite un effet qui ne peut pas être spécifié en utilisant la bibliothèque de transitions, elle peut implémenter une ou plusieurs transitions personnalisées en implémentant un objet interpolateur pour chaque nouvelle transition. Les objets interpolateurs ne peuvent pas être utilisés directement par les applications et doivent plutôt être encapsulés dans une transition associée. Une fabrique de transitions est utilisée pour générer des transitions à partir d’un objet interpolateur. Voir IUIAnimationInterpolator et IUIAnimationTransitionFactory pour plus de détails.
Notez que la plupart des applications auront toutes les transitions dont elles ont besoin en utilisant la bibliothèque de transitions, et n’auront donc pas besoin d’implémenter un 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 programmé ou annulé en tant qu’unité. Après avoir créé les transitions souhaitées, une application crée un storyboard en utilisant le gestionnaire d’animation, ajoute les transitions au storyboard, configure le storyboard de manière appropriée et le programme pour qu’il soit lu dès que possible. Le gestionnaire d’animation détermine le temps de début réel du storyboard, car il peut y avoir des conflits avec d’autres storyboards animant actuellement les mêmes variables.
La durée globale d’un storyboard dépend des durées des transitions à l’intérieur du storyboard. La durée d’une transition ne doit pas nécessairement être fixe ; elle peut être déterminée par la valeur et la vitesse 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’animation, une bibliothèque de transitions 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) en utilisant la méthode IUIAnimationManager::CreateAnimationVariable, et cinq transitions (T1, T2, T3, T4 et T5) en utilisant l’une des méthodes de l’interface IUIAnimationTransitionLibrary.
- Construire un storyboard simple
- Utiliser une durée contextuelle
- Construire un storyboard plus complexe
- Utiliser des images clés
- Maintenir des variables
- Planifier un storyboard
Construire un storyboard simple
Pour construire un storyboard simple, utilisez la méthode IUIAnimationManager::CreateStoryboard pour créer un nouveau 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 donne 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 tel scénario simple, une option alternative est d’utiliser la méthode IUIAnimationManager::ScheduleTransition.
Utiliser une durée contextuelle
Bien que certaines transitions aient une durée fixe, la durée d’autres transitions 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 les illustrations restantes, de telles transitions avec des durées arbitraires sont montrées avec un point d’interrogation (?), et leurs durées réelles sont déterminées lorsque le storyboard est lu.
Construire un storyboard plus complexe
Après avoir créé un storyboard et ajouté une seule transition, 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 ait une durée contextuelle, le storyboard contient désormais deux transitions consécutives de durée arbitraire affectant la variable X.
Appeler AddTransition à nouveau avec la variable Y et la transition T3 ajoute une troisième transition au début du storyboard. En fonction des valeurs de X et Y lorsque le storyboard est lu, T3 peut se terminer après T1 ou même après T2.
Utiliser des 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 n’ont par elles-mêmes 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 par rapport au 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, appliquée à la variable Z, alignée avec keyframe1, et créée avec une durée fixe. Bien sûr, comme les durées des autres transitions ne sont pas encore connues, T4 pourrait ne pas être la dernière transition à se terminer.
Les images clés peuvent également être placées aux extrémités des transitions, en utilisant 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 avant que le storyboard soit lu, les décalages de keyframe2 et keyframe3 ne sont pas non plus déterminés avant cela. En conséquence, keyframe2 et même keyframe3 peuvent se produire plus tôt que keyframe1.
Le début et la fin d’une transition peuvent être alignés avec des images clés en utilisant 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, la rendant plus longue ou plus courte en fonction des décalages relatifs de keyframe2 et keyframe3.
Maintenir des variables
Si T4 se termine après T2 et T5, le storyboard arrête d’animer les variables X et Y, les rendant disponibles pour d’autres storyboards à animer. Cependant, l’application peut appeler la méthode IUIAnimationStoryboard::HoldVariable pour demander au storyboard de maintenir certaines ou toutes les variables qu’il anime à leurs valeurs finales jusqu’à ce que le storyboard soit terminé. Le diagramme suivant montre le résultat de la maintenance de X et Z lorsque T4 se termine en dernier. Remarquez que le storyboard maintient X à sa valeur finale jusqu’à ce que le storyboard soit terminé. La maintenance n’a aucun effet sur Z car le storyboard se termine lorsque T4 se termine.
Même si Y n’est pas maintenu par ce storyboard, sa valeur ne change pas après que T5 soit terminé à moins qu’un autre storyboard ne l’anime. Comme Y n’est pas maintenu, tout autre storyboard, indépendamment de la priorité, peut animer Y après que T5 soit terminé. En revanche, comme X est maintenu, un storyboard de priorité inférieure ne peut pas animer X jusqu’à ce que ce storyboard soit terminé.
Toutes ces illustrations ont supposé un ensemble arbitraire de valeurs actuelles pour les variables lorsque le storyboard commence à être lu. Si d’autres valeurs sont rencontrées, les durées des transitions contextuelles sont susceptibles d’être différentes, comme montré dans l’illustration suivante.
Dans ce scénario, T5 commence avant que T3 ne soit terminé, et T3 est donc tronqué. Comme T4 se termine plus tôt que T2 et T5, la valeur de Z est maintenue jusqu’à la fin du storyboard. En général, les valeurs et les vitesses des variables lorsque le storyboard commence à être lu peuvent affecter l’ordre des images clés et la longueur et la forme globales du storyboard.
Planifier 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 le planning. Plus précisément, les premiers et derniers moments où le storyboard anime chaque variable individuelle déterminent si et quand deux storyboards se chevauchent, 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.
Une pierre angulaire de la plateforme Windows Animation est son support pour laisser une animation se terminer avant qu’une autre ne commence, lorsque cela est nécessaire. Bien que cela élimine de nombreux problèmes logiques, cela introduit également une latence arbitraire dans l’interface utilisateur. Pour y remédier, les applications peuvent spécifier le délai acceptable le plus long pour le début d’un storyboard, en utilisant la méthode IUIAnimationStoryboard::SetLongestAcceptableDelay, et le gestionnaire d’animation utilise cette information pour planifier le storyboard avant la fin 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, tronqués, conclus et/ou compressés.
Une application peut enregistrer un gestionnaire qui sera appelé lorsque le statut d’un storyboard change. Cela permet à l’application de répondre lorsque le storyboard commence à être lu, s’exécute jusqu’à son achèvement, est complètement retiré du planning, ou est empêché de se terminer en raison d’une interruption par un storyboard de priorité supérieure. Pour identifier les storyboards passés aux gestionnaires d’événements de storyboard (ou comparaisons de priorité), une application peut utiliser la méthode IUIAnimationStoryboard::SetTag pour appliquer des étiquettes aux storyboards, similaires à celles qui peuvent être utilisées pour identifier les variables. Comme pour la réutilisation de storyboards, les développeurs doivent faire preuve de prudence lorsqu’ils utilisent des étiquettes pour identifier les storyboards, et s’assurer qu’il n’y a pas d’ambiguïtés lorsque les actions des utilisateurs entraînent la mise en file d’attente de nombreux storyboards.
Les exemples suivants montrent deux variations d’une tentative de planification du storyboard construit 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é à être lus. Le nouveau storyboard, étiqueté G, a son délai acceptable le plus long défini à la durée indiquée dans l’illustration suivante.
L’application a enregistré des comparaisons de priorité qui incluent la logique suivante :
- G peut annuler uniquement C et E, et seulement pour éviter un échec.
- G peut tronquer uniquement A, C, E et F, et seulement pour éviter un échec.
- Tout storyboard peut compresser tout autre storyboard (la compression est toujours effectuée uniquement pour éviter un échec).
Remarque
Le qualificateur « uniquement pour éviter un échec » signifie que les comparaisons de priorité enregistrées renvoient S_OK uniquement lorsque le paramètre priorityEffect est UI_ANIMATION_PRIORITY_EFFECT_FAILURE. Voir la méthode IUIAnimationPriorityComparison::HasPriority pour plus de détails.
Pour démarrer G avant que le délai acceptable le plus long ne soit écoulé, le gestionnaire d’animation doit faire ce qui suit :
- Tronquer 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 tronquer C pour planifier avant que son délai acceptable le plus long ne soit écoulé, donc la rencontre de C et G détermine quand G commence.
Après que G a été planifié avec succès, les durées de ses transitions peuvent être déterminées, et le reste de son contour est donc connu. Cependant, le contour peut changer si un autre storyboard est ensuite retiré du planning.
Comme deuxième exemple, considérons un scénario similaire à celui ci-dessus, mais avec un délai acceptable plus court spécifié pour G.
Dans ce cas, les actions suivantes sont entreprises :
- Tronquer F
- Annuler E
- Annuler C
De plus, le gestionnaire d’animation doit compresser D de la quantité indiquée pour permettre à G de démarrer après son délai acceptable le plus long, et pas plus tard.
Pour préserver leur synchronisation relative, A, B et F sont également compressés.
Cependant, les storyboards sur des variables non liées (non affichées) ne seraient 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.