Kernpunkte

• jQuery's animate() -Funktion ist praktisch, aber keine Hochleistungs-Animations-Engine, die zu Problemen mit dem Speicherverbrauch und einer niedrigen Bildrate führen kann. Es bleibt jedoch eine praktikable Option für Entwickler, die mit CSS-Animationen nicht vertraut sind oder nach Cross-Browser-Kompatibilit?t suchen.
• CSS -Animationen sind normalerweise schneller und effizienter als die Animationen von JQuery, dank der GPU -Beschleunigung. Sie haben jedoch auch einige Einschr?nkungen, einschlie?lich Kompatibilit?tsprobleme mit ?lteren Versionen von Internet Explorer, und nicht die Zeit, um die Animationsdauer zu bestimmen, was die Stimmung komplizieren kann.
• velocity.js ist ein JQuery -Plugin, das die Leistung von JQuery -Animationen ohne wesentliche ?nderungen Ihres Codes erheblich verbessert. Durch das Ersetzen von $.animate() durch $.velocity() k?nnen Entwickler h?here Bildraten erzielen und die Kettenaufrufeigenschaften von JQuery beibehalten.

Wir haben alle die animate() -Funktion von JQuery verwendet, um hervorragende Effekte auf Webseiten zu erzielen. Dann wurde uns mit der Einführung und dem Aufstieg von CSS3 mitgeteilt, dass unser Code schrecklich sei. Sie schlagen vor, dass wir alle JQuery-basierten Animationen (und normalerweise auf JavaScript-basierte Animationen) aufgeben und stattdessen CSS-basierte Animationen verwenden. Diese Ver?nderung zwingt uns, mit vielen Browser -Kompatibilit?tsproblemen und mangelnden Funktionen umzugehen. Dieser Schmerz ist vernünftig, da CSS -Animationen schneller sind als JavaScript -Animationen. Zumindest haben sie uns das gesagt. Ist das wahr? Ist die Funktion der Jquery animate() wirklich so langsam? Gibt es eine M?glichkeit, es leicht zu verbessern, ohne unseren Code zu ?ndern? Die Antwort lautet ja. In diesem Artikel werden wir einige der Grenzen der beiden M?glichkeiten verstehen, Animationen zu erstellen, und dann werden wir verstehen, wie man mit JQuery Code eine bessere Leistung erzielt.

Was ist das Problem mit JQuery?

Wir alle kennen und lieben jQuery (manche Leute m?gen es nicht wirklich). Diese Bibliothek zur Vereinfachung von HTML -Client -Skripten hat Hunderttausende von Entwicklern auf der ganzen Welt (nicht realer Daten) geholfen. Es macht das HTML -Dokument durchquert und Manipulation, Ereignishandling, Ajax und mehr zum Kinderspiel, um die Belastung der Umgang mit Inkompatibilit?t und Fehlern in allen Browsern zu erleichtern. Unter seinen Merkmalen erm?glicht JQuery auch die Erstellung von Animationen und Effekten. Damit k?nnen wir CSS -Eigenschaften animieren, Elemente verbergen, Elemente ausblenden und ?hnliche Effekte ausblenden. Jquerys Designziel war jedoch noch nie eine Hochleistungs-Animations-Engine, und es war nie beabsichtigt, wirklich komplexe CPU/GPU-konsumierende Animationen zu unterstützen. Als Beweis für diese Tatsache l?st der Ged?chtnisverbrauch von JQuery h?ufig die Müllsammlung aus und verursacht Probleme bei der Ausführung von Animationen. Darüber hinaus verwendet JQuery setInterval() anstelle von requestAnimationFrame() (mehr über requestAnimationFrame()) hinter den Kulissen, um die Animation auszuführen, was nicht dazu beitr?gt, hohe Bildraten zu generieren. Aufgrund dieser Faktoren befürwortet: ?Wer kennt das Beste“ für die Verwendung von CSS, um unsere Animationen und Effekte zu erstellen.

CSS -Animation und überg?nge

Lassen Sie uns klar sein: Die CSS -Animation ist besser als JQuery -Animation. Wenn es um Animation geht, ist JQuery m?glicherweise mehrmals langsamer als CSS. CSS -Animationen und -überg?nge haben die Vorteile, durch GPU -Hardware beschleunigt zu werden, was bei beweglichen Pixeln hervorragend ist. Dieser Faktor scheint eine enorme Verbesserung zu sein, insbesondere in Situationen, in denen die Leistung kritisch ist, wie z. B. mobile Ger?te. Das ist gro?artig, nicht wahr? Die Wahrheit ist, all dies hat Einschr?nkungen und Probleme. Die erste Einschr?nkung ist, dass nicht alle CSS -Eigenschaften durch die GPU verbessert werden k?nnen. Daher ist es falsch zu glauben, dass die Verwendung von CSS -Animationen immer gewinnen wird. Ein weiteres Problem ist, dass CSS -Animationen nicht tragbar sind, zumindest nicht in allen Browsern, die Sie m?glicherweise abzielen. Zum Beispiel funktioniert der übergang in Internet Explorer 9 und unten nicht. Schlimmer noch, Animationen in CSS basieren derzeit eher auf Prozents?tzen als auf Zeit (Sekunden oder Millisekunden). Dies bedeutet, dass die ?nderung der Dauer der Animation nach Abschluss der Animation sehr schmerzhaft sein kann, es sei denn, Sie verwenden einen Pr?prozessor wie Sass oder weniger. Schlie?lich erfordert die CSS -Animation eine gro?e Anzahl von Anbieter -Pr?fixen. Ja, wir k?nnen ein Werkzeug delegieren, um mit ihnen umzugehen, aber das ist nur eine andere Sache, über die man uns Sorgen machen muss.

Zus?tzlich zu früheren überlegungen gibt es einige andere gute Gründe, warum JQuery -Animation nicht ignoriert werden sollte. Sie sind mehr mit mangelnden F?higkeiten als mit der Schw?che der Technologie selbst zusammenh?ngen, sind aber immer noch erw?hnenswert. Wenn ein Entwickler es gewohnt ist, Animationen mit JQuery zu erstellen, besteht eine hohe Wahrscheinlichkeit, dass der Entwickler CSS nicht verwenden kann, um dieselbe Aufgabe auszuführen. Vielleicht dauert es lange, bis Entwickler den gleichen Effekt in CSS erzielen, so dass der Aufwand den Vorteil nicht wert ist. Oder Entwickler m?chten m?glicherweise keine andere Technik lernen, um hochpassbare Animationen zu erstellen. Es gibt nichts zu sch?men. Jeder hat seine eigenen Einschr?nkungen in einem bestimmten Bereich. Der Punkt hier ist, dass wir m?chten, dass die mit JQuery erstellten Animationen eine bessere Leistung haben, damit wir sie nicht in CSS -Animationen umwandeln müssen. Glücklicherweise gibt es eine L?sung.

Verbesserung der -Funktion von jQuery animate()

Die Antwort auf das L?sen von JQuery -Animationsproblemen hei?t velocity.js. Velocity.js ist

im Gegensatz zu jQuery 1.x, das ?ltere Versionen von IE verwendet, ist die Geschwindigkeit mit IE8 kompatibel. Dies sollte für die meisten Projekte kein wichtiges Problem sein. An diesem Punkt fragen Sie sich m?glicherweise, wie sich die Verwendung von Geschwindigkeitswesen auf die Codebasis auswirkt. Die Antwort lautet "auf sehr l?cherliche Weise". Um velocity.js zu integrieren, müssen wir sie nur herunterladen und in die Webseite einbeziehen, die wir verwenden m?chten. Der letzte Schritt besteht darin, <q cite="https://github.com/julianshapiro/velocity">一個 jQuery 插件，它重新實現(xiàn)了 $.animate() 以產生更高的性能（使 Velocity 也比 CSS 動畫庫更快），同時包含了改進動畫工作流程的新功能。</q> zu ersetzen, der mit $.animate(), $.velocity() erscheint, ohne ?nderungen von Parametern zu ?ndern! Diese ?nderung ist so einfach wie die Durchführung einer Suche und einem Ersatz in einem Texteditor oder einer IDE unserer Wahl. Nach Abschluss wird unsere Animationsleistung sofort verbessert. Dies ist gro?artig, weil wir unser Wissen wiederverwenden k?nnen, ohne zu viel Auswirkungen auf die Codebasis zu haben. Da es sich um ein JQuery -Plugin handelt, das Kettenanrufe h?lt, k?nnen wir weiterhin eine typische "Methode Call -Kette" von JQuery erstellen.

Schlussfolgerung

In diesem Artikel beschreibe ich einige Probleme, die JQuery -Animationen beeinflussen. Wir diskutieren, warum die CSS -Animation in den letzten Jahren stark beworben wurde, um JQuery zu ersetzen. Dann habe ich einige Einschr?nkungen von CSS und einige M?ngeln in der Leistung hervorgehoben. Schlie?lich stelle ich Sie kurz mit velocity.js ein, ein JQuery -Plugin, mit dem Sie die Leistung von JavaScript -Animationen und -Effekten verbessern k?nnen, ohne den Quellcode zu ?ndern. Dieser Artikel ist nur eine Einführung in den Vergleich zwischen JQuery, CSS und JavaScript -Animationen. Wenn Sie sich mit diesem Thema befassen m?chten, empfehle ich Ihnen dringend, die folgenden Artikel zu lesen, die von GSAP -Autoren und Velocity.JS -Autoren geschrieben wurden: - Debunking The Myth: CSS -Animation vs. JavaScript -CSS vs. JS Animation: Was ist schneller?

FAQs über die Verbesserung von JQuery -Animationen

Wie kann man die JQuery -Animation verlangsamen?

Sie k?nnen die JQuery -Animation verlangsamen, indem Sie die Dauer der Animation erh?hen. Die Dauer wird in Millisekunden in der .animate() -Methode angegeben. Wenn Sie beispielsweise die Animation verlangsamen m?chten, um 5 Sekunden lang zu dauern, sollten Sie $(selector).animate({params}, 5000); schreiben. Je gr??er die Zahl, desto langsamer die Animation.

Welche Rolle spielt die Lockerung der JQuery -Animation?

Die Lockerung der JQuery -Animation bezieht sich auf die Geschwindigkeit des Animationsfortschritts an verschiedenen Stellen w?hrend ihrer Dauer. JQuery bietet zwei integrierte Lockerungsmethoden: "Swing" und "Linear". "Swing" ist die Standard -Locking -Methode, die den Animationsfortschritt am Anfang und am Ende und schneller in der Mitte langsamer macht. "Linear" dagegen stellt sicher, dass die Animation w?hrend des gesamten Prozesses konstant ist.

Wie verbessert man die Leistung von JQuery -Animation?

Es gibt viele M?glichkeiten, die Leistung von JQuery -Animationen zu verbessern. Eine M?glichkeit besteht darin, CSS -überg?nge nach M?glichkeit zu verwenden, da sie im Allgemeinen besser abschneiden als JQuery -Animationen. Eine andere M?glichkeit besteht darin, die Anzahl der gleichzeitigen Animationen zu begrenzen. Sie k?nnen auch die requestAnimationFrame -Methode verwenden, mit der der Browser Animationen für reibungslosere Animationen optimieren kann.

Wie kann ich aufh?ren, JQuery -Animation auszuführen?

Mit der Methode .stop() k?nnen Sie die laufende JQuery -Animation stoppen. Diese Methode stoppt die aktuell ausgeführte Animation im ausgew?hlten Element. Zum Beispiel stoppt $(selector).stop(); die Animation im ausgew?hlten Element.

Wie verbindet ich mehrere Animationen in JQuery?

Sie k?nnen mehrere jQuery -Animationen verknüpfen, indem Sie einfach mehrere Animationsmethoden im selben Element aufrufen. Zum Beispiel wird $(selector).fadeIn().slideUp(); zuerst in die ausgew?hlten Elemente verblassen und dann nach oben schieben. JQuery stellt sicher, dass die Animation in der Reihenfolge des Anlaufes ausgeführt wird.

Wie kann ich in JQuery mehrere Attribute gleichzeitig animieren?

Sie k?nnen mehrere Eigenschaften gleichzeitig in JQuery animieren, indem Sie ein Objekt über die Eigenschaften übergeben, die Sie auf die .animate() -Methode animieren m?chten. Zum Beispiel wird $(selector).animate({height: "300px", width: "200px"}); gleichzeitig die H?he und Breite des ausgew?hlten Elements animieren.

Wie kann ich Callback -Funktionen in JQuery -Animation verwenden?

Die Rückruffunktion in JQuery Animation ist eine Funktion, die nach Abschluss der Animation ausgeführt wird. Sie k?nnen die Rückruffunktion als zweiter Parameter an die .animate() -Methode übergeben. Zum Beispiel $(selector).animate({params}, function(){ /* 動畫完成后要執(zhí)行的代碼 */ });.

Wie erstelle ich benutzerdefinierte Animationen in JQuery?

Sie k?nnen mit der Methode .animate() benutzerdefinierte Animationen in JQuery erstellt werden. Mit dieser Methode k?nnen Sie alle CSS -Eigenschaften animieren. Beispielsweise verschiebt $(selector).animate({left: " =50px"}); das ausgew?hlte Element nach rechts um 50 Pixel.

Wie kann man Warteschlangen- und Dequeue -Methoden in JQuery -Animation verwenden?

Die Warteschlangen- und Dequeue -Methoden in JQuery werden verwendet, um die Ausführung der Animation zu steuern. Mit der Warteschlangenmethode k?nnen Sie der Animationswarteschlange neue Animationen hinzufügen, die im ausgew?hlten Element ausgeführt werden sollen. Mit der Dequeue -Methode k?nnen Sie die n?chste Funktion in der Warteschlange l?schen und ausführen.

Wie verwendet ich die .delay() -Methode in jQuery -Animation?

Die

-Methode in JQuery wird verwendet, um die Ausführung nachfolgender Projekte in der Warteschlange zu verz?gern. Es wird normalerweise für verz?gerte Animationen verwendet. Zum Beispiel verz?gert .delay() die Fadein -Animation um 500 Millisekunden. $(selector).delay(500).fadeIn();

Das obige ist der detaillierte Inhalt vonLeicht zu verbessern jQuery -Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!