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:
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:
Der oben beschriebene Inhalt ist hoffentlich für alle beim Erlernen von Javascript und CSS3 hilfreich. Bitte fügen Sie alle Mängel hinzu.
