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

Unterschiede: 1. Die Steuerungsfähigkeit der JS-Animation ist stärker als die der CSS3-Animation. 2. Der Effekt der JS-Animation ist umfangreicher als der der CSS3-Animation. 3. In den meisten Fällen weist die JS-Animation keine Kompatibilitätsprobleme auf CSS3-Animation weist Kompatibilitätsprobleme auf. 4. Die Komplexität der JS-Animation ist höher als die der CSS3-Animation.

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

JS-Animation

Vorteile:

• js Animationssteuerungsfähigkeit ist stark, Sie können die Animation während des Animationsprozesses fein steuern, starten, pausieren, beenden und abbrechen ist alles möglich

• Animationseffekte Umfangreicher als CSS3 Animationen wie Kurvenbewegung, Aufprallflimmern, Parallaxen-Scrolling-Effekt können nur mit JS-Animationen abgeschlossen werden

• JS-Animationen weisen in den meisten Fällen keine Kompatibilitätsprobleme auf, während CSS3-Animationen Kompatibilitätsprobleme aufweisen

Nachteile

• Die Komplexität Die Anzahl der js-Animationen ist höher als die von css3

• js wird im Hauptthread des Animationsbrowsers ausgeführt, und der Hauptthread verfügt auch über andere JavaScript-Skripte, Stilberechnungen, Layouts, Zeichenaufgaben usw., die möglicherweise störend wirken Es kommt zu einem Blockieren. JS-Animationen erfordern häufig eine häufige Manipulation der CSS-Eigenschaften, um visuelle Animationseffekte zu erzielen, was viel Leistung verbraucht. insbesondere auf mobilen Geräten, bei denen der dem Browser zugewiesene Speicher nicht so großzügig ist.

• CSS3-Animation

Vorteile:

1. Warum sagen Sie das in manchen Fällen, weil es bedingt ist:

In Browsern, die auf Chromium basieren

Gleichzeitig löst die CSS-Animation weder Layout noch Paint aus. Wenn CSS-Animation oder JS-Animation Paint oder Layout auslösen, muss der Hauptthread den Ebenenbaum neu berechnen. Zu diesem Zeitpunkt blockiert die CSS-Animation oder JS-Animation nachfolgende Vorgänge.

• Im Hauptthread wird ein Layer-Baum (LayerTreeHost) verwaltet und TiledLayer verwaltet. Im Compositor-Thread wird derselbe LayerTreeHostImpl verwaltet und der Inhalt der beiden Bäume wird in einer Kopierbeziehung verwaltet. Daher können sie sich nicht gegenseitig stören, wenn Javascript LayerTreeHost im Hauptthread ausführt, kann der Compositor-Thread LayerTreeHostImpl zum Rendern verwenden. Wenn Javascript ausgelastet ist und der Hauptthread stecken bleibt, verläuft der Compositing-Vorgang auf dem Bildschirm ebenfalls reibungslos.
• Um angehaltene Animationen zu verhindern, werden Maus- und Tastaturnachrichten zuerst an den Compositor-Thread und dann an den Haupt-Thread verteilt. Auf diese Weise kann der Compositor-Thread immer noch auf einige Nachrichten reagieren, wenn der Haupt-Thread beschäftigt ist. Wenn beispielsweise die Maus scrollt und der Haupt-Thread beschäftigt ist, verarbeitet der Compositor-Thread auch die Bildlaufnachricht und scrollt den Seitenteil der übermittelt wurde (der nicht übermittelte Teil wird beschönigt).

  
  2. Einige Effekte können gezwungen werden, Hardwarebeschleunigung zu verwenden (über die GPU, um die Animationsleistung zu verbessern).

  Nachteile

Die Steuerung des laufenden Prozesses ist schwach, CSS3-Animation kann nur die Pause und Fortsetzung der Animation steuern In bestimmten Szenarien kann die Rückruffunktion nicht an einer bestimmten Stelle hinzugefügt werden

• Der Code ist lang. Möchte man mit CSS etwas komplexere Animationen umsetzen, wird der CSS-Code am Ende sehr umständlich.

• Die Voraussetzung ist, dass CSS-Animationen flüssiger sind als JS-Animationen.

js führt einige komplexe Aufgaben aus.

CSS-Animationen lösen weniger oder keine Schmerzen und Layouts aus, dh Neuzeichnen und Umfließen, wie z. B. CSS, das durch Ändern generiert wird die folgenden Eigenschaften: Animation

backface-visibility
• opacity
• perspective (Elementansicht festlegen)
  • perspective-origin
  • transfrom
  • Einige Eigenschaften können 3D-Beschleunigung und GPU-Hardwarebeschleunigung aktivieren, z. B. bei Verwendung von TranslateZ für Transform 3D-Transformation
  In Browsern, die auf Chromium basieren, scheint dies eine Optimierung des Kernels zu sein. Wenn sich das CSS-Animationswissen in Transform und Deckkraft ändert, kann die gesamte CSS-Animation im Compositor-Thread abgeschlossen werden (während die JS-Animation ausgeführt wird). der Hauptthread), sodass das Rendern von CSS-Animationen den Hauptthread nicht beeinträchtigt.
• Zusammenfassung

Zurück zur täglichen Entwicklung: Wenn Bedarf an Animation besteht, muss zunächst darüber nachgedacht werden, ob diese so weit wie möglich realisiert werden kann. Wenn sowohl CSS-Animationen als auch JS-Animationen realisiert werden können, müssen wir anhand der obigen Zusammenfassung abwägen, welche Leistung besser ist. Kurz gesagt, CSS-Animationen sind nicht unbedingt besser als JS-Animationen. Dies hängt von den spezifischen Anforderungen und Geschäftsszenarien ab.

Lernvideo-Sharing: CSS-Video-Tutorial

,

Javascript-Lern-Tutorial

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