Au cours des deux dernières années, nous avons souvent entendu parler de l'accélération matérielle et de la fa?on dont cela aide à améliorer l'animation sur les pages Web, ce qui les rend agréables et lisses même sur les navigateurs mobiles. Mais je pense que beaucoup de développeurs moins expérimentés ne savent pas comment fonctionne l'accélération matérielle et comment nous pouvons l'utiliser correctement pour faire briller nos animations.

Le terme lui-même ressemble à quelque chose de trop compliqué, proche des mathématiques plus élevées. Dans cet article, je vais éclairer ce sujet et montrer comment utiliser cette technique dans vos projets frontaux.

Les plats clés

• L'accélération matérielle peut améliorer considérablement la qualité des animations CSS, ce qui les rend plus lisses et plus efficaces, en particulier sur les navigateurs mobiles. Ceci est réalisé en déchargeant le processus de rendu au GPU (Graphics Processing Unit), qui est mieux équipé pour de telles taches.
• Les transformations CSS sont des propriétés conviviales GPU qui peuvent être utilisées pour éviter les opérations de repection co?teuses. Le ?piratage de transformation? peut également être utilisé pour forcer un élément à être rendu dans le GPU avant même le début de l'animation, déclenchant ainsi l'accélération matérielle.
• L'utilisation de l'accélération matérielle doit être effectuée avec prudence car elle peut entra?ner des problèmes de mémoire, en particulier sur les appareils mobiles. Il peut également influencer l'anti-aliasage des polices en raison de différents mécanismes de rendu du GPU et du CPU.
• La propriété ?variation? a été introduite pour informer le navigateur de la propriété qui va changer, afin que le navigateur puisse faire des optimisations correspondantes au préalable. Cependant, tous les navigateurs ne prennent pas encore en charge cette propriété.

Pourquoi devrais-je m'en soucier?

Regardons un exemple d'animation simple contenant plusieurs balles empilées les unes sur les autres (c'est-à-dire sur l'axe Z, donc il ressemble à une balle). Le but est de déplacer ce groupe de balles avec animation. La fa?on la plus simple de le faire est d'ajuster les propriétés gauche et supérieure. Nous pourrions le faire avec JavaScript, mais nous utiliserons à la place CSS Animations. Veuillez noter que j'exclut les préfixes des fournisseurs, mais vous devez utiliser quelque chose comme AutopRefixer pour assurer une compatibilité complète.

<span><span>.ball-running</span> {
</span>  <span>animation: run-around 4s infinite;
</span><span>}
</span>
<span><span>@keyframes run-around</span> {
</span>  <span>0%: {
</span>    <span>top: 0;
</span>    <span>left: 0;
</span>  <span>}
</span>
  <span>25% {
</span>    <span>top: 0;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>50% {
</span>    <span>top: 200px;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>75% {
</span>    <span>top: 200px;
</span>    <span>left: 0;
</span>  <span>}
</span><span>}</span>

Voici une démo en direct qui utilise un bouton pour initier l'animation avec JavaScript:

Voir le stylo animant des boules qui se chevauchent avec des propriétés supérieures / gauche par SitePoint (@SitePoint) sur Codepen.

Après avoir cliqué sur le bouton "Démarrer l'animation", vous remarquerez que l'animation n'a pas l'air très lisse, même sur un navigateur de bureau. Si vous testez l'animation sur votre appareil mobile, vous verrez qu'il est loin de 60 images par seconde. Pour résoudre ce problème, nous pouvons utiliser CSS Transform à l'aide de la fonction Translate (), au lieu d'animmer les valeurs supérieure et gauche.

<span><span>.ball-running</span> {
</span>  <span>animation: run-around 4s infinite;
</span><span>}
</span>
<span><span>@keyframes run-around</span> {
</span>  <span>0%: {
</span>    <span>transform: translate(0, 0);
</span>  <span>}
</span>
  <span>25% {
</span>    <span>transform: translate(200px, 0);
</span>  <span>}
</span>
  <span>50% {
</span>    <span>transform: translate(200px, 200px);
</span>  <span>}
</span>
  <span>75% {
</span>    <span>transform: translate(0, 200px);
</span>  <span>}
</span><span>}</span>

Essayez le code ci-dessus dans la démo ci-dessous:

Voir le stylo animant les boules qui se chevauchent avec CSS se transforment par SitePoint (@SitePoint) sur Codepen.

Maintenant, l'animation est agréable et fluide. Super! Alors pourquoi cela a-t-il aidé? Eh bien, les transformations CSS ne provoquent pas de repeintes, contrairement aux animations avec les propriétés gauche et supérieure. Examinons le panneau de chronologie de Chrome’s Devtools lors de l’exécution de l’animation:

Dans l'exemple gauche et supérieur, nous pouvons voir des barres vertes à chaque étape d'animation. Il s'agit d'une opération de repection co?teuse. La fréquence d'images d'animation est inférieure à 60 images par seconde, que nous visons toujours à réaliser pour rendre l'animation lisse.

Regardez maintenant la chronologie dans le cas des transformations CSS:

Comme vous pouvez le voir, il n'y a pas de barres vertes pendant l'animation.

Une autre fonctionnalité disponible dans les Devtools de Chrome pour suivre le processus de repensage est ?Activer la peinture clignotante?. Vous pouvez trouver cette option en ouvrant les Devtools, en appuyant sur la touche ESC, puis en choisissant l'onglet ?Rendu?. Lorsque cette fonctionnalité est activée, les bo?tes vertes (c'est-à-dire les rectangles de peinture) appara?tront autour des zones repeintes. Dans l'exemple gauche et supérieur, les balles ont une bo?te verte pour l'ensemble du processus d'animation, indiquant les repeintes.

D'un autre c?té, dans l'exemple CSS Transforts, le rectangle de peinture est affiché uniquement sur les premiers et dernières cadres d'animation.

Alors, comment les transformations rendent-elles exactement l'animation sans repeintes? La réponse de base est que les transformations CSS se produisent directement dans la mémoire GPU qui utilise l'accélération matérielle, ce qui évite le rendu des logiciels. Examinons cela plus en détail.

comment fonctionne l'accélération du matériel

Lorsque le navigateur re?oit le balisage d'une page, il l'analyse pour construire l'arbre Dom. L'arbre Dom et le CSS permettent au navigateur de construire l'arbre de rendu. L'arbre de rendu se compose d'objets de rendu - les éléments à rendre sur la page. Chaque objet de rendu est attribué à une couche graphique. Chaque couche est téléchargée sur GPU comme texture. L'astuce ici est que la couche peut être transformée dans le GPU sans repeindre, comme dans le cas des graphiques 3D. Ces transformations sont effectuées par le processus distinct du compositeur. Vous pouvez trouver plus d'informations sur la composition dans Chrome ici.

Dans notre exemple, la transformée CSS crée une nouvelle couche composite qui peut être transformée directement dans le GPU. Devtools de Chrome permet de visualiser les couches composites à l'aide de l'option "Show Cose Borders". Chaque couche composite a une bordure orange.

Nos balles avec la transformation CSS ont des bordures orange et sont déplacées vers des couches composites séparées:

à ce stade, vous pourriez demander: Quand un navigateur crée-t-il un calque composite séparé?

Il le fait dans les cas suivants:

• pour la 3D ou la perspective CSS transforme (dans notre exemple)
• pour
• lors de l'utilisation des filtres CSS
• pour un élément qui chevauche un autre élément extrait sur une couche composite (par exemple, en utilisant z-index)

Vous pensez peut-être: ?Attendez. Cet exemple a utilisé la traduction 2D, pas des transformations 3D ?. Et vous avez raison. C'est pourquoi il y a deux opérations de repeinture supplémentaires - au début et à la fin du processus d'animation dans notre chronologie.

La différence entre les transformations 3D et 2D est que les transformations 3D font que le navigateur crée une couche composite séparée au préalable, tandis que les transformations 2D le font à la volée. Au début de l'animation, une nouvelle couche composite est créée et les textures sont chargées au GPU, qui initie la repection. Ensuite, l'animation est effectuée par le compositeur dans le GPU. Lorsque l'animation est terminée, la couche composite supplémentaire est supprimée, ce qui entra?ne une autre opération de repeinture.

Rendre des éléments dans le GPU

Tous les changements de propriété CSS sur les éléments ne peuvent pas être gérés directement dans le GPU. Seules les propriétés suivantes sont prises en charge:

• Transform
• opacité
• Filtre

Et donc pour assurer la meilleure chance d'une animation fluide et de haute qualité, nous devons toujours essayer d'utiliser ces propriétés conviviales.

Forcer un élément à être rendu dans GPU

Dans certains cas, il peut être nécessaire de rendre un élément dans le GPU avant même le début de l'animation. Cela permet d'éviter la première opération de repeinture causée par la nouvelle création de couche. Pour y parvenir, le soi-disant ?piratage de transformation? peut être utile.

<span><span>.ball-running</span> {
</span>  <span>animation: run-around 4s infinite;
</span><span>}
</span>
<span><span>@keyframes run-around</span> {
</span>  <span>0%: {
</span>    <span>top: 0;
</span>    <span>left: 0;
</span>  <span>}
</span>
  <span>25% {
</span>    <span>top: 0;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>50% {
</span>    <span>top: 200px;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>75% {
</span>    <span>top: 200px;
</span>    <span>left: 0;
</span>  <span>}
</span><span>}</span>

Ce que cela fait, c'est faire savoir au navigateur que nous voulons effectuer une transformation 3D. Cela permet au navigateur de créer une couche séparée et de déplacer l'élément vers le GPU au préalable, déclenchant ainsi l'accélération matérielle.

Cette technique peut également être utile lorsque la repection d'un élément est trop co?teuse en raison d'un autre élément derrière. Revenons au premier exemple et changeons-le légèrement pour qu'il contienne une seule balle et un conteneur avec une image d'arrière-plan floue à l'aide des filtres CSS. La balle est animée avec les propriétés gauche et supérieure.

Voir le stylo animer une balle avec des propriétés supérieures / gauche par SitePoint (@SitePoint) sur Codepen.

Encore une fois, le mouvement du ballon est saccadé. Cela se produit parce que chaque opération de repeinture co?te trop en raison de l'arrière-plan flou.

Ajoutons maintenant le piratage de transformation au conteneur.

Voir le stylo Animer les propriétés gauche / supérieure avec accélération matérielle par SitePoint (@SitePoint) sur Codepen.

Le résultat n'est pas trop mal et l'animation fonctionne bien. Pourquoi? Parce que maintenant, le fond flou cher de peinture est déplacé vers un autre calque composite, et la repeinture de la balle à chaque étape d'animation est bon marché.

Utilisez l'accélération matérielle avec prudence

Rien ne vient gratuitement. Il existe certains problèmes liés à l'accélération matérielle.

mémoire
Le problème le plus important est lié à la mémoire. Le chargement trop de textures au GPU peut entra?ner des problèmes de mémoire. Ceci est vraiment critique sur les appareils mobiles et peut même écraser un navigateur mobile. Attention aux conséquences et n'utilisez pas d'accélération matérielle pour chaque élément d'une page.

rendu de police
Le rendu dans le GPU influence l'anti-aliasage des polices. Cela se produit parce que le GPU et le CPU ont des mécanismes de rendu différents. Ainsi, même si vous désactivez l'accélération matérielle à la fin d'une animation, le texte sera affiché flou pendant l'animation. Vous pouvez en savoir plus sur les problèmes de rendu de police dans ce post par Keith Clark.

L'avenir proche

La nécessité d'utiliser le ?piratage de transformation? pour créer des couches composites séparées est lourde. Les navigateurs devraient certainement fournir un moyen simple de le faire. C’est pourquoi la propriété de changement de volonté a été introduite. Cette fonctionnalité vous permet d'informer le navigateur quelle propriété va changer, afin que le navigateur puisse faire des optimisations correspondantes au préalable. Voici un exemple qui informe le navigateur que la propriété Transform sera modifiée:

<span><span>.ball-running</span> {
</span>  <span>animation: run-around 4s infinite;
</span><span>}
</span>
<span><span>@keyframes run-around</span> {
</span>  <span>0%: {
</span>    <span>top: 0;
</span>    <span>left: 0;
</span>  <span>}
</span>
  <span>25% {
</span>    <span>top: 0;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>50% {
</span>    <span>top: 200px;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>75% {
</span>    <span>top: 200px;
</span>    <span>left: 0;
</span>  <span>}
</span><span>}</span>

Malheureusement, tous les navigateurs ne prennent pas en charge le changement. Vous pouvez en savoir plus sur la volonté dans les ressources suivantes:

• Une introduction à la propriété CSS Will change de Nick Salloum
• Tout ce que vous devez savoir sur le CSS changera la propriété de Sara Soueidan.

Conclusion

pour résumer ce que nous avons couvert:

• L'utilisation de GPU peut améliorer la qualité de vos animations
• Les animations rendues par GPU doivent être de 60 images par seconde sur chaque appareil
• Utilisez des propriétés CSS conviviales gpu
• Comprendre comment forcer un élément à être rendu dans le GPU en utilisant le "Transform Hack".

Si vous avez utilisé ces techniques ou si vous avez des commentaires, n'hésitez pas à proposer vos commentaires.

Les questions fréquemment posées sur l'accélération matérielle et les animations CSS

Quel est le r?le du GPU dans les animations CSS accélérées par le matériel?

L'unité de traitement graphique (GPU) joue un r?le crucial dans les animations CSS accélérées par le matériel. Il est responsable du rendu des graphiques et du traitement d'images. Lorsque les animations CSS sont accélérées par le matériel, le GPU reprend la tache de rendre les animations de l'unité de traitement centrale (CPU). Il en résulte des animations plus lisses, plus rapides et plus efficaces, car le GPU est spécifiquement con?u pour gérer ces taches.

Comment l'accélération matérielle améliore-t-elle les performances des animations CSS?

L'accélération matérielle améliore les performances CSS? des animations CSS en déchargeant certaines des taches de traitement graphique du CPU au GPU. Cela permet au CPU de se concentrer sur d'autres taches, améliorant ainsi les performances globales du site Web ou de l'application. De plus, le GPU est mieux équipé pour gérer les taches graphiques, ce qui entra?ne des animations plus lisses et plus efficaces.

Y a-t-il des inconvénients pour utiliser des animations CSS accélérées par le matériel? Peut améliorer considérablement les performances, il existe des inconvénients potentiels. L'une des principales préoccupations est les problèmes de compatibilité. Tous les appareils ou navigateurs ne prennent pas en charge l'accélération matérielle, ce qui pourrait conduire à des expériences utilisateur incohérentes. De plus, la surutilisation de l'accélération matérielle peut entra?ner une augmentation de la consommation d'énergie, ce qui pourrait être une préoccupation pour les appareils mobiles.

Comment puis-je activer l'accélération matérielle pour les animations CSS?

Activer l'accélération matérielle pour les animations CSS Peut être fait en utilisant la propriété ?Transform? dans votre code CSS. Cette propriété déclenche le GPU pour reprendre le rendu de l'animation. Par exemple, vous pouvez utiliser ?Transform: Translatez (0)? ou ?Transform: Rotate (0deg)? pour permettre l'accélération matérielle.

Quels types d'animations CSS bénéficient le plus de l'accélération matérielle?

Les animations CSS qui impliquent des taches graphiques complexes, telles que les transformations 3D, les transitions et les animations de l'image clé, peuvent grandement bénéficier de l'accélération matérielle. Ces taches peuvent être à forte intensité de ressources lorsqu'elles sont gérées par le CPU, mais le GPU peut les traiter plus efficacement, ce qui entra?ne des animations plus lisses.

Comment puis-je assurer la compatibilité lors de l'utilisation d'animations CSS accélérées par le matériel?

Pour assurer la compatibilité lors de l'utilisation d'animations CSS accélérées par le matériel, il est important de tester votre site Web ou votre application sur divers appareils et navigateurs. Vous pouvez également utiliser des replies dans votre code CSS pour fournir des animations alternatives pour les appareils ou les navigateurs qui ne prennent pas en charge l'accélération matérielle.

L'accélération matérielle peut-elle être utilisée avec les transitions CSS?

Oui, l'accélération matérielle peut être utilisée avec les transitions CSS. En utilisant la propriété ?Transform?, vous pouvez déclencher le GPU pour rendre la transition, ce qui entra?ne une animation plus lisse et plus efficace.

Comment l'accélération matérielle affecte-t-elle la durée de vie de la batterie sur les appareils mobiles?

Bien que l'accélération matérielle puisse améliorer les performances des animations CSS, elle peut également augmenter la consommation d'énergie, affectant potentiellement la durée de vie de la batterie sur les appareils mobiles. Il est important de trouver un équilibre entre les performances et la consommation d'énergie lors de l'utilisation d'accélération matérielle.

Puis-je utiliser l'accélération matérielle pour les animations 2D?

Oui, l'accélération matérielle peut être utilisée pour les animations 2D. En utilisant la propriété ?Transform? dans votre code CSS, vous pouvez déclencher le GPU pour rendre l'animation, ce qui donne une animation plus lisse et plus efficace.

Comment puis-je optimiser mon code CSS pour l'accélération matérielle?

L'optimisation de votre code CSS pour l'accélération matérielle implique l'utilisation de la propriété ?Transformer? pour déclencher le GPU pour le rendu des animations. Il est également important d'éviter de trop utiliser l'accélération matérielle, car cela peut entra?ner une augmentation de la consommation d'énergie. De plus, tester votre site Web ou votre application sur divers appareils et navigateurs peut aider à assurer la compatibilité.

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!