Was ist der Unterschied zwischen JS-Animation und CSS-Animation?

Unterschiede: 1. JS ist eine Frame-für-Frame-Animation, jedes Frame wird durch Code gesteuert und die Codekomplexität ist hoch; CSS ist eine Schlüsselframe-Animation und der Tween-Animationsteil wird vom Browser vervollständigt Die Codekomplexität ist gering. 2. Die JS-Animation wird im Hauptthread ausgeführt, was leicht zu Blockierungen und Wartezeiten führen kann. Die CSS-Animation wird im Synthesethread ausgeführt, der für ihre Arbeit vorgesehen ist und den Hauptthread nicht blockiert.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3 und Javascript Version 1.8.5, Dell G3-Computer.

Der Unterschied zwischen JS-Animation und CSS-Animation

Unterschied 1:

js ist eine Frame-für-Frame-Animation, und jeder Frame wird durch Code gesteuert. Eine unsachgemäße Bedienung kann leicht zu einem Rückfluss führen ist ein Schlüsselbild. Der Animations- und Tweening-Animationsteil wird vom Browser vervollständigt, was die Browseroptimierung erleichtert und eine bessere Kontrolle des Animationsausführungsprozesses ermöglicht. Die Codekomplexität der JS-Animation ist höher als die der CSS-Animation:

js-Animationen werden im Hauptthread ausgeführt, was leicht zu Blockierungen und Wartezeiten führen und die Effizienz der Animationsausführung verringern kann.

CSS-Animationen werden im Synthesethread ausgeführt, der für den Job vorgesehen ist Der Hauptthread und die Animation des Synthesethreads werden nicht ausgelöst. Reflow und Neuzeichnen. CSS-Animation. Vorteile: (1) Browser können Animationen optimieren.

(2) Der Code ist relativ einfach und die Richtung der Leistungsoptimierung ist festgelegt

(3) Bei Browsern mit niedriger Version und schlechter Bildratenleistung kann CSS3 auf natürliche Weise beeinträchtigt werden, während JS das Schreiben von zusätzlichem Code erfordert

Nachteile :

1. Die laufende Prozesssteuerung ist schwach und ereignisbindende Rückruffunktionen können nicht angehängt werden. CSS-Animationen können nur angehalten werden, können keinen bestimmten Zeitpunkt in der Animation finden, können die Animation nicht zur Hälfte umkehren, können die Zeitskala nicht ändern, können keine Rückruffunktionen an bestimmten Positionen hinzufügen oder Wiedergabeereignisse binden und es gibt keinen Fortschrittsbericht2 , Der Code ist ausführlich. Möchte man mit CSS etwas komplexere Animationen umsetzen, wird der CSS-Code am Ende sehr umständlich.

JS-Animation

Vorteile:

(1) Die JavaScript-Animationssteuerungsfunktion ist sehr stark, Sie können die Animation während des Animationswiedergabevorgangs steuern: Starten, Anhalten, Abspielen, Beenden und Abbrechen .

(2) Animationseffekte sind umfangreicher als CSS3-Animationen. Einige Animationseffekte, wie z. B. Kurvenbewegungen, Aufprallflimmern und Parallaxen-Scrolling-Effekte, können nur durch JavaScript-Animationen vervollständigt werden.

(3) Bei CSS3 gibt es Kompatibilitätsprobleme, bei JS am meisten Derzeit gibt es kein Kompatibilitätsproblem

Nachteile:

(1) JavaScript wird im Hauptthread des Browsers ausgeführt, und es müssen andere JavaScript-Skripte, Stilberechnungen, Layouts, Zeichenaufgaben usw. ausgeführt werden Störungen im Hauptthread können dazu führen, dass der Thread blockiert wird, was zu einem Frame-Verlust führt. (2) Die Codekomplexität ist höher als bei CSS-Animationen

Zusammenfassung

Wenn es sich bei der Animation nur um einen einfachen Zustandswechsel handelt und keine Zwischenprozesssteuerung erforderlich ist, ist in diesem Fall die CSS-Animation die bevorzugte Lösung.

Es ermöglicht Ihnen, Animationslogik in Stildateien einzufügen, ohne Ihre Seite mit Javascript-Bibliotheken zu überfluten.

Allerdings, wenn Sie eine sehr komplexe Rich-Client-Schnittstelle entwerfen oder eine APP mit komplexen UI-Zuständen entwickeln. Dann sollten Sie js-Animation verwenden, damit Ihre Animation effizient bleibt und Ihr Workflow besser kontrollierbar ist.

Wenn Sie also einige kleine interaktive Effekte implementieren, sollten Sie mehr CSS-Animationen in Betracht ziehen. Bei einigen komplexen gesteuerten Animationen ist die Verwendung von JavaScript zuverlässiger.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Programmiervideos

! !

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen JS-Animation und CSS-Animation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!