Haupt / Merkmal

Verwendung von Velocity zum einfachen Hinzufügen von Animationen

Bewegung zieht unsere Aufmerksamkeit auf sich; Es ist ein angeborener Überlebensmechanismus, der unseren Vorfahren seit Tausenden von Jahren gute Dienste geleistet hat. Es erlaubte ihnen, Raubtiere zu entdecken, die sich an sie heranschlichen. Heutzutage ist es meistens ein übrig gebliebener Instinkt, mit dem wir Webdesigner die Aufmerksamkeit und das Interesse der Benutzer auf unseren Websites lenken.

Durch Hinzufügen von Animationen und Übergängen wie Opazitätsüberblendungen, Farbänderungen, Skalierung und 3D-Bewegung wird eine ansonsten flache, statische Collage aus Wörtern und Bildern zu einer dynamischen und interessanten Site. Sie sollten Ihren Website-Designs unbedingt Animationen hinzufügen - wenn sie sparsam und zielgerichtet angewendet werden, werden sie besser.

Aber wie können Sie das genau tun? Es gibt zwei Möglichkeiten, einer Site Animationen hinzuzufügen, mit CSS und mit JavaScript.

CSS eignet sich perfekt für kleine Websites, für die nicht viel benutzerdefinierte Codierung erforderlich ist, und für einfache Benutzerinteraktionen, z. B. kleine stilistische Änderungen für die Schwebezustände von Elementen. (Oder wenn Sie einfach keine Lust haben, etwas zu programmieren!)

Für alles, was über diese einfachen Interaktionen hinausgeht, ist der beste Weg, einer Site Animation hinzuzufügen, JavaScript, und die beste moderne Animationsbibliothek dafür ist Velocity.js .

Dieser Artikel ist insofern einzigartig, als er einen grundlegenden Ansatz zum Erlernen von Webanimationen verfolgt. Wenn Sie ein Webdesigner sind, der sich nicht viel mit JavaScript beschäftigt hat, aber immer die Leistungsfähigkeit fortschrittlicher Animationen wollte, lesen Sie weiter.

Was ist Velocity.js?

Klicken Sie auf das Bild, um die Velocity.js-Demo zu sehen

Velocity ist eine kostenlose, leichtgewichtige Bibliothek, mit der Sie Ihren Websites auf einfache Weise Animationen hinzufügen können, die von den einfachsten bis zu den komplexesten Animationen reichen. Velocity übertrifft alle anderen Animationsbibliotheken, ist einfach zu verwenden und ahmt die Syntax der beliebtesten JavaScript-Bibliothek, jQuery, nach. Es wird auch von allen Browsern und Geräten gut unterstützt und wurde von großen Unternehmen wie Uber und Uber übernommen WhatsApp .

Velocity wird am besten mit jQuery verwendet, muss es aber nicht sein. Was ist jQuery? jQuery ist eine JavaScript-Bibliothek, die die Auswahl und Bearbeitung von HTML-Elementen vereinfacht. Es wurde praktisch angenommen, dass jQuery in den meisten Webprojekten verwendet wird - es ist so beliebt.

jQuery verfügt über eigene Animationswerkzeuge, die über die Funktion 'Animieren' verfügbar gemacht werden. Aufgrund der Monolithizität von jQuery werden jedoch abgehackte Animationen erstellt. Es ist auch nicht annähernd so funktionsreich wie Velocity. Mit der Geschwindigkeit können Sie die Elementauswahlkraft von jQuery nutzen und die Animationsmängel von jQuery überspringen. Der Unterschied, insbesondere zur Einrichtung eines einfachen Animationsworkflows, besteht in Tag und Nacht.

Velocity bietet einige große Vorteile gegenüber CSS- und jQuery-basierten Animationen, die ich behandeln werde, nachdem wir die Grundlagen der Verwendung durchgearbeitet haben. Zu diesen Vorteilen gehören Bildlaufanimationen, Animationsumkehrungen, physikbasierte Bewegungen und Animationsverkettungen, um Ihnen eine Vorschau auf die kommenden Entwicklungen zu geben. Einige ziemlich coole Sachen.

Lassen Sie uns zunächst mit der Verwendung beginnen.

Wie verwende ich Velocity?

Der erste Schritt ist das Herunterladen des Codes von der Velocity-Website (Kopieren Sie den Code, fügen Sie ihn in einen Texteditor ein und speichern Sie ihn als 'speed.min.js'). Alternativ können Sie es direkt in Ihren HTML-Code ziehen (wie im folgenden Codebeispiel gezeigt).

Fügen Sie in jedem Fall die Velocity-Datei mit a ein Tag vor dem schließenden Body-Tag Ihres Dokuments und vor der JavaScript-Datei, in die Sie codieren ('script.js'):

… …

Hinweis : Wenn Sie jQuery verwenden, stellen Sie sicher, dass Sie jQuery vor Velocity einschließen. Die Geschwindigkeit passt sich an das Vorhandensein von jQuery an.

Sobald der Code in einem Skript-Tag enthalten ist, können Sie das verwenden Geschwindigkeit() Funktion in Ihrer gesamten 'script.js'-Datei.

Wie führe ich diese Funktion aus?

Sie verwenden die Velocity-Funktion für ein jQuery-Element (vorausgesetzt, Sie verwenden jQuery). Angenommen, Sie haben den folgenden Absatz, den Sie animieren möchten:

This is an example element you can select and animate.

Wir können es mit jQuery mit der ID des Absatzes ('Beispiel') auswählen und in einer Variablen speichern:

var $element = $('#example');

Dadurch wird ein jQuery-Elementobjekt mit dem Namen $ element erstellt, das diesen Absatz darstellt. Mit dieser Variablen $ element können wir jetzt Geschwindigkeitsfunktionsaufrufe für dieses Element ausführen:

$element.velocity( … some command here … );

Okay, was sind die Argumente, die es akzeptiert?

Argumente

Velocity akzeptiert ein oder mehrere Argumente. Das erste Argument ist obligatorisch. Es kann entweder der Name eines der sein vordefinierte Befehle (Beispiele folgen) oder ein Objekt mit verschiedenen CSS-Eigenschaften, das animiert werden soll.

// Object defining the animation's final values of width (50%), and left (500px) $element.velocity({ width: '500px', left: '500px' });

Hinweis: Die Reihenfolge der Eigenschaften in einem Datenobjekt ist irrelevant. Alles in der Animation geschieht genau zur gleichen Zeit.

Das zweite Argument, das optional ist, ist ebenfalls ein Objekt. Es enthält Animationsoptionen wie Dauer, Beschleunigung und Verzögerung sowie Abschluss (eine Funktion, die nach Abschluss der Animation ausgeführt wird):

// Animates an element to a width of 300px over 500ms after a 1000ms delay. $element.velocity({ width: '300px' }, { duration 500, delay: 1000 });

Anders als in CSS, wo Sie mehrere numerische Werte an eine CSS-Eigenschaft wie margin (übergeben) übergeben können. Rand: '10px 5px 8px 12px' ) müssen Sie bei Velocity einen einzelnen Wert pro CSS-Eigenschaft verwenden. Daher müssen Sie jede Komponente separat einstellen: {marginRight: '10px', marginTop: '5px'…} .

Dies mag wie ein Handicap erscheinen, ist aber tatsächlich ein Vorteil. Dies ist nicht nur lesbarer und expliziter, sondern ermöglicht es Ihnen auch, individuelle Lockerungstypen für jede Untereigenschaft festzulegen, anstatt gezwungen zu sein, für alle einen Lockerungstyp zu haben. Dies gibt Ihnen direkte Kontrolle über mehr Teile Ihrer Animation!

Hinweis: CSS-Eigenschaften, die mehrere Wörter enthalten ( Rand links und Hintergrundfarbe ) kann nicht getrennt werden, sondern muss mit camelcase ( marginLeft und Hintergrundfarbe ).

Eigenschaftswerte

Wenn Sie keinen Einheitentyp angeben, nimmt Velocity einen für Sie an (normalerweise ms, px und deg). Trotzdem würde ich empfehlen, explizit zu sein, damit Sie die Einheitentypen auf einen Blick erkennen können, wenn Sie oder ein Mitarbeiter Ihren Code noch einmal durchsehen. Wenn der Wert etwas anderes als einen numerischen Wert (% oder Buchstaben) enthält, müssen Sie Anführungszeichen verwenden.

// Okay, only numerical value $element.velocity('scroll', { duration: 500 }) // Okay, uses quotes $element.velocity('scroll', { duration: '500ms' }) // Not okay, contains 'ms' without quotes $element.velocity('scroll', { duration: 500ms })

Was ist das für ein 'Lockerungsgeschäft'?

Ich habe das Wort Lockerung bisher ein paar Mal verwendet, und vielleicht sind Sie verwirrt darüber, was das bedeutet. Erleichterungen bestimmen die Geschwindigkeit einer Animation in verschiedenen Phasen während ihrer Dauer. Beispielsweise wird eine 'Easy-In' -Erleichterung zu Beginn der Animation allmählich beschleunigt und bleibt dann konstant, bis sie endet. Eine Lockerung beginnt mit einer linearen Geschwindigkeit und verlangsamt sich gegen Ende der Animation allmählich. Eine 'lineare' Lockerung hat während der gesamten Dauer eine konstante Geschwindigkeit und sieht sehr störend und roboterhaft aus.

Praktischerweise legen Sie die Lockerung mit der Option 'Lockerung' fest:

// Animate an element to a width of 500px with an easing of 'ease-in-out' $element.velocity({ width: 500 }, { easing: 'ease-in-out' });

Die Erleichterungen werden viel komplizierter, aber der Kürze halber werde ich hier aufhören. Lesen Sie Velocity's Dokumentation für mehr Informationen.

Verkettung

Das Erstellen einer Reihe von sequentiellen Animationen in CSS erfordert die manuelle Berechnung von Zeitverzögerungen und -dauern für jede einzelne Animation. Und wenn einer dieser Schritte geändert werden muss, müssen alle Animationen, die diesen Schritt ausführen, neu berechnet und ebenfalls geändert werden.

Die Geschwindigkeit ermöglicht eine einfache Verkettung von Animationen nacheinander, indem die Geschwindigkeitsfunktion nacheinander aufgerufen wird:

$element // Animates the element to a height of 300px over 1000ms .velocity({ height: 300 }, { duration: 1000 }) // Animates the element to a left position of 200px over 600ms after the width is finished animating .velocity({ top: 200 }, { duration: 600 }) // Fades the element over 200ms out after it is done moving .velocity({ opacity: 0 }, { duration: 200 });

Hier ist ein Codepen-Beispiel für die Verkettung.

Hinweis: Sie werden feststellen, dass nur der letzte Geschwindigkeitsaufruf ein ';' am Ende der Zeile. Das ist extrem wichtig. Um Animationen miteinander zu verketten, müssen alle 'Velocity'-Aufrufe zusammen für dasselbe Element ausgeführt werden. Sie können die Befehlszeile nicht mit einem Semikolon beenden. JavaScript ignoriert Leerzeichen, daher würden diese Aufrufe folgendermaßen aussehen: $ element.velocity (...). Geschwindigkeit (...). Geschwindigkeit (...) .

Zurück zu den Funktionen

Das sollte Ihnen einen Einblick in Velocity geben und wie man es benutzt. Jetzt, da Sie nicht überfordert sind, wollen wir noch einmal die coolen Vorteile beschreiben, die es gegenüber CSS und jQuery bietet.

Bildlauf

Websites mit nur einer Seite sind derzeit im Webdesign im Trend, bei denen eine Website in Abschnitte und nicht in separate Seiten unterteilt ist. Wenn Sie auf einen Navigationslink klicken, wird die Seite einfach zum entsprechenden Seitenabschnitt gescrollt. Ohne Animation ist dies ein sofortiger und erschütternder Sprung, der dem Benutzer keinen Kontext darüber bietet, wo sich dieser Inhalt im Verhältnis zum Rest der Seite befindet.

CSS kann kein Scrollen ausführen, daher ist dies eine der beliebtesten Anwendungen für JS-Animationen.

Um mit der Geschwindigkeit zu scrollen, führen Sie einfach die Funktion 'Geschwindigkeit' mit dem Befehl 'scroll' für das Element aus, zu dem Sie scrollen möchten:

$element.velocity('scroll', { duration: 1200 });

Dieser Aufruf bewirkt, dass der Browser über 1200 ms zum oberen Rand des ausgewählten Elements scrollt. Mit jQuery allein wäre dies eine viel kompliziertere mehrzeilige Funktion. Ich werde Ihnen die verwirrungsbedingten Kopfschmerzen ersparen, indem ich sie hier nicht einbeziehe.

Hier ist ein Codepen-Beispiel für das Scrollen.

Animationsumkehr

In jQuery müssen Sie die Eigenschaften des Elements manuell auf die ursprünglichen Werte animieren, um zum ursprünglichen Zustand des Elements zurückzukehren, bevor die Animation gestartet wurde. Zum Beispiel:

Mit jQuery:

// Animate a 100px tall element to a height of 200px over 500ms $element.animate({ height: '200px' }, { duration: 500 }); // Animate the element back to its original height value of 100px over 500ms $element.animate({ height: '100px' }, { duration: 500 });

Bei Velocity müssen Sie jedoch nur den umgekehrten Befehl ausführen:

// Animate a 100px tall element to a height of 200px over 500ms $element.velocity({ height: '200px' }, { duration: 500 }); // Reverse previous animation – animate back to the original height of 100px over 500ms $element.velocity('reverse');

Bei diesen vorherigen Aufrufen wird die Animation vor der Animation auf den ursprünglichen Zustand des ausgewählten Elements zurückgesetzt. Die Werte müssen nicht manuell angegeben werden.

Hier ist ein Codepen-Beispiel für die Umkehrung von Animationen.

Physikbasierte Bewegung

Die reale Welt ist nicht perfekt oder glatt - ebenso wenig wie die reale Bewegung. Es hat schnelle Teile, langsame Teile, Gewicht, Impuls und Reibung. Anders als bei CSS können Sie in Ihren JS-basierten Animationen die Physik der realen Welt nachahmen und die Dinge natürlicher erscheinen lassen. Die lineare Bewegung sieht roboterhaft (leblos) und erschütternd aus.

Um eine realistische Bewegung zu ermöglichen, akzeptiert Velocity eine Lockerung basierend auf der Federphysik. Dieser Beschleunigungstyp verwendet ein Array aus einem Spannungswert (Standard: 500) und einem Reibungswert (Standard: 20) als Parameter (siehe Geschwindigkeitsdokumentation für mehr Informationen).

// Animate the selected element to a height of 200px over the default 400ms using a spring physics easing. Spring tension is set to 250, and friction is set to 10. $element.velocity({ height: '200px', { easing: [ 250, 10 ] });

Ein hoher Spannungswert erhöht die Gesamtgeschwindigkeit und die Sprungkraft der Animation. Ein hoher Reibungswert führt dazu, dass die Animation schneller abgebremst wird und die Geschwindigkeit gegen Ende der Animation verringert wird. Durch Ändern dieser Werte wird jede Animation einzigartig, realistisch und interessant.

Die obige Beispielanimation wäre langsam und steif (niedrige Spannung) und würde sich während der gesamten Dauer nur langsam verlangsamen (geringe Reibung).

Hier ist ein Codepen-Beispiel mit Federphysik.

Großes Finale

Okay, vielleicht brauchen Sie ein paar Beispiele für echte Animationen und Velocity-Befehle. Beginnen wir mit der Animation der Breite und Höhe einer Box, wobei sowohl Verkettung als auch Animationsumkehr kombiniert werden, und verwenden wir das folgende Boxelement:

Mit folgendem CSS-Styling:

#box { width: 100px; // Set box width to 100px height: 100px; // Set box height to 100px border: solid 1px #000; // Give the box a 1px solid black border to make it visible }

Sie können seine Breite, gefolgt von seiner Höhe, animieren und dann mit den folgenden Geschwindigkeitsaufrufen auf seine ursprünglichen Abmessungen zurücksetzen:

// Select the box element by ID $('#box') // Animate to a width of 200px over 500ms .velocity({ width: 200px }, { duration: 500 }) // Animate to a height of 50px over 300ms directly after width stops animating .velocity({ height: 50px }, { duration: 300 }) // Animate back to original width and height after height stops animating .velocity('reverse');

Und jetzt fügen wir eine der nützlichsten und dennoch einfach hinzuzufügenden Funktionen hinzu: Erstellen von Navigationslinks, die zum entsprechenden Seitenabschnitt scrollen.

Angenommen, Sie haben die folgenden Navigationsleisten- und Seitenabschnitte:

Product ... About … ... ...

Wir möchten die Bildlaufanimation zum Klickereignis jedes Navigationslinks (Klasse von 'nav-link') hinzufügen, wodurch die Seite zum entsprechenden Seitenabschnitt gescrollt wird, dessen ID in der href des Links enthalten ist.

// Attach a click event to the 'nav-link' class $('.nav-link').on('click', function() { // Grab the target page section's ID from the link's (contained within 'this') href attribute var scrollTargetID = $(this).attr('href'); // Select this element by ID using jQuery var $scrollTarget = $(scrollTargetID); // Add the scroll animation to the element $scrollTarget.velocity('scroll', { duration: 1000 }); });

Es gibt einige Beispiele für die Verwendung der Geschwindigkeit für tatsächliche Seitenelemente. Weitere Beispiele finden Sie unter Velocitys Dokumentation .

Jetzt geh raus und mach das Web dynamisch

Animationen ziehen unsere Aufmerksamkeit auf sich und hauchen einer ansonsten statischen Seite Leben ein. JavaScript ist der beste Weg, sie zu Ihren Projekten hinzuzufügen - und Velocity ist die beste JavaScript-Animationsbibliothek auf dem Markt. Deshalb habe ich diesen Artikel geschrieben.

Die Verbesserung und Erweiterung von CSS-Animationen wird durch die seltenen Aktualisierungen des CSS-Standards begrenzt. Mit JavaScript erstellt die Open-Source-Community jeden Tag Dutzende neuer Bibliotheken, Plugins und Updates. Durch die Erfindung neuer Tools wird der Horizont Ihrer Animationen erweitert.

Velocity bietet viel mehr Funktionen als die hier gezeigten, und ich empfehle Ihnen, sich diese anzuschauen Dokumentation . Jetzt experimentieren!

Wörter :: Neal O'Grady

Neal O'Grady ist ein freiberuflicher irisch-kanadischer Webentwickler, Designer und Autor. Er hat über Designthemen für die geschrieben Webflow-Blog und über zufällige Gedanken an seine Persönlicher Blog .

So was? Lese das!