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

Chris Harrelson
Chris Harrelson
X GitHub

TL;DR

À partir de Chrome 53, l'ensemble du contenu est re-rastrillé lorsque son échelle de transformation change, s'il ne possède pas la propriété CSS will-change: transform. En d'autres termes, will-change: transform signifie "veuillez l'animer rapidement".

Cela ne s'applique qu'aux échelles de transformation qui se produisent via la manipulation de script et ne s'applique pas aux animations CSS ni aux animations Web.

Cela signifie que le contenu de votre site sera probablement plus attrayant, mais il risque également d'être plus lent sans les modifications simples décrites ci-dessous.

Implications pour les développeurs Web

Avec ce changement, will-change: transform peut être considéré comme forçant le contenu à être rasterisé dans un bitmap fixe, qui ne change jamais par la suite en cas de mise à jour de la transformation. Cela permet aux développeurs d'augmenter la vitesse des animations de transformation sur ce bitmap, par exemple en le déplaçant, en le faisant pivoter ou en le redimensionnant.

Nous ne faisons pas la distinction entre les transformations de mise à l'échelle et de translation.

Placez will-change: transform sur les éléments lorsque vous avez besoin de vitesses d'animation de transformation très rapides (en d'autres termes, 60 FPS). En effet, le rastérisation de l'élément en haute qualité à chaque frame n'est pas assez rapide. Sinon, évitez 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 à la fin. Sachez toutefois qu'ajouter ou supprimer des will-change: transform entraîne souvent un coût de performances unique important.

Autres considérations concernant l'implémentation

La suppression de will-change: transform entraîne le tramage du contenu à une échelle nette, mais uniquement sur le prochain frame d'animation (via requestAnimationFrame). Par conséquent, si vous avez un calque avec will-change: transform et que vous souhaitez simplement déclencher un re-rastrer, mais ensuite continuer l'animation, vous devez supprimer will-change:transform, puis l'ajouter à nouveau dans un requestAnimationFrame() callback.

Si vous souhaitez effectuer un tramage à l'échelle actuelle à un moment donné de l'animation, appliquez la technique ci-dessus pour supprimer will-change: transform dans un frame, puis l'ajouter à nouveau dans un frame ultérieur.

Cela peut avoir pour effet secondaire de faire perdre au contenu sa couche composite, ce qui rend la recommandation ci-dessus quelque peu coûteuse. Si c'est un problème, nous vous recommandons d'ajouter également transform: translateZ(0) au contenu pour vous assurer qu'il reste dans une couche composite pendant cette opération.

Résumé de l'impact

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

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

Pour en savoir plus, consultez la documentation de conception référencée ci-dessus.

Exemples

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

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