Share
KUTE.js ist eine JavaScript-basierte Animations-Engine, die sich auf die Leistung und Speichereffizienz konzentriert, während verschiedene Elemente auf einer Webseite animiert werden. Ich habe bereits eine Serie über die Verwendung von Anime.js geschrieben, um JavaScript-basierte Animationen zu erstellen. Dieses Mal erfahren Sie mehr über KUTE.js und wie wir es verwenden können, um ua CSS-Eigenschaften, SVG- und Textelemente zu animieren.
Bevor wir in einige Beispiele eintauchen, installieren wir zuerst die Bibliothek. KUTE.js verfügt über eine Kern-Engine. Außerdem gibt es Plugins zur Animation verschiedener CSS-Eigenschaften, SVG-Attribute oder Text. Sie können von beliebten CDNs wie cdnjs und jsDelivr direkt auf die Bibliothek zugreifen.
Sie können KUTE.js auch mithilfe von NPM oder Bower mithilfe der folgenden Befehle installieren:
npm install --save kute.js Installieren von --save kute.js
Sobald Sie die Bibliothek in Ihre Projekte aufgenommen haben, können Sie Ihre eigenen Animationssequenzen erstellen.
Beim Erstellen Ihrer Animation mit KUTE.js müssen Sie Tween-Objekte definieren. Diese Tween-Objekte bieten alle animationsbezogenen Informationen für ein oder mehrere Elemente. Dazu gehören das Element selbst, die Eigenschaften, die Sie animieren möchten, die Dauer der Animation und andere Attribute wie Wiederholungsanzahl, Verzögerung oder Versatz.
Du kannst den ... benutzen .zu() Methode oder die .von zu() Methode, um eine Reihe von CSS-Eigenschaften von einem Wert zu einem anderen zu animieren. Das .zu() Die Methode animiert die Eigenschaften von ihrem Standardwert oder ihrem berechneten / aktuellen Wert bis zu einem endgültigen bereitgestellten Wert. Im Falle der .von zu() Methode müssen Sie sowohl den Anfangs- als auch den Endanimationswert angeben.
Das .zu() Diese Methode ist nützlich, wenn Sie den aktuellen oder Standardwert der Eigenschaft, die Sie animieren möchten, nicht kennen. Ein großer Nachteil dieser Methode ist, dass die Bibliothek den aktuellen Wert aller Eigenschaften selbst berechnen muss. Dies führt zu einer Verzögerung von einigen Millisekunden nach dem Anruf .Start() um die Animation zu starten.
Das .von zu() Mit dieser Methode können Sie die Start- und Endanimationswerte selbst festlegen. Dies kann die Leistung der Animationen geringfügig verbessern. Sie können jetzt auch die Einheiten für den Anfang und das Ende von Werten angeben und Überraschungen während des Animationsverlaufs vermeiden. Ein Nachteil bei der Verwendung .von zu() Sie können also nicht mehrere Transformationseigenschaften auf verketteten Tweens stapeln. In solchen Fällen müssen Sie die .zu() Methode.
Erinnere dich an beide .von zu() und .zu() sollen verwendet werden, wenn Sie einzelne Elemente animieren. Wenn Sie mehrere Elemente gleichzeitig animieren möchten, müssen Sie beide verwenden .alle zu() oder .allFromTo (). Diese Methoden funktionieren genau wie ihre Einzelelementelemente und erben alle ihre Attribute. Sie bekommen auch ein Extra Versatz Attribut, das die Verzögerung zwischen dem Start der Animation für verschiedene Elemente bestimmt. Dieser Versatz wird in Millisekunden angegeben.
Hier ist ein Beispiel, das die Deckkraft von drei verschiedenen Kästchen nacheinander animiert.
Das folgende JavaScript wird zum Erstellen der obigen Animationssequenz verwendet:
Accentsconagua
var theBoxes = document.querySelectorAll (". box"); var startButton = document.querySelector (". start"); var animateOpacity = KUTE.allFromTo (theBoxes, Deckkraft: 1, Deckkraft: 0,1, Offset: 700); startButton.addEventListener ("click", function () animateOpacity.start ();, false);Alle obigen Kästchen haben eine Box Klasse, die verwendet wurde, um sie alle mit der querySelectorAll () Methode. Das allFromTo () Die Methode in KUTE.js wird verwendet, um die Deckkraft dieser Kästchen von 1 bis 0,1 mit einem Versatz von 700 Millisekunden zu animieren. Wie Sie sehen, startet das Tween-Objekt die Animation nicht von selbst. Sie müssen das anrufen Start() Methode, um die Animation zu starten.
Im vorherigen Abschnitt haben wir die verwendet Start() Methode, um unsere Animationen zu starten. Die Bibliothek KUTE.js bietet auch einige andere Methoden, mit denen die Wiedergabe der Animation gesteuert werden kann.
So können Sie beispielsweise jede gerade laufende Animation mit Hilfe von stoppen halt() Methode. Denken Sie daran, dass Sie diese Methode verwenden können, um die Animation nur der in einer Variablen gespeicherten Tween-Objekte zu stoppen. Die Animation für jedes Tween-Objekt, das spontan erstellt wurde, kann mit dieser Methode nicht angehalten werden.
Sie haben auch die Möglichkeit, eine Animation mit Hilfe der Taste einfach anzuhalten Pause() Methode. Dies ist hilfreich, wenn Sie die Animation zu einem späteren Zeitpunkt wieder aufnehmen möchten. Sie können entweder verwenden fortsetzen() oder abspielen() um eine angehaltene Animation wieder aufzunehmen.
Das folgende Beispiel ist eine aktualisierte Version der vorherigen Demo mit allen vier hinzugefügten Methoden.
Hier ist der JavaScript-Code, der zum Hinzufügen der Start-, Stopp-, Wiedergabe- und Pause-Funktion benötigt wird.
var theBoxes = document.querySelectorAll (". box"); var startButton = document.querySelector (". start"); var stopButton = document.querySelector (". stop"); var pauseButton = document.querySelector (". pause"); var resumeButton = document.querySelector (". resume"); var animateOpacity = KUTE.allFromTo (theBoxes, Deckkraft: 1, Deckkraft: 0,1, Offset: 700, Dauer: 2000); startButton.addEventListener ("click", function () animateOpacity.start ();, false); stopButton.addEventListener ("click", function () animateOpacity.stop ();, false); pauseButton.addEventListener ("click", function () animateOpacity.pause ();, false); resumeButton.addEventListener ("click", function () animateOpacity.resume ();, false); Ich habe die Animationsdauer auf 2.000 Millisekunden geändert. Dies gibt uns genug Zeit, um verschiedene Tasten zu drücken und zu sehen, wie sie die Animationswiedergabe beeinflussen.
Du kannst den ... benutzen Kette() Methode, um verschiedene Tweens miteinander zu verketten. Sobald verschiedene Tweens angekettet wurden, wird das als Start() Methode auf andere Tweens, nachdem ihre eigene Animation beendet ist.
Auf diese Weise können Sie verschiedene Animationen in einer Sequenz abspielen. Sie können verschiedene Tweens miteinander verketten, um sie in einer Schleife abzuspielen. Das folgende Beispiel soll es deutlich machen:
var animateOpacity = KUTE.allFromTo (theBoxes, Deckkraft: 1, Deckkraft: 0,1, Offset: 100, Dauer: 800); var animateRotation = KUTE.allFromTo (theBoxes, Rotation: 0, Rotation: 360, Offset: 250, Dauer: 800); opacityButton.addEventListener ("click", function () animateOpacity.start ();, false); RotateButton.addEventListener ("click", function () animateRotation.start ();, false); chainButton.addEventListener ("click", function () animateOpacity.chain (animateRotation); animateOpacity.start ();, false); loopButton.addEventListener ("click", function () animateOpacity.chain (animateRotation); animateRotation.chain (animateOpacity); animateOpacity.start ();, false);Wir hatten bereits ein Tween, um die Deckkraft zu animieren. Wir haben jetzt ein weiteres hinzugefügt, das die Rotation unserer Boxen animiert. Die ersten beiden Schaltflächen animieren die Deckkraft und die Drehung nacheinander. Die dritte Taste löst die Verkettung aus animateOpacity mit animateRotation.
Die Verkettung selbst startet die Animation nicht, also verwenden wir auch die Start() Methode zum Starten der Deckkraftanimation. Mit der letzten Taste werden beide Tweens miteinander verkettet. Diesmal werden die Animationen nach dem Start unbegrenzt abgespielt. Hier ist eine CodePen-Demo, die den gesamten obigen Code in Aktion zeigt:
Um zu verstehen, wie die Verkettung funktioniert, müssen Sie die Tasten in einer bestimmten Reihenfolge drücken. Klicke auf das Deckkraft animieren Klicken Sie zuerst auf die Schaltfläche und Sie werden sehen, dass die Opazitätsanimation nur einmal abgespielt wird und dann nichts anderes passiert. Drücken Sie jetzt die Rotation animieren und Sie werden sehen, dass sich die Boxen einmal drehen und dann nichts anderes passiert.
Danach drücken Sie die Kettenanimationen Wenn Sie auf die Schaltfläche klicken, wird die Opazitätsanimation zuerst abgespielt. Sobald die Iteration abgeschlossen ist, beginnt die Rotationsanimation von alleine. Dies geschah, weil die Rotationsanimation jetzt an die Deckkraftanimation gekettet ist.
Drücken Sie jetzt die Deckkraft animieren erneut, und Sie werden sehen, dass sowohl die Deckkraft als auch die Drehung nacheinander animiert werden. Dies liegt daran, dass sie bereits angekettet waren, nachdem wir angeklickt hatten Kettenanimationen.
An diesem Punkt drücken Sie die Rotation animieren Die Schaltfläche animiert nur die Drehung. Der Grund für dieses Verhalten ist, dass wir die Rotationsanimation nur mit der Opazitätsanimation verkettet haben. Dies bedeutet, dass die Boxen bei jeder Animation der Deckkraft gedreht werden. Eine Rotationsanimation bedeutet jedoch nicht, dass auch die Deckkraft animiert wird.
Zum Schluss können Sie auf klicken Spielen Sie in einer Schleife Taste. Dadurch werden beide Animationen miteinander verkettet. Sobald dies geschieht, werden die Animationen in einer unbestimmten Schleife abgespielt. Dies liegt daran, dass das Ende einer Animation den Beginn der anderen Animation auslöst.
In diesem einführenden KUTE.js-Tutorial haben Sie die Grundlagen der Bibliothek kennen gelernt. Wir haben mit der Installation begonnen und sind dann zu verschiedenen Methoden übergegangen, mit denen sich Tween-Objekte erstellen lassen.
Sie haben auch gelernt, wie Sie die Wiedergabe einer Animation steuern und verschiedene Tweens miteinander verketten. Wenn Sie die Verkettung vollständig verstanden haben, können Sie mit dieser Bibliothek einige interessante Animationen erstellen.
Im nächsten Tutorial der Serie erfahren Sie, wie Sie verschiedene Arten von CSS-Eigenschaften mit KUTE.js animieren.
