Faire la transition d'After Effects aux transitions CSS et aux images clés

Les sites Web ressemblent de plus en plus à des applications mobiles. Les utilisateurs s'attendent également de plus en plus à une expérience de type application. Des notifications push au mode hors ligne, les applications Web natives y arrivent.

Une fois que les applications Web fonctionneraient comme des applications natives, les interactions de conception changeraient également pour répondre au cas d'utilisation, à savoir l'omniprésence des animations. Les animations génèrent des interactions dans toutes nos applications préférées, d'Uber à Lyft et de Snapchat à Instagram.

En tant que développeurs Web, nous avons besoin d'une bonne base pour créer des animations à la fois performantes et maintenables, ce qui est primordial pour le paysage des applications Web natives. Nous devons pouvoir passer d'After Effects aux transitions CSS, aux animations et aux images clés.

Qu'est-ce qu'After Effects ?

After Effects est un produit standard d'Adobe utilisé par les graphistes et les concepteurs de mouvement pour saisir, composer et suivre des animations. C'est l'outil de facto utilisé par de nombreux concepteurs pour communiquer des idées à une équipe en exportant les calques d'animation dans un exemple de vidéo facile à visualiser, avec un tableau de référence des heures de début et de fin de l'animation pour l'accompagner.

Ensemble, la vidéo de démonstration et le tableau de référence donnent à l'équipe de développement une bonne base pour la mise en œuvre de l'animation. La vidéo est utilisée pour voir l'image globale, tandis que le tableau de référence fournit les moindres détails qui font ou détruisent l'interaction de l'animation.

Ce que nous pouvons faire avec After Effects

Ce que nous pouvons créer avec After Effects n'est limité que par notre imagination. Il peut fournir un nombre infini d'effets de post-production pour une image ou une vidéo. Dans le cadre du Web, il fournit une plate-forme de partage d'idées.

Considérez la boule rouge ci-dessus. La balle est animée à l'aide d'After Effects pour rouler lentement vers le milieu, faire une pause d'une seconde, puis accélérer lentement pour quitter la fenêtre. Les animations Web classiques de mouvement, de mise à l'échelle, de rotation et même de changement de couleur sont facilement réalisées dans After Effects et servent de document d'exigences généré instantanément (ou vidéo ou GIF) pour les animations à mettre en œuvre.

Outils dont vous avez besoin pour commencer

Avec JavaScript, HTML5, CSS3 et de nombreux autres langages devenant la norme dans la plupart des principaux agents utilisateurs à partir desquels un site Web reçoit du trafic, l'utilisation de ces outils en gros devient de plus en plus faisable. Vous trouverez ci-dessous quelques technologies clés à garder à l'esprit lors de la mise en œuvre d'animations.

Transitions CSS

Les transitions CSS permettent de contrôler la vitesse à laquelle un changement de propriété CSS est appliqué à un élément. Au lieu d'appliquer un style immédiatement (sans transitions), il pourrait être appliqué progressivement sur une courbe d'accélération définie à l'aide de règles de personnalisation. Un exemple serait de changer une couleur d'arrière-plan du noir au blanc sur une période de temps.

 transition-property: background-color; transition-duration: 3s;

Avec cette règle sur l'élément, la couleur de fond mettrait trois secondes à changer, passant progressivement du noir au blanc, en passant par des nuances de gris. Cela peut en outre être personnalisé en ajoutant une fonction de synchronisation de transition, pour calculer des valeurs intermédiaires, et un délai de transition, pour retarder le début de l'animation.

Les transitions CSS conviennent aux interactions simples , telles que la modification de la couleur d'arrière-plan ou le déplacement d'un élément vers un nouvel emplacement.

Utiliser des animations CSS

Les animations CSS offrent un contrôle encore plus fin des étapes intermédiaires entre une animation, en utilisant des waypoints. Les waypoints (ou images clés) sont des points épinglés dans le temps, pendant l'animation, lorsque nous appliquons certains styles à un élément. Nous utilisons ensuite les images clés définies pour définir à quoi l'animation devrait ressembler.

Supposons que nous voulions qu'un élément s'anime comme un rebond. L'élément doit monter, revenir à sa position d'origine, remonter un peu, puis revenir à sa position d'origine. En utilisant des images clés, nous pouvons décomposer cet effet élastique en pourcentages de temps que prendra l'animation.

 @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-25px); } 60% { transform: translateY(-15px); } } .element { animation-name: bounce; animation-duration: 3s; }

Comme pour les transitions CSS, les développeurs disposent de nombreuses options à configurer. Nous pouvons faire en sorte que les animations se répètent indéfiniment en utilisant animation-iteration-count , avec la valeur infinite , ou même contrôler la direction dans laquelle l'animation se déroule, en utilisant la propriété animation-direction . De nombreuses propriétés d'animation CSS nous donnent un contrôle précis pour faire correspondre une animation à la conception.

Les animations CSS sont utiles pour les courtes animations répétitives , telles que l'expansion, la rotation et les rebonds.

Utilisation de JavaScript

JavaScript a une multitude d'utilisations, des serveurs Raspberry Pi au code côté client, mais l'une de ses principales utilisations reste la modification des noms de classe sur les éléments. Changer un nom de classe est un moyen trivial mais efficace de gérer l'état d'un élément.

Un exemple est le simple ajout d'une classe active qui signale à un composant initialement caché de commencer l'animation. Considérez la balle ci-dessous. Nous utilisons JavaScript pour ajouter une classe qui déclenche l'animation à l'aide des propriétés de transition CSS.

La première partie de cette animation peut être reproduite en utilisant une simple combinaison de HTML, CSS et JavaScript.

HTML :

 <div class="ball"></div>

CSS :

 .ball { width: 100px; height: 100px; color: red; transform: scale(0.25); transition: all 1s ease-in; } .ball.active { transform: scale(1.25); }

JavaScript :

 setTimeout(function() { document.querySelector('.ball').addClass('active'); }, 500);

Lorsque le délai d'attente (de 500ms ) expire, une classe active est ajoutée à la ball div , ce qui modifie la propriété transform , qui déclenche ensuite la propriété transition , qui surveille la propriété transform sur l'élément ball. La modification des classes CSS à l'aide de JavaScript nous aide non seulement à gérer l'état d'un composant, mais nous donne également un contrôle supplémentaire sur les animations au-delà des animations et des transitions CSS.

Le contrôle des animations à l'aide de JavaScript est bénéfique pour la gestion de l'état , pour déclencher des événements en fonction de facteurs dynamiques tels que l'entrée de l'utilisateur ou l'état de l'application.

De l'idée à After Effects en passant par CSS et JavaScript

Imaginez que nous ayons une tâche dans laquelle nous devions animer un élément sur la page. Faisons de cet élément une boule rouge. La balle devrait tourner autour de la page, ainsi que monter et descendre.

After Effects nous permet de créer des maquettes de ce à quoi ressemblerait l'interaction lorsque l'animation est déclenchée. La balle en mouvement ci-dessous en est un exemple. Remarquez comment la boule rouge s'agrandit d'abord légèrement, puis commence à accélérer autour d'une boucle circulaire et décélère pour revenir à sa position d'origine. Ce n'est qu'alors que la balle redescend à sa taille d'origine.

Considérez le changement d'échelle au-dessus de l'endroit où la balle grossit ou rétrécit avant de se déplacer ou de s'arrêter. Il s'agit d'une petite fonctionnalité que le concepteur a conçue dans After Effects et qui doit être clairement communiquée au développeur afin que les moindres détails ne soient pas manqués.

C'est pourquoi une certaine préparation devrait être faite avant de passer d'After Effects au développeur. Nous ne pouvions pas simplement créer un fichier vidéo de l'animation en action, le partager avec le développeur et l'appeler un jour.

Une façon de transmettre clairement nos idées est de créer une feuille de calcul détaillant les étapes nécessaires à l'animation. Selon la complexité de l'animation, il peut s'agir de simples gribouillis sur un ticket, d'un fichier texte contenant une liste ou d'une feuille de calcul complète.

Une autre façon de transmettre des informations sur l'animation consiste à l' intégrer dans la vidéo elle-même. Vous pouvez le faire directement dans After Effects, en ajoutant des informations cruciales telles que la quantité à mettre à l'échelle, le nombre d'étapes et d'autres informations au fur et à mesure, pour donner un contexte à l'implémenteur. Cela nous permet d'utiliser la vidéo de démonstration comme une source universelle de vérité .

Ce fichier vidéo exporté d'After Effects agit comme une forme de contrat entre le concepteur et le développeur. Avec une compréhension commune en place, nous pouvons utiliser les outils discutés pour l'implémenter, à savoir les classes CSS, les événements JavaScript, les transitions CSS, les animations CSS et les animations JavaScript.

1. Décomposez l'animation

Recherchez des modèles et notez les horaires.

La première chose à faire est de dessiner la chronologie des animations pour chacun des éléments (ou groupe d'éléments). Nous devons comprendre où les animations se croisent afin de synchroniser le cycle de vie de la synchronisation et de l'animation autour d'elles. La planification est la clé d'une animation complexe, afin que nous puissions construire progressivement notre solution de manière maintenable pour les besoins futurs.

À partir des informations ci-dessus, nous le décomposons en étapes suivantes :

1. Initialisez le composant et attendez un déclencheur.
2. Une fois déclenché, augmentez la taille et agrandissez l'ombre portée.
3. Après cela, déplacez-vous en cercle avec ease-in-out .
4. Ensuite, réduisez la taille et diminuez l'ombre portée.

L'avantage du contour est que nous comprenons quels composants doivent vivre en dehors des éléments d'animation - par exemple, l'ombre portée doit être indépendante de la balle. Semblable à la description d'un essai, la décomposition de l'animation organise nos réflexions sur le travail que nous devons faire. Les contours démontrent le processus de réflexion derrière une animation et servent doublement de documentation pour notre travail.

2. Négocier avec les parties prenantes

Peut-on simplifier certains domaines ? Quelles parties de l'animation sont indispensables ? Peut-on synchroniser les horaires ?

Une fois que nous avons étudié le travail nécessaire pour accomplir la tâche, nous négocions. Négocier avec le concepteur et le propriétaire du produit est la responsabilité de chaque développeur. L'exécutant a une compréhension complète des principaux fruits à portée de main, de ce qui peut être fait et de ce qui n'est pas pratique à faire.

L'animation est délicate car la suppression de détails apparemment infimes d'une animation peut modifier l'expérience utilisateur. Pour donner un exemple basé sur le développement, modifier le comportement d'une animation s'apparente à modifier la charge utile de réponse que nous pourrions recevoir d'un appel d'API : certaines choses pourraient être modifiées, mais certaines parties doivent être là.

Il s'agit d'une situation au cas par cas, basée sur notre relation avec le designer, ainsi qu'avec le propriétaire du produit compte tenu du calendrier de lancement. Il n'est pas recommandé de demander la suppression de certaines animations car cela dépasserait notre domaine de compétence.

Une bonne approche de la négociation serait de synchroniser les horaires ou de simplifier les animations que le navigateur pourrait ne pas être capable de faire nativement , et d'éviter les animations qui utilisent JavaScript car elles seraient difficiles à maintenir et pourraient entraîner des performances médiocres. Nous pouvons et devons plutôt demander ces concessions.

3. Planifiez l'attaque

Sachez quel devrait être l'état de début et de fin de chaque élément. Regardez où chaque moment de transition est censé se produire. Tirez parti de BEM dans les classes CSS pour appliquer clairement les animations. Comprendre les raisons pour lesquelles JavaScript devrait être limité au profit de CSS.

Examinons l'animation décrite précédemment. Cinq états nous sautent aux yeux :

1. l'état initial, avec la boule rouge et une ombre portée ;
2. la version agrandie de la balle avec une ombre portée plus longue ;
3. le mouvement du ballon autour d'un cercle;
4. réduction de la balle, avec son ombre portée ;
5. le retour à l'état initial, en attente d'être déclenché.

Pour les cinq États, nous devrions examiner quel est le style avant et ce qu'il devrait être après. Cela nous fournira des informations sur le type d'outils d'animation dont nous aurions besoin pour l'implémenter.

Pour ce faire, nous commençons par le style de cas de base. Cela pourrait être rien, si l'élément apparaît de nulle part, ou cela pourrait être le style précédent, dans le cas d'animations enchaînées.

Restez simple en ayant très peu de changements de styles entre les états. Une fois que nous avons identifié les états de début et de fin, nous devons les étiqueter en tant que classes CSS, afin qu'ils puissent être appliqués facilement à l'élément. Cela nous donne la flexibilité d'utiliser JavaScript pour gérer l'application de classes basées sur les données reçues des appels AJAX dont l'élément pourrait dépendre.

BEM CSS est idéal pour notre stratégie de nommage en raison de la façon dont nous représenterions les états de nos animations en cours avec des modificateurs. Si l'animation est suffisamment générique, BEM est également une bonne méthodologie pour maintenir les classes CSS DRY ("ne vous répétez pas") qui fonctionnent sur toutes les bases de code. Nous commençons avec uniquement les marqueurs de bloc et d'élément, puis nous ajoutons des modificateurs au fur et à mesure que nous progressons dans l'animation.

Voici un exemple de parcours de classe de modèle :

 // State 1 <div class="ball"></div> // State 2 <div class="ball ball--scale-up"></div> // State 3 <div class="ball ball--scale-up ball--circling"></div> // State 4 <div class="ball ball--scale-up ball--circling ball--scale-down"></div> // State 5 <div class="ball"></div>

Nous commençons avec l'élément conteneur avec la balle de classe, qui représenterait la balle rouge que nous animons. Au fur et à mesure que l' animation parcourt l'expérience, il en va de même pour nos noms de classe BEM , de la mise à l'échelle au déplacement en cercle. C'est une méthode pour garder une trace de ce à quoi l'élément est censé ressembler lorsque les styles sont appliqués.

4. Mise en œuvre régulière

Avec une esquisse sous la main et des outils prêts à l'emploi, nous devrions rogner le projet état par état.

Nous pouvons traiter de manière itérative chaque état comme un élément distinct, en nous appuyant sur l'état précédent si nécessaire. Avec chaque état clairement défini, nous pouvons nous concentrer davantage sur la fabrication de notre code DRY et facile à lire, plutôt que sur les détails de la mise en œuvre. Et, bien sûr, ce serait bien d'ajouter des tests pour couvrir notre logique.

Etat initial

Nous commençons avec une simple boule rouge, avec une légère ombre portée.

 .ball { background-color: #D24D57; width: 25px; height: 25px; margin: 5px; display: inline-block; border-radius: 50%; box-shadow: 0 8px 6px -6px #6C7A89; }

Mise à l'échelle

La mise à l'échelle comporte deux parties : la taille de l'élément et son ombre portée. Nous utilisons une image clé, nommée scale , qui est partagée par la mise à l'échelle vers le haut et vers le bas pour DRY-ness pour gérer cette animation.

 @keyframes ball-scale { from { transform: scale(1); box-shadow: 0 8px 6px -6px #6C7A89; } to { transform: scale(1.25); box-shadow: 0 10px 6px -6px #6C7A89; } } .ball--scale-up { animation: ball-scale 1s ease-out forwards; }

Cercle (après l'application de l'animation de mise à l'échelle)

Nous utilisons une image clé, nommée circular , ainsi que move sa propriété transform-origin pour déplacer l'élément dans un cercle, en commençant par le début. Gardez à l'esprit que l'encerclement ne se produit que lorsque l'animation de mise à l'échelle est terminée.

 @keyframes ball-circular { from { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(0deg) translateY(-100%) rotate(0deg); } to { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(360deg) translateY(-100%) rotate(-360deg); } } .ball--circling { animation: ball-circular 2s ease-in-out forwards; }

Réduction d'échelle (après l'application des animations de cercle et de mise à l'échelle)

Pour réduire, nous réutilisons l'échelle des images clés, avec animation-direction: reverse pour faire le contraire de ce que fait la classe scale-up. Cela nous ramène à notre état d'origine.

 .ball--scale-down { animation: ball-scale 1s ease-in forwards; animation-direction: reverse; }

Démo de travail

Si nous combinions toutes ces classes dans une séquence, nous aurions une représentation CSS du rendu effectué dans After Effects.

Cliquez sur la balle pour commencer.

Voir le Pen Animating Ball de Chris Ng (@chrisrng) sur CodePen.

Conclusion

Les outils couverts dans cet article ne sont pas à la pointe de la technologie, mais ils sont généralement pris en charge par la plupart des principaux navigateurs, ce qui les rend utilisables aujourd'hui.

Auparavant, la mise en œuvre d'animations était difficile car cela signifiait utiliser des outils externes tels que jQuery Animate pour faire des choses simples comme déplacer des éléments sur la page. Aujourd'hui, les transitions et animations CSS peuvent être réalisées de manière native et efficace, en tirant parti du GPU.

Les animations sont toujours un bras de fer entre développeur, concepteur et propriétaire de produit. L'astuce consiste à trouver un terrain d'entente, où toutes les parties prenantes sont satisfaites de la qualité du produit. J'espère que ce guide vous aidera à faire cette transition.