Quelle est la différence entre l'animation CSS3 et l'animation JS

Différences : 1. La capacité de contrôle de l'animation js est plus forte que celle de l'animation css3 ; 2. L'effet de l'animation js est plus riche que celui de l'animation css3 3. Dans la plupart des cas, l'animation js n'a pas de problèmes de compatibilité, tandis que L'animation CSS3 a des problèmes de compatibilité ; 4. La complexité de l'animation JS est supérieure à celle de l'animation CSS3.

L'environnement d'exploitation de ce tutoriel : système Windows 7, CSS3&&javascript version 1.8.5, ordinateur Dell G3.

Animation JS

Avantages :

• La capacité de contrôle de l'animation js est forte, vous pouvez contrôler finement l'animation pendant le processus d'animation, démarrer, mettre en pause, terminer et annuler peuvent tous être effectués

• Effets d'animation Plus riches que CSS3 animation, telle que le mouvement de courbe, le scintillement d'impact, l'effet de défilement de parallaxe, seule l'animation js peut compléter de l'animation js est supérieur à celui de css3

• js est exécuté dans le thread principal du navigateur d'animation, et le thread principal contient également d'autres scripts JavaScript, calculs de style, mise en page, tâches de dessin, etc., qui peuvent interférer avec Cela provoque un blocage. Une perte de trame se produit

Les animations JS nécessitent souvent des manipulations fréquentes des propriétés CSS du DOM pour obtenir des effets d'animation visuels. À ce stade, le navigateur doit constamment effectuer un redessin et un réarrangement, ce qui consomme beaucoup de performances. surtout sur les appareils mobiles où la mémoire allouée au navigateur n'est pas si généreuse.

• Animation CSS3

Avantages :

• 1. Dans certains cas, le navigateur peut optimiser l'animation. Pourquoi dites-vous cela dans certains cas, car c'est conditionnel :

• Dans les navigateurs basés sur Chromium

. Dans le même temps, l'animation CSS ne déclenche pas la mise en page ou la peinture. Lorsque l'animation CSS ou l'animation JS déclenche la peinture ou la mise en page, le thread principal doit recalculer l'arborescence des calques. À ce stade, l'animation CSS ou l'animation JS bloquera les opérations ultérieures.

Dans le thread principal, une arborescence Layer (LayerTreeHost) est maintenue et TiledLayer est gérée. Dans le thread compositeur, le même LayerTreeHostImpl est géré et LayerImpl est géré. Par conséquent, ils ne peuvent pas interférer les uns avec les autres. Lorsque Javascript exploite LayerTreeHost dans le thread principal, le thread du compositeur peut utiliser LayerTreeHostImpl pour le rendu. Lorsque Javascript est occupé et que le thread principal est bloqué, le processus de composition à l'écran est également fluide.

Afin d'éviter une animation suspendue, les messages de la souris et du clavier seront d'abord distribués au fil de discussion du compositeur, puis au fil de discussion principal. De cette façon, lorsque le thread principal est occupé, le thread du compositeur peut toujours répondre à certains messages. Par exemple, lorsque la souris défile et que le thread principal est occupé, le thread du compositeur traitera également le message défilant et fera défiler la partie de la page. qui a été soumis (la partie non soumise sera blanchie à la chaux).

• 2. Certains effets peuvent être forcés d'utiliser l'accélération matérielle (via le GPU pour améliorer les performances de l'animation)
• Inconvénients

  Le contrôle du processus en cours d'exécution est faible, l'animation CSS3 ne peut contrôler que la pause et la poursuite de l'animation dans Dans certains scénarios, la fonction de rappel ne peut pas être ajoutée à un emplacement spécifique
  

Le code est long. Si vous souhaitez utiliser CSS pour implémenter des animations un peu plus complexes, le code CSS deviendra finalement très fastidieux.

Le principe selon lequel l'animation CSS est plus fluide que l'animation js

• js effectue certaines tâches complexes
  L'animation CSS est moindre ou ne déclenche pas de douleur et de mise en page, c'est-à-dire un redessin et une redistribution, comme le CSS généré par le changement les propriétés suivantes Animation
• backface-visibility
  opacity

perspective (set element view)

perspective-origin

• transfrom
• • Certaines propriétés peuvent activer l'accélération 3D et l'accélération matérielle GPU, par exemple lors de l'utilisation de translationZ de transform pour Transformation 3D
  • Dans les navigateurs basés sur Chromium, cela semble être une optimisation du noyau. Lorsque les connaissances en matière d'animation CSS changent de transfrom et d'opacité, l'intégralité de l'animation CSS peut être complétée dans le thread du compositeur (tandis que l'animation JS sera exécutée dans. le thread principal), afin que le rendu de l'animation CSS n'affecte pas le thread principal.
  • Résumé
  • Retour au développement quotidien, lorsqu'il y a un besoin d'animation, la première considération doit être de savoir si elle peut être réalisée autant que possible. Si l’animation CSS et l’animation JS peuvent être réalisées, nous devrons peser la question de savoir quelle performance est la meilleure en fonction du résumé ci-dessus. En bref, l'animation CSS n'est pas nécessairement meilleure que l'animation JS. Cela dépend des besoins spécifiques et des scénarios métiers.
Partage de vidéos d'apprentissage :
• Tutoriel vidéo CSS
,
• Tutoriel d'apprentissage Javascript

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!