Animation performante en CSS

Apprenez comment améliorer les performances d'animation en CSS avec un exemple d'Alyssa sur le thème des vacances.

J'ai trouvé cette jolie animation en ligne et l'ai nettoyée un peu pour une application Secret Santa avec laquelle mon mari et moi avons travaillé pour les vacances. Cependant, nous avons dû commenter l'animation et l'arbre de Noël, car cela causait un crash de notre ancien ordinateur portable MacBook. Même si mon nouveau MacBook n’a pas mieux résisté, les fans nous ont dit que nous étions sur le point de partir dans l’espace extra-atmosphérique lorsque l’animation a duré plus de quelques minutes.

L'animation, un sapin de Noël et un dessin sur neige, ne sont évidemment pas performants, à tel point que nous ne pouvons même pas les utiliser. Je voulais passer en revue les différentes options que nous avons. Avons-nous même d'autres options? Peut-on même animer sans plantage des navigateurs dans ce monde de 2018?

Bien entendu, la réponse est oui.

Voici le début StackBlitz .

Le problème

Si nous vérifions le panneau de performance dans nos devtools pour Chrome, nous voyons des goulots d'étranglement dans notre temps de chargement! Vous vous demandez probablement (avec votre meilleure voix furieuse que les développeurs en colère), "Qu'est-ce qui pourrait causer cela ?!". Eh bien, il s'avère que nos animations ne sont pas des bueno. Avec CSS dans les navigateurs modernes, vous n’avez vraiment que quatre options pour animer sans problèmes. Comme le disent les grands Lewis et Irish dans leur article, «Des animations de haute performance» :

Les navigateurs modernes peuvent animer quatre choses vraiment à bon marché: la position, la balance , rotation et opacité.

J’ai ralenti le processeur six fois pour essayer de simuler un MacBook chugging (je l’aurais baissé si j'avais pu ). Ce goulot d'étranglement prend 94,85 ms. Oui, cela ne prend que quelques millisecondes. Cependant, si nous prenons plus de 16 ms pour restituer une image, les gens le remarqueront. En termes d'images par seconde, les utilisateurs aiment avoir au moins 60 FPS. Lorsque notre arbre débute pour la première fois avec la "mauvaise" animation, nous obtenons un horrible 10 FPS:

À certains moments cependant, comme dans nos goulots d'étranglement ci-dessus, nous obtenons 0 – 1 FPS. . C'est assez inacceptable, même avec un processeur graphique six fois plus lent. Tous nos tests seront exécutés 6 fois plus lentement, même notre code final performant, pour une comparaison homogène.

La solution

Comme je l'ai brièvement mentionné précédemment, lorsqu'il s'agit d'animer à moindre coût les navigateurs modernes d'aujourd'hui, nous n'avons quatre options.

Les navigateurs modernes peuvent animer quatre choses à moindre coût: la position, l’échelle, la rotation et l’opacité. – Paul Lewis & Paul Irish

Nous animons actuellement la neige sur l'écran avec la position d'arrière-plan.

 // tree.scss

animation: il neige des années 40 linéaires en avant infinis;
@configurations neigeuses {
  100% {
    position d'arrière-plan: 0px ($ size - 4px), 0 ($ size - 4px), 0px ($ size - 4px), 0px ($ size - 4px);
  }
} 

Remarque: Ils ont ignoré le 0% ou le début de l'image clé. La position de départ ou par défaut de la neige sera supposée.

Si vous vous demandez si le changement de CSS sur mon navigateur est exactement bon ou mauvais, consultez Les déclencheurs CSS pour le savoir. (C'est d'où provient l'image ci-dessus.) Nous savons donc que l'animation de la position de l'arrière-plan n'est pas optimale. Notre prochain choix évident est de remplacer ceci par un translate transform. Traduire vous permet de déplacer des éléments DOM sur leurs axes X et Y.

 // tree.scss

animation: il neige des années 40 linéaires en avant infinis;
@configurations neigeuses {
  0% {
    transformer: traduire (0, - $ taille);
  }
  100% {
    transformer: traduire (40px, calc (# {$ size} - 30%));
  }
} 

Notre image clé Neige comporte deux étapes simples. Le premier commence la neige à 0 sur l'axe des X et - taille [$ sur l'axe des Y. Nous avons actuellement la taille définie sur 400px. Ainsi, la neige commencera 400px au dessus de sa position initiale.

[19659009] Note: Les captures d'écran pour la capture d'écran, afin de mieux montrer où se trouve la neige, ont été commentées.

La ​​fin de notre animation:

transform: translate (40px, calc (# { $ size} - 30%));

La dernière et dernière étape consiste à indiquer à la neige de se terminer à 40 pixels à droite et à 30% de moins que la taille de la scène .christmas. Nous ajustons le réglage à 30% de moins que la hauteur totale afin de faire correspondre le flocon de neige le plus élevé:

J'ai accéléré haut de l'animation ici pour vous montrer la boucle que nous venons de créer:

Toutes nos excuses pour le GIF apparemment «trapu», consultez ce StackBlitz spécifique à voir

Contrôle des performances

Avant

Après

Maintenant Comme vous pouvez le constater sur les deux captures d'écran, avant et après le changement d'animation, notre version nettoyée est une amélioration. Non seulement nos images par seconde sont globalement plus élevées, mais notre utilisation du processeur est BEAUCOUP plus basse. En effet, nous n’avons pas besoin de lancer une animation coûteuse de l’image d’arrière-plan, la vie entière de la page Web. ?

Il reste cependant beaucoup de choses que nous pourrions nettoyer. Nous utilisons encore des éléments peu recommandables tels que des dégradés et des images d’arrière-plan pour dessiner notre arbre et notre neige. Assurez-vous de consulter mon prochain article (à paraître prochainement) pour optimiser vos dessins en CSS et voir comment nous avons atteint ces points de repère maladroits! WOOHOO, regardez combien cette utilisation du processeur est faible! Hot dog!

J'espère que vous avez apprécié ce post, juste à temps pour la saison des vacances! Je vous verrai dans le prochain article pour optimiser vos dessins! Jusque-là, codage heureux pour tout le monde.