Utilisation d’animations dans votre application (HTML)

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Utilisez les animations dans votre application JavaScript pour obtenir une expérience utilisateur fluide et rapide, conforme aux autres applications Windows. Les animations fournissent des transitions entre les états de l’interface utilisateur et donnent à l’utilisateur qui interagit avec votre application une sensation de réactivité. Les animations donnent à l’utilisateur des indications visuelles utiles, sans pour autant empiéter sur le fonctionnement de l’application ni détourner l’attention de l’utilisateur.

Pour télécharger un exemple qui illustre un grand nombre des concepts abordés dans cette rubrique, voir l’Exemple de bibliothèque d’animations HTML. Les exemples de code présentés dans cette rubrique sont tirés de cet exemple.

Feuille de route : comment cette rubrique s’articule-t-elle par rapport aux autres ? Voir :

• Feuille de route pour les applications du Windows Store en JavaScript

Sources d’animation

Certaines animations sont intégrées dans les contrôles Windows. Lorsque vous utilisez ces contrôles, vous obtenez leurs animations sans codage supplémentaire. Cependant, vous avez aussi la possibilité d’utiliser la bibliothèque des animations. Lorsque vous utilisez la bibliothèque d’animations, vous pouvez créer des animations personnalisées pour votre application tout en conservant l’apparence de Windows.

• Utilisations d’animations intégrées
• Utilisation de la bibliothèque d’animations

Utilisations d’animations intégrées

Certaines animations vous sont automatiquement proposées dans le cadre de Windows.

Animations système Windows

Certaines animations fournies par le système s’appliquent à toutes les fenêtres d’une application. Aucune action explicite n’est nécessaire de votre part pour obtenir ces animations système dans votre application. Cependant, il existe quelques points clés dont vous devez être conscient et qui sont présentés ici.

• Lancement d’une application
• Rotation et modifications de redimensionnement
• Entrée et sortie du clavier visuel

Lancement d’une application

Deux animations sont impliquées dans le lancement d’une application. La première animation montre le lancement de votre application entre sa sélection sur l’écran d’accueil et l’apparition de son écran de démarrage. La deuxième animation est un fondu enchaîné de l’écran de démarrage vers l’arrière-plan de votre application. Nous vous recommandons de configurer votre application de manière à ce qu’elle exécute également sa propre animation pour afficher sa première page de contenu une fois l’écran de démarrage disparu.

Rotation et modifications de redimensionnement

Lorsque votre application met à jour sa disposition en réponse à un changement d’orientation ou de taille, les animations système effectuent une transition fluide.

Entrée et sortie du clavier visuel

Le clavier visuel s’affiche automatiquement lorsqu’un contrôle d’entrée de texte reçoit le focus dans votre application. Par défaut, le contenu de votre application défile automatiquement pour garder le contrôle d’entrée visible à l’écran, si nécessaire. Aucune action spéciale n’est requise en provenance de votre application.

Contrôles Windows et contrôles HTML

Les contrôles suivants incluent des animations. Nous vous recommandons d’utiliser ces contrôles chaque fois que cela est possible.

• ListView
• App bar
• FlipView
• Flyout
• Dialog
• Context menu

Par ailleurs, lorsque vous utilisez des contrôles de formulaire HTML courants, comme des boutons, des cases à cocher et des menus déroulants, il est inutile de fournir des animations en réponse à des actions utilisateur telles qu’un clic ou un pointage sur un élément. Soit ces contrôles incluent déjà les animations nécessaires, soit ils ne nécessitent pas d’animations (ce qui est le cas s’ils utilisent un changement de couleur ou un autre indicateur visuel pour fournir un retour à l’utilisateur).

Le style pour tous ces éléments est appliqué automatiquement par le biais des feuilles de style en cascade (CSS) WinJS et des fichiers UI.js dans les modèles de projet Microsoft Visual Studio.

Utilisation de la bibliothèque d’animations

Vous pouvez ajouter des animations personnalisées à votre application à l’aide de la bibliothèque d’animations. La bibliothèque d’animations est un ensemble d’animations qui reflètent la conception des mouvements propres à Windows et Windows Phone. Ces animations sont accessibles aux développeurs qui peuvent les utiliser dans leurs applications par le biais des fonctions composant l’espace de noms WinJS.UI.Animation. Pour obtenir plus d’informations sur la bibliothèque d’animations, y compris des vidéos et des instructions pour chaque animation, voir Animation de votre interface utilisateur.

Vous devez fournir vos propres animations dans les cas suivants :

• Pour déplacer un contrôle entier
• Pour modifier le contenu de votre application
• Pour naviguer entre les pages de votre application

Toutes les animations fournies par le biais de la bibliothèque d’animations sont implémentées à l’aide d’animations CSS et de transitions CSS. Les animations de la bibliothèque d’animations animent les propriétés CSS « opacity » et « transform ».

• Utilisation des paramètres element et offset dans une fonction de la bibliothèque d’animations
• Types d’animation
• Planification d’animations
• Activation et désactivation d’animations

Utilisation des paramètres element et offset dans une fonction de la bibliothèque d’animations

La plupart des fonctions de la bibliothèque d’animations comprennent les mêmes paramètres qui sont utilisés de manière identique.

element

De nombreuses fonctions de la bibliothèque d’animations acceptent un élément DOM (Document Object Model) comme cible d’animation. Ce paramètre peut être exprimé des façons suivantes :

• Sous forme de la valeur spéciale « undefined », ce qui signifie que l’animation ne possède pas une telle cible
• Sous forme d’un objet unique
• Sous forme d’un tableau JavaScript (éventuellement vide) d’éléments
• Sous forme d’un NodeList (par exemple, le résultat de querySelectorAll)
• Sous forme d’un HTMLCollection

offset

Le paramètre offset fait partie des animations et des transitions d’éléments qui incluent une translation. Ces animations déplacent l’élément soit de sa position de décalage vers sa position finale, soit de sa position actuelle vers sa position de décalage.

Certaines animations ont des décalages recommandés que vous pouvez utiliser en passant null ou undefined en tant qu’argument de décalage, ou bien en omettant entièrement l’argument. Dans la mesure du possible, utilisez ces décalages par défaut, car ils offrent les avantages suivants :

• De meilleures performances en matière d’animation
• Mise en miroir automatique dans les applications de droite à gauche
• Distance de translation recommandée par le concepteur automatiquement ajustée (dans les animations applicables) quand votre application est redimensionnée

À moins d’une exception de conception majeure, ces animations doivent toujours utiliser le décalage par défaut :

• enterPage
• exitPage
• enterContent
• exitContent
• showPopup
• updateBadge

Pour d’autres animations de la bibliothèque d’animations, le décalage peut être spécifique à l’application et basé sur votre propre interface utilisateur. Toutes les fonctions suivantes ont un décalage par défaut qui sera utilisé si aucun décalage spécifique n’est fourni, mais, généralement, vous spécifierez un décalage fondé sur la conception de votre application.

• showEdgeUI
• hideEdgeUI
• showPanel
• hidePanel
• dragBetweenEnter
• dragSourceEnd
• swipeReveal

Vous pouvez fournir le paramètre offset de plusieurs manières :

• Sous forme de la valeur spéciale « undefined » que vous pouvez spécifier explicitement dans l’appel ou implicitement en omettant la valeur du paramètre. La valeur undefined signifie que le décalage par défaut de l’animation est utilisé.

• Sous forme d’un objet JavaScript unique au format suivant :

  { top: string, left: string, rtlflip: true | false }

  Par exemple :

  { top: "12px", left: "0px", rtlflip: true }

  L’objet doit avoir des propriétés nommées top et left qui représentent le décalage appliqué au début de l’animation. Toutes les unités CSS valides peuvent être utilisées pour exprimer le décalage. Sous cette forme, le décalage s’applique à tous les éléments impliqués dans l’animation.

  Le paramètre rtlflip inverse les valeurs pour un alignement de droite à gauche. Il affecte le paramètre left et change son signe. Par exemple, 10px devient -10px. Ce paramètre est facultatif et peut être omis. S’il est omis, la valeur par défaut est false.

• Sous forme d’un tableau JavaScript (éventuellement vide) des objets {top: ..., left: ..., rtlflip: ...} traités ci-dessus. Dans ce cas, chaque objet dans le tableau s’applique à un élément unique de l’animation dans l’ordre donné ; le premier objet s’applique au premier élément, le deuxième objet au deuxième élément et ainsi de suite. Si le nombre d’éléments est supérieur au nombre d’objets dans ce tableau, le dernier élément du tableau s’applique alors à tous les éléments restants. La seule animation qui nécessite généralement un tableau d’enregistrements de décalage est dragBetweenEnter. Pour d’autres animations, il est généralement préférable de passer un enregistrement de décalage unique à utiliser sur tous les éléments.

Valeur de retour Promise

La valeur de retour pour toutes les animations de la bibliothèque d’animations est un objet Promise. La méthode done ou then de cet objet peut être utilisée pour déterminer quand l’animation est terminée. L’objet Promise fournit aussi une méthode cancel par le biais de laquelle vous pouvez annuler une animation en cours d’exécution.

Types d’animation

Il existe trois types d’animations dans la bibliothèque d’animations : les animations d’élément, les transitions d’élément et les transitions de disposition. Chaque type d’animation est associé à un modèle d’implémentation différent.

• Animations d’élément
• Transitions d’élément
• Transitions de disposition

Animations d’élément

Les animations d’élément sont implémentées sous forme d’animations CSS. Les animations d’élément ne modifient pas l’état de l’élément ; ces animations sont réalisées au-dessus de l’état actuel. Par exemple, l’animation showPanel est une animation d’élément qui fait glisser un panneau, tel qu’un volet des tâches, du bord de l’écran vers le centre. L’animation showPanel anime une translation du panneau d’un décalage fourni par le développeur vers la position actuelle de l’élément.

Pour utiliser une animation d’élément, définissez l’état final de l’élément. Dans l’exemple suivant, l’élément myPanel est déjà à son emplacement final avant d’être affiché, mais il n’est pas visible. Pour afficher le panneau, votre code affecte à l’opacité de l’élément du panneau la valeur 1, puis déclenche l’animation. Tant que ces étapes se produisent au sein de la même fonction, le changement d’opacité n’entre en vigueur qu’après le début de l’animation. Le panneau apparaît dans sa position de décalage, puis est animé vers sa position actuelle.

                                                
myPanel.style.opacity = "1";
WinJS.UI.Animation.showPanel(myPanel, { top: "0px", left: "350px" });                                       
                                            

Pour masquer le panneau, le processus est inversé. Tout d’abord, votre code doit appeler hidePanel qui anime le panneau de sa position actuelle vers la position de décalage. Une fois l’animation terminée, votre code affecte à l’opacité la valeur 0 pour masquer l’élément. Si vous omettez d’inclure le changement d’opacité, l’élément revient automatiquement à sa position d’origine à la fin de l’animation et reste visible à l’écran.

                                                
WinJS.UI.Animation.hidePanel(myPanel, { top: "0px", left: "350px" })
    .then(function () { myPanel.style.opacity = "0"; });                                       
                                            

Voici les animations d’élément dans la bibliothèque d’animations :

Fonction	Description
showEdgeUI	Fait glisser l’interface utilisateur latérale dans la vue. Anime la translation de l’élément cible d’une position de décalage vers sa position actuelle.
hideEdgeUI	Fait glisser l’interface utilisateur latérale hors de la vue. Anime la translation de l’élément cible de sa position actuelle vers une position de décalage.
showPanel	Fait glisser de grands panneaux latéraux dans la vue. Anime la translation de l’élément cible d’une position de décalage vers sa position actuelle.
hidePanel	Fait glisser de grands panneaux latéraux hors de la vue. Anime la translation de l’élément cible de sa position actuelle vers une position de décalage.
showPopup	Affiche l’interface utilisateur contextuelle sur la vue. Anime l’opacité à la valeur 1 et anime la translation d’une position de décalage vers sa position actuelle.
hidePopup	Masque l’interface utilisateur contextuelle. Anime l’opacité à la valeur 0.
updateBadge	Met à jour un badge numérique. Anime l’opacité à la valeur 1 et anime la translation d’une position de décalage vers sa position actuelle.

 

Transitions d’élément

Les transitions d’élément sont implémentées sous forme de transitions CSS. Les transitions d’élément changent l’état d’un élément en faisant passer la propriété CSS à la valeur définie par l’animation.

De nombreuses transitions d’élément de la bibliothèque d’animations viennent par paire et sont destinées à être utilisées ensemble. Le changement d’état appliqué par une animation de la paire est inversé par l’autre animation. Par exemple, l’animation fadeIn fait passer l’opacité de l’élément à la valeur 1, tandis que l’animation fadeOut fait passer l’opacité de l’élément à la valeur 0.

Certaines animations de la bibliothèque d’animations utilisent une combinaison d’animations d’élément et de transitions d’élément. Par exemple, l’animation enterContent fait passer l’opacité du contenu à la valeur 1 tout en animant une translation d’une position de décalage vers sa position actuelle.

Les animations de la bibliothèque d’animations qui utilisent soit des transitions d’élément, soit des transitions et des animations d’élément sont répertoriées ici :

Fonction	Description
fadeIn	Affiche les éléments ou les contrôles temporaires. Fait passer l’opacité à la valeur 1.
fadeOut	Masque les éléments ou les contrôles temporaires. Fait passer l’opacité à la valeur 0.
enterContent	Anime un élément unique ou un ensemble de contenus dans la vue. Fait passer l’opacité à la valeur 1 et anime la translation d’une position de décalage vers sa position actuelle.
exitContent	Anime un élément unique ou un ensemble de contenus hors de la vue. Fait passer l’opacité à la valeur 0.
enterPage	Anime l’intégralité du contenu d’une page dans la vue. Fait passer l’opacité à la valeur 1 et anime la translation d’une position de décalage vers sa position actuelle.
exitPage	Anime l’intégralité du contenu d’une page hors de la vue. Fait passer l’opacité à la valeur 0.
crossFade	Actualise une zone de contenu. Fait passer l’opacité à la valeur 1 sur le contenu entrant et à la valeur 0 sur le contenu sortant.
pointerDown	Donne un retour visuel lorsque l’utilisateur appuie ou clique sur une vignette. Fait passer l’échelle à une valeur légèrement inférieure.
pointerUp	Donne un retour visuel lorsque l’utilisateur relâche l’appui ou le clic sur une vignette. Rétablit l’échelle à sa valeur d’origine.
dragSourceStart	Donne un retour visuel lorsque l’utilisateur commence une opération de glisser-déplacer. Fait passer l’échelle à une valeur légèrement supérieure et réduit son opacité. Cette animation fait aussi passer l’échelle des éléments environnants (affectés) à une valeur légèrement inférieure.
dragSourceEnd	Donne un retour visuel lorsque l’utilisateur termine une opération de glisser-déplacer en déplaçant l’objet glissé. Inverse les animations effectuées par dragSourceStart.
dragBetweenEnter	Donne un retour visuel indiquant que les éléments situés actuellement sous l’objet glissé seront écartés si l’objet glissé est déplacé à cet endroit. Fait passer la propriété transform des objets affectés à un décalage.
dragBetweenLeave	Donne un retour visuel indiquant qu’un objet glissé a quitté la zone de déplacement en inversant l’animation effectuée par dragBetweenEnter.
swipeSelect	Fait passer une vignette à l’état sélectionné par un balayage par l’utilisateur. Fait passer l’opacité de la vignette à la valeur 0 tout en faisant passer l’opacité de l’élément visuel « selected » de décalage à la valeur 1.
swipeDeselect	Fait passer une vignette à l’état non sélectionné par un balayage par l’utilisateur. Fait passer l’opacité de l’élément visuel « selected » de décalage à la valeur 0 tout en faisant passer l’opacité de la vignette d’origine à la valeur 1.
swipeReveal	Donne une indication visuelle à l’utilisateur pour montrer qu’une vignette prend en charge l’interaction par balayage. Fait passer la translation de la position actuelle à un décalage.
turnstileBackwardIn	Fait pivoter un élément sur la page dans le sens des aiguilles d’une montre.
turnstileBackwardOut	Fait pivoter un élément hors de la page dans le sens des aiguilles d’une montre.
turnstileForwardIn	Fait pivoter un élément sur la page dans le sens inverse des aiguilles d’une montre.
turnstileForwardOut	Fait pivoter un élément hors de la page dans le sens inverse des aiguilles d’une montre.
slideDown	Fait glisser un élément en dehors par le bas de l’écran.
slideUp	Fait glisser un élément vers le haut de la vue à partir du bas de l’écran.
slideLeftIn	Fait glisser un élément vers l’intérieur à partir du côté gauche de l’écran.
slideLeftOut	Fait glisser un élément vers l’extérieur par le côté gauche de l’écran.
slideRightIn	Fait glisser un élément vers l’intérieur à partir du côté droit de l’écran.
slideRightOut	Fait glisser un élément vers l’extérieur par le côté droit de l’écran.
continuumBackwardIn	Réduit une page entrante lors de la mise à l’échelle, de la rotation et de la translation d’un élément entrant.
continuumBackwardOut	Met à l’échelle, fait pivoter et translate une page sortante lors de sa suppression.
continuumForwardIn	Affiche un élément à l’écran et agrandit la page entrante lors de la mise à l’échelle, de la rotation et de la translation de l’élément entrant.
continuumForwardOut	Supprime un élément de l’écran et réduit la page sortante lors de la mise à l’échelle, de la rotation et de la translation de l’élément sortant.

 

Transitions de disposition

Les animations de transition de disposition dans la bibliothèque d’animations sont plus complexes que les animations d’élément ou les transitions d’élément. Les animations de transition de disposition impliquent généralement plusieurs éléments et entraînent une modification de la disposition. Toutefois, les fonctions d’animation ne peuvent pas émettre d’hypothèses sur la façon dont la modification de la disposition se produit. Par exemple, dans l’animation reposition, un élément passe du point A au point B. Vous pouvez effectuer cette opération de nombreuses manières, par exemple en modifiant la largeur de l’élément, son décalage ou sa marge ou marge intérieure.

Pour les transitions de disposition, la bibliothèque d’animations fournit une fonction de création et retourne un objet avec une méthode .execute(). Le modèle d’appel pour ces animations est le suivant :

1. Appelez la fonction d’animation create appropriée. La position actuelle des éléments cibles est collectée.
2. L’application effectue ses modifications de disposition à sa manière.
3. L’application appelle la méthode execute sur l’objet retourné par la fonction create pour déclencher l’animation. Ceci a pour effet de collecter la nouvelle position des éléments cibles et de les animer de leur position d’origine vers la nouvelle position.
4. La méthode execute retourne un objet Promise qui peut être utilisé de la manière habituelle.

L’exemple suivant montre l’animation add-to-list qui est utilisée pour animer l’insertion d’un élément vers le haut d’une liste. Lorsque createAddToListAnimation est appelé, les positions de tous les éléments passés dans la collection affectedItems sont enregistrées. Tous les éléments dont la position peut être affectée par l’arrivée du nouvel élément sont inclus dans cette collection.

Une fois createAddToListAnimation appelé, l’exemple insère le nouvel élément en haut de la liste. Dans le code suivant, list est l’élément div qui contient les éléments de la liste. C’est l’appel de la méthode insertBefore de l’élément qui ajoute en fait newItem en haut de la liste. Cette insertion entraîne la modification de la position de tous les autres éléments dans la liste. Vous pouvez modifier la position de la collection affectedItems comme bon vous semble.

Enfin, l’exemple déclenche dans l’animation le déplacement du nouvel élément de liste en place en appelant la méthode execute de l’objet retourné par createAddToListAnimation.

                                                
var addToList = WinJS.UI.Animation.createAddToListAnimation(newItem, affectedItems);
list.insertBefore(newItem, list.firstChild);
addToList.execute();
                                            

Les fonctions de création d’animation de transition de disposition contenues dans la bibliothèque de l’animation sont répertoriées ici :

Fonction	Description
createExpandAnimation	Affiche d’autres informations inline. Déplace d’autres parties du contenu pour faire de la place si nécessaire.
createCollapseAnimation	Masque le contenu inline. Réduit d’autres parties du contenu si nécessaire.
createRepositionAnimation	Déplace un élément à un nouvel emplacement.
createAddToListAnimation	Ajoute un élément à une liste.
createDeleteFromListAnimation	Supprime un élément d’une liste.
createAddToSearchListAnimation	Ajoute un élément à une liste tout en filtrant les résultats de la recherche.
createDeleteFromSearchListAnimation	Supprime un élément d’une liste tout en filtrant les résultats de la recherche.
createPeekAnimation	Affiche une animation synoptique sur une vignette. Le contenu d’une vignette synoptique peut défiler vers le haut et vers le bas dans l’espace de la vignette afin d’afficher l’ensemble de la communication.

 

Planification d’animations

Pour configurer un scénario complexe, il est souvent nécessaire d’exécuter différentes animations sur différentes parties de l’interface utilisateur. Par exemple, lorsque vous supprimez un message électronique, vous pouvez supprimer celui-ci de la liste et afficher le message suivant. Dans la plupart des cas, il est préférable d’exécuter les deux animations en même temps pour minimiser la durée d’exécution d’ensemble. Les sections suivantes traitent des questions qu’il est important de garder à l’esprit dans ces scénarios.

Interruption d’animations

Une animation ou transition sur un élément est interrompue si une autre animation ou transition sur la même propriété CSS est déclenchée. Lorsque cela se produit, la première animation ou transition est annulée conformément à la spécification CSS3. Les transitions CSS s’interrompent mutuellement en toute transparence et de manière fluide. Cependant, dans le cas des animations CSS, elles affichent une transition de la propriété CSS par-dessus l’élément, tandis que la valeur de la propriété CSS réelle de l’élément demeure inchangée. L’interruption d’une animation CSS entraîne un ancrage disgracieux à la valeur d’origine de la propriété et n’est pas recommandée. Avec les animations CSS, il est généralement préférable d’attendre que la première animation se termine avant de commencer une seconde animation. Pour plus d’informations, voir Attente de la fin d’une animation.

Scénario	Résultat
Une animation CSS interrompt une animation CSS	La propriété CSS en cours d’animation revient à son état true, puis commence la nouvelle animation. Le résultat visuel peut être désagréable à regarder.
Une animation CSS interrompt une transition	La transition est interrompue de manière fluide, quel que soit l’endroit où elle se trouve, et son animation commence vers la nouvelle valeur de fin à partir de sa valeur actuelle.
Une transition CSS interrompt une transition	La transition est interrompue de manière fluide, quel que soit l’endroit où elle se trouve, et sa transition commence vers la nouvelle valeur de fin à partir de sa valeur actuelle.
Une transition CSS interrompant une animation	La propriété CSS en cours d’animation revient à son état true, puis commence la nouvelle transition. Le résultat visuel peut être désagréable à regarder.

 

Annulation d’animations

Vous pouvez annuler n’importe quelle animation de la bibliothèque d’animations par le biais de la méthode cancel de l’objet Promise retourné par la fonction d’animation.

Attente de la fin d’une animation

Pour effectuer une action lorsqu’une animation est terminée, passez une fonction de rappel à la méthode done ou then de l’objet Promise retourné par la fonction d’animation. Ceci s’avère utile dans certains cas, notamment pour attendre la fin de l’animation de sortie d’un élément du DOM avant que celui-ci ne soit supprimé ou pour chaîner plusieurs animations. Dans l’exemple présenté ici, la fonction de rappel fait disparaître en fondu la destination uniquement lorsque son apparition en fondu est terminée.

                                                
WinJS.UI.Animation.fadeIn(target)
       .then(function () { WinJS.UI.Animation.fadeOut(target); });
                                            

Nous vous recommandons de ne pas utiliser de minuterie JavaScript pour déterminer la fin de l’animation. Cette approche n’est pas fiable. La minuterie peut se terminer avant ou après l’animation et son exécution peut varier en fonction du matériel et d’autres processus en cours d’exécution sur le thread d’interface utilisateur.

Activation et désactivation d’animations

Remarque  Windows : toutes les animations de la bibliothèque d’animations sont désactivées en réponse au paramètre système « Désactiver les animations inutiles ». Celui-ci se trouve dans l’élément Options d’ergonomie du Panneau de configuration, sous Améliorer la lisibilité de l’ordinateur. Lorsque ce paramètre est sélectionné, toutes les animations qui ne sont pas essentielles au fonctionnement de base de l’application sont désactivées. Sont généralement concernées toutes les animations, à l’exception de certaines animations de jeu nécessaire pour jouer à ce jeu. Les animations de la bibliothèque d’animations et les animations personnalisées qui utilisent executeAnimation ou executeTransition répondent automatiquement à ce paramètre. Si vous créez une animation personnalisée, votre code doit explicitement écouter ce paramètre.

C’est à vous, en tant que développeur, de décider si les animations de la bibliothèque d’animations que vous utilisez dans votre application répondent aux fonctions WinJS.UI.enableAnimations et WinJS.UI.disableAnimations.

Optimisation des performances d’animation

Démontrer la réactivité de l’application avec des animations

Pour offrir à l’utilisateur la meilleure expérience possible, votre application doit donner le sentiment d’être rapide et réactive à ses actions. Lorsqu’elles sont utilisées correctement, les animations peuvent rendre votre application plus réactive en donnant à l’utilisateur un retour approprié au bon moment.

Les animations en réponse à une action de l’utilisateur doivent démarrer le plus rapidement possible. Cela est essentiel pour informer l’utilisateur que son action a réussi et que quelque chose se passe en réponse à son action. Si d’autres tâches sont nécessaires pour achever une transition, par exemple charger une nouvelle page, effectuez cette tâche après avoir déclenché l’animation en réponse à l’action de l’utilisateur.

Utiliser des animations indépendantes

La plateforme d’animation pour les applications JavaScript permet d’exécuter certains types d’animations sur un thread système à accélération matérielle distinct, c’est-à-dire indépendamment du thread d’interface utilisateur. Ce type d’animation est appelé « animation indépendante ». Une animation qui s’exécute dans le thread d’interface utilisateur est appelée « animation dépendante ». Étant donné qu’elles ne rivalisent pas avec d’autres actions qui se produisent dans le thread d’interface utilisateur, les animations indépendantes sont systématiquement plus fluides que les animations dépendantes.

Toutes les animations de la bibliothèque d’animations peuvent être exécutées sous forme d’animations indépendantes. Toutefois, pour cela, vous devez tenir compte de certaines considérations lors de l’implémentation de votre application. Pour plus d’informations sur la possibilité d’exécuter vos appels de fonction d’animation en tant qu’animations indépendantes, voir Composition indépendante : Rendu et composition dans Internet Explorer.

Minimiser le nombre d’éléments qui s’animent en même temps

Dans la mesure du possible, essayez de réduire au minimum le nombre d’éléments individuels qui sont animés. Par exemple, au lieu de passer un tableau d’éléments à une animation, passez simplement l’élément parent. De cette façon, le moteur d’animation se contente de créer une seule opération d’animation.

Utiliser les décalages par défaut

Pour les animations de la bibliothèque d’animations qui incluent un paramètre offset, utilisez le décalage par défaut chaque fois que vous le pouvez. Vous obtiendrez non seulement la translation recommandée par la conception pour l’animation, mais aussi de meilleures performances grâce à l’utilisation d’images clés précalculées pour l’animation.

Les décalages par défaut sont automatiquement mis en miroir dans les applications de droite à gauche. Pour certaines animations, le décalage par défaut modifie automatiquement la quantité de la translation quand l’application est redimensionnée pour montrer l’effet approprié pour l’état d’affichage plus étroit.

Création d’animations personnalisées

Nous vous recommandons d’utiliser les animations de la bibliothèque d’animations chaque fois que vous en avez la possibilité. Toutefois, lorsque vous êtes confronté à un scénario unique et qu’aucune des animations intégrées ne répond à vos besoins, vous pouvez créer une animation personnalisée.

Il existe deux façons d’implémenter une animation personnalisée dans des applications JavaScript : soit par l’intermédiaire d’animations et de transitions CSS3 standard, soit par le biais des fonctions d’assistance executeAnimation et executeTransition de la bibliothèque d’animations.

Création d’animations personnalisées à l’aide d’animations et de transitions CSS3 standard

Les animations et les transitions CSS3 standard constituent une option flexible et vous permettent de créer une animation ou une transition sur diverses propriétés CSS. Pour plus d’informations, voir les rubriques Animations et Transitions.

Lorsque vous choisissez de créer vos propres animations, gardez à l’esprit les points suivants :

• Des animations ou transitions sur certaines propriétés CSS ne fonctionnent pas en tant qu’animations indépendantes. Dans ce cas, la page entière peut être amenée à se redessiner à chaque image. Il peut en résulter une animation lente et saccadée qui peut nuire à l’expérience utilisateur. Évitez d’animer ces propriétés dans l’implémentation de vos animations personnalisées pour vous assurer que vos animations s’exécutent de manière indépendante.
• Une animation ou une transition CSS3 personnalisée ne peut pas coexister simultanément avec une animation de la bibliothèque d’animations sur le même élément.

Création d’animations personnalisées à l’aide d’executeAnimation et d’executeTranslation

Les fonctions de la bibliothèque d’animations executeAnimation et executeTransition sont utilisées par la bibliothèque d’animations pour exécuter ses propres animations, mais vous pouvez aussi les utiliser pour vos animations personnalisées. Toutes les animations et les transitions exécutées par ces fonctions peuvent être exécutées en tant qu’animations indépendantes et coexister avec n’importe quelle animation de la bibliothèque d’animations également en cours d’exécution. Les fonctions executeAnimation et executeTransition retournent un objet Promise conformément au reste des fonctions de la bibliothèque d’animations.

Vous pouvez utiliser ces deux fonctions sur n’importe quelle propriété CSS animable. Cependant, seules les propriétés opacity et transform peuvent être exécutées en tant qu’animations indépendantes. Si votre application nécessite une animation qui sort de l’ordinaire, par exemple une animation de jeu, ces fonctions peuvent ne pas être adaptées à votre scénario.

Lorsque vous utilisez la fonction executeAnimation, nous vous recommandons de spécifier des images clés pour l’animation afin d’obtenir de meilleures performances.

                                
@keyframes custom-opacity-in    { from { opacity: 0; } to { opacity: 1; } }
                            

L’exemple suivant illustre une animation personnalisée.

                                
function runCustomShowAnimation() {
    var showAnimation = WinJS.UI.executeAnimation(
        target,
        {
            keyframe: "custom-opacity-in",
            property: "opacity",
            delay: 0,
            duration: 500,
            timing: "linear",
            from: 0,
            to: 1
        }
    );
}
                            

L’exemple suivant illustre une transition personnalisée.

                                
function runCustomShowTransition() {
    var showTransition = WinJS.UI.executeTransition(
        target,
        {
            property: "opacity",
            delay: 0,
            duration: 500,
            timing: "linear",
            to: 1
        }
    );
}
                            

Combinaison d’animations et de transitions personnalisées

Vous pouvez combiner des animations et des transitions pour créer un plan conceptuel personnalisé. Dans les exemples suivants, une animation et une transition sont combinées pour obtenir simultanément un effet d’apparition en fondu et un effet de glissement sur l’élément cible. Les deux parties du plan conceptuel sont déclenchées de manière indépendante par des appels à executeAnimation et executeTransition, mais ils commencent en même temps.

                                
@keyframes custom-translate-in    { from { transform: translateY(50px); } to { transform: none; } }
                            

                                
function runCustomShowStoryboard() {
    var promise1 = WinJS.UI.executeAnimation(
        target,
        {
            keyframe: "custom-translate-in",
            property: "transform",
            delay: 0,
            duration: 367,
            timing: "cubic-bezier(0.1, 0.9, 0.2, 1)",
            from: "translate(50px)", 
            to: "none"
        });
    var promise2 = WinJS.UI.executeTransition(
        target,
        {
            property: "opacity",
            delay: 0,
            duration: 167,
            timing: "linear",
            to: 1
        });
    return WinJS.Promise.join([promise1, promise2]);
}
                            

Rubriques associées

Animation de votre interface utilisateur (HTML)