Atteignez 60 animations mobiles FPS avec CSS3

Points clés

• L'animation mobile fluide nécessite une attention aux étapes de synthèse du chemin de rendu critique (CRP), et d'utiliser des attributs tels que transform et opacity pour éviter d'augmenter la charge des étapes précédentes.
• Évitez d'utiliser left, top, right, bottom, transform Attributs pour les transitions d'animation, ils provoqueront des animations non liées; L'animation au début de l'animation détermine la stabilité de la couche avant.
• Pour atteindre une fréquence d'images stable de 60 images par seconde, utilisez le GPU pour rendre l'animation et promouvoir l'élément à une autre couche via l'attribut will-change, en évitant le rendu ou le dessin de la disposition du navigateur.

Cet article a été initialement publié dans OutSystems. Merci aux partenaires qui soutiennent SitePoint.

Il est facile de faire des animations dans les applications mobiles. Il est également facile de s'animation correctement dans les applications mobiles si vous suivez les conseils suivants… Bien que tout le monde utilise des animations CSS3 sur les appareils mobiles ces jours-ci, de nombreuses personnes les utilisent incorrectement. Les meilleures pratiques sont souvent négligées par les développeurs. C'est parce que les gens ne comprennent pas pourquoi ces pratiques existent et pourquoi ils sont si fortement soutenus. Les spécifications de l'équipement sont très larges. Par conséquent, si le code n'est pas optimisé, il offrira une expérience inférieure à la plupart des utilisateurs. N'oubliez pas: certains appareils phares haut de gamme sont puissants, mais la plupart des gens du monde utilisent des appareils qui sont comme un Abacus avec un écran LCD par rapport à ces appareils hautes performances. Nous voulons vous aider à profiter correctement de la puissance de CSS3. Pour ce faire, nous devons d'abord comprendre quelque chose.

Comprendre la chronologie

Que fait le navigateur lors du rendu et du traitement des éléments? Ce calendrier est appelé le chemin de rendu clé:

Source de l'image: www.csstriggers.com

Pour réaliser une animation en douceur, nous devons nous concentrer sur la modification des propriétés qui affectent l'étape de synthèse, plutôt que sur la charge de l'étape précédente.

1. style Le navigateur commence à calculer le style à appliquer à l'élément - recalculez le style.

2. Disposition Dans les étapes suivantes, le navigateur génère la forme et la position de chaque élément - la disposition. Ici, le navigateur définit les propriétés de la page telles que la largeur et la hauteur, et par exemple ses marges ou left, top, right, bottom,

   , .

3. Draw Le navigateur remplit les pixels de chaque élément dans la couche. Il fait référence à ces propriétés: box-shadow, border-radius, color, background-color,

   , etc.

4. Composition C'est là que vous voulez effectuer des animations, car c'est à ce moment que le navigateur dessine toutes les calques sur l'écran. transform Les navigateurs modernes peuvent bien animer les attributs de quatre style, en utilisant les attributs opacity et

   .
   • transform: translateX(n) translateY(n) translateZ(n); position -
   • transform: scale(n); zoom -
   • transform: rotate(ndeg); rotation -
   • opacity: n; opacité -

Comment atteindre 60 images par seconde

app-menu Rappelez-vous cela, il est temps de retrousser vos manches et de travailler dur. Commençons par HTML. Nous créerons une structure très simple et mettrons notre layout dans une classe

.

<div>
  <div></div>
  <div>
    <div></div>
  </div>
</div>

Méllais de la méthode

.app-menu {
  left: -300px;
  transition: left 300ms linear;
}

.app-menu-open .app-menu {
  left: 0px;
  transition: left 300ms linear;
}

left Avez-vous vu les propriétés que nous avons changé? Utiliser top, right, bottom,

,

Les attributs pour la transition doivent être évités. Ceux-ci ne créent pas des animations lisses car elles obligent le navigateur à effectuer des passes de mise en page à chaque fois, ce qui affecte les éléments enfants de tous les éléments. Le résultat est le suivant:

Cette animation n'est pas assez fluide. Nous avons utilisé la chronologie Devtools pour vérifier ce qui se passait dans les coulisses, et les résultats sont les suivants:

La zone verte indique le temps nécessaire pour rendre l'animation. Ces données montrent des fréquences d'images irrégulières et des performances lentes. "La barre verte signifie FPS. La barre haute signifie que l'animation est rendue à 60 ips. La barre basse signifie inférieure à 60 ips. Donc, idéalement, vous voulez que la barre verte reste toujours élevée tout au long de la chronologie. La barre rouge signifie également bégayer, donc Une autre façon de mesurer les progrès est d'éliminer ces barres rouges. »Merci Kayce Basques!

en utilisant la transformation

.app-menu {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: transform 300ms linear;
}
.app-menu-open .app-menu {
  -webkit-transform: none;
  transform: none;
  transition: transform 300ms linear;
}

transform Les attributs

affectent l'étape de synthèse, pas la disposition. Ici, nous informons le navigateur que nos couches sont stables avant le début de l'animation, il y a donc moins d'obstacles lors de la rendu de l'animation.

C'est ainsi que la chronologie reflète:

Les résultats commencent à s'améliorer, la fréquence d'images semble stable, donc l'animation se déroule plus fluide.

Exécuter l'animation dans GPU

Ensuite, passons au niveau suivant. Pour vraiment le faire fonctionner en douceur, nous utiliserons le GPU pour rendre l'animation.

<div>
  <div></div>
  <div>
    <div></div>
  </div>
</div>

Bien que certains navigateurs aient encore besoin de translateZ() ou translate3d() comme se repliant, l'attribut will-change est l'avenir. Cette propriété favorise l'élément vers une autre couche, de sorte que le navigateur n'a pas à envisager le rendu ou le dessin de mise en page.

Voir à quel point il est fluide? La chronologie le confirme:

La fréquence d'images de l'animation est plus constante et la vitesse de rendu d'animation est plus rapide. Mais il y a encore un long cadre en cours d'exécution: il y a un peu de goulot d'étranglement au début. Rappelez-vous la structure HTML que nous avons créée au début? Voyons comment nous contrôlons app-menu div:

en javascript

.app-menu {
  left: -300px;
  transition: left 300ms linear;
}

.app-menu-open .app-menu {
  left: 0px;
  transition: left 300ms linear;
}

ahhh! Nous causons un problème ici en ajoutant des cours à layout div. Cela oblige le navigateur à régénérer notre arbre de style - ce qui affecte les performances de rendu.

Solution de beurre lisse à 60 images par seconde

Et si nous créons le menu en dehors de la zone de la fenêtre? La mise en place du menu dans la zone de quarantaine garantira que nous n'affecterons que les éléments que nous voulons animations. Par conséquent, nous vous recommandons d'utiliser la structure HTML suivante:

.app-menu {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: transform 300ms linear;
}
.app-menu-open .app-menu {
  -webkit-transform: none;
  transform: none;
  transition: transform 300ms linear;
}

Maintenant, nous devons contrôler l'état du menu d'une manière légèrement différente. Nous utiliserons la fonction transitionend dans JavaScript pour manipuler des animations dans des classes qui sont supprimées à la fin de l'animation.

.app-menu {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: transform 300ms linear;
  will-change: transform;
}

Allons tout ensemble et vérifions les résultats. Voici un exemple complet compatible CSS3, tout est au bon endroit:

function toggleClassMenu() {
  var layout = document.querySelector(".layout");
  if(!layout.classList.contains("app-menu-open")) {
    layout.classList.add("app-menu-open");
  } else {
    layout.classList.remove("app-menu-open");
  }
}
var oppMenu = document.querySelector(".menu-icon");
oppMenu.addEventListener("click", toggleClassMenu, false);

Que nous montre la chronologie?

Ce sont toutes des bandes vertes, bébé. Vous voulez voir un exemple pratique? Cliquez ici. (Le lien réel doit être inséré ici)

(La section FAQ sur l'animation mobile doit être ajoutée ici, le contenu est cohérent avec la section FAQ dans le document d'origine)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!