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.
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.
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:
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.
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:
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
<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>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é.
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.
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:
pour résumer ce que nous avons couvert:
Si vous avez utilisé ces techniques ou si vous avez des commentaires, n'hésitez pas à proposer vos commentaires.
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 tâche 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 tâches.
L'accélération matérielle améliore les performances CSS? des animations CSS en déchargeant certaines des tâches de traitement graphique du CPU au GPU. Cela permet au CPU de se concentrer sur d'autres tâches, améliorant ainsi les performances globales du site Web ou de l'application. De plus, le GPU est mieux équipé pour gérer les tâches graphiques, ce qui entraîne des animations plus lisses et plus efficaces.
Comment puis-je activer l'accélération matérielle pour les animations CSS?
Quels types d'animations CSS bénéficient le plus de l'accélération matérielle?
Comment puis-je assurer la compatibilité lors de l'utilisation d'animations CSS accélérées par le matériel?
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.
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.
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.
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!
Solution au problème selon lequel les fichiers exe ne peuvent pas être ouverts dans le système win10
Comment intégrer l'idée avec Tomcat
js arrondi
Solution aux caractères tronqués lors de l'ouverture d'Excel
Comment acheter, vendre et échanger du Bitcoin
Une mémoire capable d'échanger des informations directement avec le CPU est une
Comment définir le retour à la ligne automatique dans Word
Introduction aux touches de raccourci de capture d'écran dans Win8
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
