Zusammenfassung der gemeinsamen Verwendung von Javascript und CSS3-Animation_Javascript-Fähigkeiten-js-Tutorial-php.cn

Zusammenfassung der gemeinsamen Verwendung von Javascript und CSS3-Animation_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 16:10:31

Original

1174 Leute haben es durchsucht

Als HTML5 und CSS3 allmählich zum Mainstream wurden, bin ich immer noch sehr daran gewöhnt, mit js einige einfache Animationen zu erstellen. Denn nicht alle Desktop-Browser unterstützen CSS3. Benutzer sind auch sehr seltsam. Nicht jeder Benutzer kann Benutzergewohnheiten entwickeln. Es gibt immer viele Leute, die denken, dass win7.win8 nicht so nützlich ist wie XP. Beim Mobiltelefon sieht es jedoch ganz anders aus. Die Unterstützung des mobilen Browsers für HTML5 und CSS3 ist immer noch sehr gut. Allerdings sind die Verarbeitungsmöglichkeiten der Mobiltelefon-Hardware sehr begrenzt. Heutzutage, wo Quad-Core- und Acht-Core-Mobiltelefone weit verbreitet sind, gibt es immer noch Leute wie mich, die Dual-Core- oder Single-Core-Mobiltelefone verwenden. Obwohl js gut ist, habe ich nicht viel Kontakt damit, sodass ich das Gefühl nicht gut anpassen kann. Eine einfache Seitenfolie läuft auf einem i7-PC sehr reibungslos, aber auf meinem Dual-Core-Telefon friert es ein, friert ein, friert ein und friert ein. Sehr deprimierend. Aus diesem Grund habe ich lange danach gesucht und viel gelesen. Schließlich habe ich vor nicht allzu langer Zeit eine relativ einfache Methode gefunden: Verwenden Sie CSS3, um Animationen durchzuführen.

In der Vergangenheit verwendeten mehr Menschen zusätzlich zu den Animations- und anderen Animationsfunktionen von Jquery setTimeout und setInterval, um den Rand, die Breite, den oberen Rand und andere Attribute eines Elements zyklisch zu ändern. Genau aus diesem Grund bin ich verwirrt.

Erstens werden setTimeout und setInterval nicht kontinuierlich ausgeführt, wenn Sie sie auf 0 ms setzen. Ich habe dieses Geheimnis versehentlich beim Debuggen in iscroll entdeckt. Es stellt sich heraus, dass die Berechnung der Timer-Verzögerung von der integrierten Uhr des Browsers abhängt und die Genauigkeit der Uhr von der Häufigkeit der Uhraktualisierungen abhängt. Das Aktualisierungsintervall für IE8 und frühere IE-Versionen beträgt 15,6 Millisekunden. Es ist vorbei, ich möchte, dass es in 10 ms eine 1-Pixel-Verschiebung durchführt, aber es schafft es nicht rechtzeitig.

Und was ist mit der Karte passiert? Steckt fest, weil der Code nicht gut geschrieben ist. Schließlich ist js Single-Threaded. Sobald zeitaufwändige Aktionen ausgeführt werden, reagiert die Benutzeroberfläche möglicherweise nicht. Obwohl wir setTimeout verwenden, scheint die Schnittstelle gerade aufgrund von setTimeout instabil, aber nicht reibungslos zu sein. Da dieses Mal nach der Ausführung von setTimeout im Intervall vor der nächsten Ausführung wahrscheinlich eine weitere zeitaufwändige Aktion auftritt, wird die Ausführung von setTimeout auf unbestimmte Zeit verzögert. Was dann? Karte! Der nächste Grund für die Karte besteht jedoch darin, dass beim Ändern des ursprünglichen Attributs versehentlich das Browser-Layout (dh Relayout) ausgelöst wird. Dieses Problem soll zeitaufwändig sein, aber in vielen Fällen kann es ignoriert werden. Aber oft kann es nicht ignoriert werden.

Zusätzlich zu den beiden oben genannten Absätzen gibt es noch ein weiteres Problem: Bei vielen Mobiltelefonen fühlt es sich immer wie ein Bild nach dem anderen an, und ein Bild kann länger und das andere kürzer sein. Das ist wirklich ein Rhythmus, der Menschen verkrüppeln kann. Warum passiert das? Es hat immer noch etwas mit der Verzögerung des Settimeouts zu tun. Ausgelassene Frames. Dieses Problem betrifft die Aktualisierungsfrequenz des Monitors. Es ist einfach zu kompliziert.

Am Ende habe ich mich für CSS3 entschieden, js ändert die Attribute von Elementen dynamisch und verwendet Transition, um die Ausführungszeit der Animation zu steuern. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

$("#test").width(200);

Auf diese Weise beträgt die Breite dieses Divs nach 1 Sekunde 200 Pixel. Es ist nicht so, dass Sun Wukong sich in einen Pfirsich verwandelte und plötzlich größer wurde, er bewegte sich langsam vorwärts, ohne stecken zu bleiben. Und die Verwendung von CSS-Animationen hat einen Vorteil: Sie wird nicht durch zeitaufwändiges JS beeinträchtigt. Obwohl sich der UI-Thread und der JS-Thread im Browser gegenseitig ausschließen, gilt dies nicht für CSS-Animationen, und viele Browser können auch Hardwarebeschleunigung aktivieren (z. B. Chrome). Obwohl Browser-Relayouts normalerweise nicht sehr offensichtlich sind, sollten Sie versuchen, groß angelegte Relayouts zu vermeiden. Fügen Sie also -webkit-transform: TranslateZ(0); oder -webkit-transform: Translate3d(0,0,0); zum animierten Element hinzu, damit der Browser diese Ebene unabhängig rendert. Selbst wenn eine Neugestaltung unumgänglich ist, wird die Fläche auf diese Weise kleiner. Die Verwendung von Translate anstelle von Margin ist in der Tat eine sehr kluge Entscheidung.

Abschließend sind hier einige häufig verwendete Eigenschaften, die bei Änderungen eine Weiterleitung auslösen:

Code kopieren Der Code lautet wie folgt:

Breite 

Höhe 

​Polsterung 

Rand 

​Anzeige 

​Rahmenbreite 

Rand 

​Mindesthöhe

Der oben beschriebene Inhalt ist hoffentlich für alle beim Erlernen von Javascript und CSS3 hilfreich. Bitte fügen Sie alle Mängel hinzu.

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

Zusammenfassung der gemeinsamen Verwendung von Javascript und CSS3-Animation_Javascript-Fähigkeiten