Leicht zu verbessern jQuery -Animationen

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 插件，它重新实现了 $.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(){ /* 动画完成后要执行的代码 */ });.

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!