Share
Durch die sorgfältige Anwendung von Animationen können Website-Schnittstellen und letztendlich das Benutzererlebnis einer Website verbessert werden. In diesem Tutorial werden wir VelocityJS, eine JavaScript-Animations-Engine für schnelle Performance-Animationen, betrachten. VelocityJS hat sich zu einer meiner Vorlieben im Umgang mit Animationen im Web entwickelt. Die Gründe dafür sind meiner Meinung nach:
Accentsconagua
RunSequence ist eine Methode in VelocityJS, mit der Animationsstapel nacheinander ausgeführt werden können. Dies ist ein eleganterer Ansatz als das Verknüpfen von Animationsfunktionen wie in jQuery. Dies allein mit CSS zu tun, ist nicht praktikabel.In diesem Tutorial gehen wir durch die Grundlagen, um Animationen mit VelocityJS auszuführen. Wir werden auch einige Features hervorheben, die unser UI-Design verbessern könnten. Lasst uns einen Anfang machen!
Angenommen, wir möchten mit jQuery eine div Rechts schreiben wir so etwas wie:
$ ("div"). animieren (left: "500px",, duration: 3000, easing: "linear"); Auf fast dieselbe Weise würden wir es mit VelocityJS so schreiben:
$ ("div"). Geschwindigkeit (links: "500px",, Dauer: 3000, Beschleunigung: "linear"); Beide Beispiele werden das verschieben div durch 500px durch Beobachten des Elements drei Sekunden lang nach rechts links Eigentum. Der sichtbare Unterschied in der Syntax ist die Methode, mit der das von VelocityJS verwendete Element animiert wird .Geschwindigkeit() anstelle von jQuery .animieren().
Möglicherweise bemerken Sie auch die Leistungsabweichung. Die Animation von jQuery fühlt sich manchmal etwas wackelig an, während VelocityJS von Anfang bis Ende wie Butter läuft. Probieren Sie es aus:
VelocityJS akzeptiert eine Reihe von CSS-Eigenschaften sowie deren Langversion, um das Element zu bearbeiten. Wir können diese Eigenschaften zusammen in einer einzigen VelocityJS-Instanz verwenden, um anspruchsvolle Animationen auszuführen. Zum Beispiel:
$ ("div"). Geschwindigkeit (borderRadius: "25px", Breite: "45px"), paddingLinks: "0", paddingRight: "0", backgroundColor: "# 8CC152", Farbe: "#fff", borderColor: "# 8CC152", boxShadowX: "0", boxShadowY: "0", duration: 350, Erleichterung: "easeInQuad"); In diesem zweiten Beispiel haben wir das behandelt div mit mehreren CSS-Eigenschaften, einschließlich Breite um es kleiner zu machen, Hintergrundfarbe, Polsterung, Box Schatten, und Grenzradius es in einen Kreis verwandeln.
Beachten Sie, dass die Eigenschaften, die aus zwei oder mehr Wörtern bestehen, in formatiert sind camelCase Format, entsprechend der JavaScript-Namenskonvention Grenzradius wird borderRadius und so weiter. Wir beschleunigen auch die Dauer auf nur 350 Millisekunden, und diesmal entscheiden wir uns für easeInQuad wie VelocityJS hat jQuery UI die Erleichterung eingebaut.
jQuery bietet einige Methoden zum Ausführen allgemeiner Animationen, z. B. .slideUp () und .ausblenden(), die Elemente allmählich verschwinden lassen. Kein Wunder also, dass VelocityJS dies auch tut. VelocityJS stellt einige Abkürzungen bereit, die in eine übergehen .VelocityJS () Beispiel.
Wir würden folgendes schreiben, um ein Element nach oben zu schieben, um den Inhalt zu verbergen:
$ ("div"). Geschwindigkeit ("slideUp", duration: 350); Um es auszublenden, würden wir schreiben:
$ ("div"). Velocity ("fadeOut", duration: 350); VelocityJS bietet auch eine Verknüpfung namens scrollen Dies kann nützlich sein, wenn Sie Links erstellen, die zu einem bestimmten Abschnitt auf der Seite führen. Im folgenden Code wird davon ausgegangen, dass wir die Verknüpfung wünschen, #geh hinauf, wenn Sie auf den Anfang der Seite zurückblättern möchten.
var $ up = $ ("# go-up"); $ up.on ("click", function () $ ("body"). Velocity ("scroll", duration: 2000, easing: "easeInBack");); So könnte das aussehen:
Eine weitere praktische Abkürzung kommt in Form von umkehren. Diese Verknüpfung ermöglicht es uns, das Element nach Abschluss der Animation in den ursprünglichen Zustand zurückzusetzen. Anhand des vorherigen Scrolling-Beispiels können wir uns bewerben umkehren um die Pfeilsymbole zu verbessern. Dazu verketten wir eine neue VelocityJS-Instanz mit umkehren hinzugefügt, Einstellung der Schleife Option zu wahr.
$ (". icon"). Velocity (translateY: "10px", loop: true). Velocity ("reverse"); Dadurch wird das Symbol nach unten verschoben 10px dann sofort wieder in die Ausgangsposition zurückkehren. Da haben wir auch die eingestellt Schleife Option zu wahr Die Animation wird unbegrenzt ausgeführt.
Weitere Animationseffekte sind im UI Pack verfügbar. Das UI-Pack ist separat vom VelocityJS-Kern als Plugin erhältlich. Sobald Sie es aufgenommen haben, haben Sie Zugriff auf eine Reihe von Effekten SlideUp, ausblenden, und scrollen Erschließung eines noch größeren Potenzials für den Aufbau lebendiger Schnittstellen.
UI Pack bietet auch zwei neue Optionen: staffeln und ziehen. Das staffeln erlaubt es uns, einen einzelnen Effekt auf ein Array von Elementen anzuwenden der Reihe nach anstatt gleichzeitig. Das ziehen Wenn diese Option auf true gesetzt ist, wird ein Gefühl von ziehen für das letzte Element im Array.
Als Beispiel habe ich eine Navigationsleiste mit einigen Menüs erstellt, von denen eines über ein Untermenü verfügt. Um das Untermenü ansprechender zu gestalten, habe ich zwei Effekte aus dem UI-Pack mit der staffeln Optionssatz.
An einem bestimmten Punkt müssen möglicherweise Animationen nacheinander an verschiedenen Elementen ausgeführt werden. Dazu müssen wir jede VelocityJS-Instanz in der Reihenfolge verschachteln, zum Beispiel:
$ ("# offcanvas"). VelocityJS (translateX: 0, duration: 300,, function () $ (". widgets"). VelocityJS (translateX: 0, Deckkraft: 0, duration: 300,, function () $ ("# close"). VelocityJS (translateY: 0, rotateZ: 0, duration: 150););); Die obige Funktion führt zuerst die Animation der aus $ body, dann $ nav sobald es fertig ist, und zuletzt das $ Menü. Leider ist dies kein eleganter Ansatz und auch nicht ideal. Wenn Sie über ein Dutzend Animationen verfügen, ist die Verwaltung des Codes unpraktisch.
Zusätzlich zu den Animationseffekten enthält das UI Pack eine Methode namens RunSequence. Dies ist genau darauf ausgelegt, unsere Sequenzierungsprobleme zu lösen. Animationen ordentlich zu stapeln und in der entsprechenden Reihenfolge auszuführen. Mit dem obigen Code könnten wir ihn als JavaScript-Objekt umschreiben, wobei das ausgewählte Element innerhalb von definiert ist e Eigenschaft, die in a aufgeführten CSS-Eigenschaften p Eigenschaft, während die Animationsoptionen in der festgelegt werden O Eigentum.
var animationSequence = [e: $ ("# offcanvas"), p: translateX: 0, o: Dauer: 300, e: $ (". widget"), p: translateX: 0, Deckkraft: 0, o: Dauer: 300, e: $ ("# close"), p: translateY: 0, drehenZ: 0, o: Dauer: 150]; $ .Velocity.RunSequence (animationSequence); Ich habe den obigen Code zu einem funktionierenden Off-Canvas-Layout erweitert. Geben Sie es vor, und überprüfen Sie die JavaScript-Registerkarte, um den vollständigen Quellcode.fffffff anzuzeigen
Ich halte VelocityJS für eine bevorzugte Alternative zu jQuery und CSS-Animationen, insbesondere wenn interaktive Schnittstellen mit mehreren Animationen erstellt werden. VelocityJS ist einfach zu bedienen, enthält vorgefertigte Animationen und ist es vor allem schnell. Verwenden Sie es verantwortungsbewusst. Wie oft gesagt: Mit tollen Funktionen kommt große Verantwortung.
