Quelle est la différence entre l'animation js et l'animation css

Différences : 1. JS est une animation image par image, chaque image est contrôlée par le code et la complexité du code est élevée ; CSS est une animation par image clé, et la partie d'animation interpolaire est complétée par le navigateur, et le la complexité du code est faible. 2. L'animation js est exécutée sur le thread principal, qui a tendance à se bloquer et à attendre ; l'animation css est exécutée sur le thread de synthèse, qui est dédié à la tâche et ne bloque pas le thread principal.

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

La différence entre l'animation js et l'animation css

Différence 1 :

js est une animation image par image, et chaque image est contrôlée par du code. Une mauvaise opération peut facilement provoquer un reflux

css. est une image clé La partie animation et interpolation est complétée par le navigateur, ce qui facilite l'optimisation du navigateur et permet un meilleur contrôle du processus d'exécution de l'animation. La complexité du code de l'animation js est supérieure à celle de l'animation CSS. js est exécuté dans Le thread principal a d'autres tâches à effectuer, ce qui peut facilement provoquer un blocage et une attente, et réduire l'efficacité de l'exécution de l'animation

Les animations CSS sont exécutées dans le thread de synthèse, et elles ne sont pas dédiées à leur travail. bloquez le thread principal, et les animations du fil de synthèse ne seront pas déclenchées. Reflow et redessiner

Animation CSS

Avantages :

(1) Les navigateurs peuvent optimiser les animations. (2) Le code est relativement simple et la direction de réglage des performances est fixe

(3) Pour les navigateurs de version basse avec de mauvaises performances de fréquence d'images, CSS3 peut être naturellement dégradé, tandis que JS nécessite l'écriture de code supplémentaire

Inconvénients :

1. Le contrôle du processus en cours d'exécution est faible et les fonctions de rappel de liaison d'événement ne peuvent pas être attachées. Les animations CSS peuvent uniquement être mises en pause, ne peuvent pas trouver un point temporel spécifique dans l'animation, ne peuvent pas inverser l'animation à mi-chemin, ne peuvent pas modifier l'échelle de temps, ne peuvent pas ajouter de fonctions de rappel à des positions spécifiques ou lier des événements de lecture, et il n'y a pas de rapport de progression

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

JS animation

Avantages :

(1) La capacité de contrôle d'animation JavaScript est très puissante, vous pouvez contrôler l'animation pendant le processus de lecture de l'animation : démarrer, mettre en pause, lire, terminer et annuler. . (2) Les effets d'animation sont plus riches que les animations CSS3. Certains effets d'animation, tels que les effets de mouvement de courbe, de scintillement d'impact et de défilement de parallaxe, ne peuvent être complétés que par des animations JavaScript

(3) CSS3 a des problèmes de compatibilité, alors que JS la plupart. du moment n'a pas de compatibilité Problème

Inconvénients :

(1) JavaScript s'exécute dans le fil principal du navigateur, et il existe d'autres scripts JavaScript, calculs de style, mises en page, tâches de dessin, etc. qui doivent être exécutés dans le thread principal, toute interférence avec eux peut provoquer un blocage du thread, entraînant une perte de trame.

(2) La complexité du code est supérieure à l'animation CSS

Résumé

Si l'animation n'est qu'un simple commutateur d'état et ne nécessite pas de contrôle de processus intermédiaire, dans ce cas, l'animation CSS est la solution préférée.

Il vous permet de mettre une logique d'animation dans des fichiers de style sans inonder votre page de bibliothèques Javascript. Cependant, si vous concevez une interface client riche très complexe ou si vous développez une application avec des états d'interface utilisateur complexes. Ensuite, vous devez utiliser l'animation js afin que votre animation puisse rester efficace et que votre flux de travail soit plus contrôlable. Ainsi, lors de la mise en œuvre de petits effets interactifs, envisagez davantage d'animations CSS. Pour certaines animations contrôlées complexes, l’utilisation de JavaScript est plus fiable.

Pour plus de connaissances sur la programmation, veuillez visiter :

Vidéos de programmation

 ! !

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!