Machen Sie Ihre Website interaktiv und lustig mit velocity.js (keine jQuery)

In diesem Artikel wird Velocity.js vorgestellt, eine Hochleistungs-JavaScript-Animationsbibliothek von Julian Shapiro, die seine Fähigkeiten demonstriert, ohne sich auf JQuery zu verlassen. Dies ist der dritte in einer Serie, die dynamische Dom -Animationsbibliotheken jenseits von CSS erforscht. Frühere Artikel behandelten Anime.js und Kute.js.

Besonderer Dank geht an James Hibbard und die Geschwindigkeitsentwickler zusammen mit Community -Mitwirkenden für ihre Unterstützung.

Schlüsselmerkmale der Geschwindigkeit.js:

velocity.js ist ein robustes Werkzeug, um CSS -Eigenschaften, Transformationen, SVGs und Scroll -Ereignisse innerhalb von Vanilla JavaScript zu animieren. Die flexible API, ähnlich wie Jquerys $.animate(), bietet Funktionen wie Schleifen, Verzögerungen, Lockerungsoptionen (einschließlich Frühlingsphysik) und Dauerkontrolle. Incentfeeding ermöglicht eine präzise Definition von Animationsstart- und Endwerten. Darüber hinaus bietet es die Kontrolle über Animationssequenzen (Stoppen, Pause, Umkehrung, Wiederaufnahme). Das Geschwindigkeits-UI-Paket erweitert die Funktionalität mit vorgefertigten Effekten und benutzerdefinierten Animationserstellung.

animatable Elemente:

velocity.js Animate:

• numerische CSS -Eigenschaften (einschließlich Farben)
• transformiert
• SVG -Eigenschaften
• scrollenereignisse (Seite oder Container)
• Verblassen und Folienanimationen

HINWEIS: Es animiert normalerweise jeweils eine numerische Eigenschaft. Verwenden Sie für Mehrachse (z. B. translateX und translateY) separate Eigenschaften. ForceFeeding liefert eine Ausnahme, die eine gleichzeitige Wertspezifikation ermöglicht.

Optionen:

Das Optionsobjekt von

Velocity bietet Flexibilität:

• duration (Millisekunden)
• easing (JQuery UI, CSS3 -Sägnisse, Bezier -Kurven, Frühlingsphysik)
• loop (Anzahl der Wiederholungen oder true für unendlich)
• delay (Millisekunden)

finden Sie in der Geschwindigkeitsdokumentation für eine vollständige Optionsliste.

syntax:

Während velocity.js die API von JQuery teilt und es JQuery -Benutzern leicht macht, über den Übergang zu wechseln (ersetzen $.animate() durch $.velocity()), funktioniert es perfekt ohne JQuery. Die grundlegende Syntax ist:

Velocity(element, {property: value}, {option: optionValue});

Animationen verkettet:

Velocity(element1, {property: value}, {option: optionValue});
Velocity(element1, {property: value}, {option: optionValue});

Animieren mehrerer Elemente:

const elements = document.querySelectorAll('<div>');
Velocity(elements, {property: value}, {option: optionValue});

Einheiten (px, %, rem, em, vw/vh, deg) werden unterstützt. Geschwindigkeit färbt Einheiten, wenn es weggelassen wird (normalerweise px). Relative Mathematik ( =, -=, *=, /=) wird ebenfalls unterstützt.

ForceFeeding:

Anstatt sich auf Geschwindigkeit zu verlassen.js, um Anfangswerte abzurufen, verwenden Sie ForceFeeding:

Velocity(element, {property: value}, {option: optionValue});

Das Array enthält: Endwert, optionale Lockerung und Startwert.

Animationskontrolle:

Steueranimationen mit:

• Velocity(elem, 'stop');
• Velocity(elem, 'pause');
• Velocity(elem, 'reverse');
• Velocity(elem, 'resume');

Der Artikel enthält dann mehrere Demos (fallender Ball, buttongesteuerte Bouncing-Ball, Scrollenanimation, SVG-Animation und Verwendung des Geschwindigkeits-UI-Packs), das diese Konzepte veranschaulicht. Jeder Demo -Code ist über Codepen -Links innerhalb des Artikels verfügbar. Schließlich schließt der Artikel mit einem FAQ -Abschnitt, der sich mit gemeinsamen Geschwindigkeiten befasst. Der Artikel enthält auch einen Abschnitt über zusätzliche Ressourcen für weiteres Lernen.

Das obige ist der detaillierte Inhalt vonMachen Sie Ihre Website interaktiv und lustig mit velocity.js (keine jQuery). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!