Recréer la trame de calques composites lors d'un changement d'échelle

Chris Harrelson
Chris Harrelson
X GitHub

Résumé

À partir de Chrome 53, si la propriété CSS will-change: transform n'est pas présente, tout le contenu est rastérisé lorsque l'échelle de transformation change. En d'autres termes, will-change: transform signifie "Animez-le rapidement".

Cela ne s'applique qu'aux échelles de transformation qui se produisent par manipulation de script, et non aux animations CSS ni aux animations Web.

Cela signifie que le contenu de votre site sera probablement de meilleure qualité, mais qu'il risque également d'être plus lent si vous n'apportez pas les modifications simples décrites ci-dessous.

Implications pour les développeurs Web

Avec cette modification, will-change: transform peut être considéré comme forçant la trame du contenu dans un bitmap fixe, qui ne change jamais lors des mises à jour de transformation. Cela permet aux développeurs d'augmenter la vitesse des animations de transformation sur ce bitmap, par exemple de les déplacer, de les faire pivoter ou de les mettre à l'échelle.

Nous ne faisons pas de distinction entre les transformations d'échelle et de traduction.

Ajoutez will-change: transform aux éléments lorsque vous avez besoin de transformer des vitesses d'animation très rapidement (en d'autres termes, 60 images par seconde), et lorsque la trame de l'élément en haute qualité sur chaque image n'est pas assez rapide. Sinon, évitez d'utiliser will-change: transform.

Pour optimiser le compromis entre performances et qualité, vous pouvez ajouter will-change: transform au début des animations et le supprimer lorsqu'elles se terminent. Toutefois, sachez que l'ajout ou la suppression de will-change: transform entraîne souvent un coût de performances élevé.

Autres points à prendre en compte concernant l'implémentation

Si vous supprimez will-change: transform, le contenu est rastérisé à une échelle nette, mais uniquement sur l'image d'animation suivante (via requestAnimationFrame)). Ainsi, si vous disposez d'un calque comportant will-change: transform et que vous souhaitez simplement déclencher une nouvelle trame tout en poursuivant l'animation, vous devez supprimer will-change:transform, puis l'ajouter à nouveau dans un requestAnimationFrame() callback.

Si, à tout moment au cours d'une animation, vous souhaitez effectuer une trame à l'échelle actuelle, appliquez la technique ci-dessus pour supprimer une image, puis rajoutez will-change: transform dans une image suivante.

Cela peut entraîner la perte de sa couche composée par le contenu, ce qui peut entraîner un coût relativement élevé de la recommandation ci-dessus. Si cela pose problème, nous vous recommandons d'ajouter également transform: translateZ(0) au contenu pour vous assurer qu'il reste dans une couche composée pendant cette opération.

Récapitulatif de l'impact

Ce changement a des conséquences sur la qualité et les performances du contenu affiché, ainsi que sur le contrôle des développeurs.

  • Qualité du contenu affiché: le rendu des éléments qui animent l'échelle de transformation est toujours net par défaut.
  • Performance: l'animation de la transformation lorsque will-change: transform est présent sera rapide.
  • Contrôle par les développeurs: les développeurs peuvent choisir entre qualité et vitesse, par élément et par frame d'animation, en ajoutant et en supprimant
    will-change: transform.

Pour en savoir plus, consultez le document de référence sur la conception ci-dessus.

Exemples

Dans cet exemple, l'élément avec l'ID remainsBlurry restera flou après cette modification, mais l'élément avec l'ID noLongerBlurry deviendra net. En effet, le premier comporte une propriété CSS will- change: transform.

Exemples d'animations à l'échelle de transformation issues d'applications réelles