Share
Anime.js ist eine einfache JavaScript-basierte Animationsbibliothek. Sie können damit verschiedene CSS-Eigenschaften, SVG- oder DOM-Attribute auf einer Webseite animieren. Mit der Bibliothek können Sie alle Aspekte der Animation steuern. Sie haben viele Möglichkeiten, die Elemente anzugeben, auf die Sie zielen möchten, oder die Eigenschaften, die Sie animieren möchten.
Sie haben die volle Kontrolle über die Reihenfolge, in der die Animationen abgespielt werden oder wie die Animationen der verschiedenen Elemente aufeinander abgestimmt sind. Die Bibliothek unterstützt alle modernen Browser, einschließlich IE10+.
In dieser Tutorialserie erfahren Sie alles über die Funktionen von Anime.js, damit Sie sie problemlos in realen Projekten verwenden können.
Bevor Sie sich eingehend mit dem Thema beschäftigen, installieren Sie zunächst die Bibliothek. Sie können beide verwenden npm oder Laube Führen Sie die folgenden Befehle aus, um die Installation auszuführen:
npm install animejs bower install animejs
Sie können die Bibliothek auch herunterladen und in Ihr Projekt aufnehmen oder direkt auf die neueste Version der auf einem CDN gehosteten Bibliothek verweisen.
Nach einer erfolgreichen Installation können Sie diese Bibliothek jetzt verwenden, um Ihren Elementen interessante Animationen hinzuzufügen. Wir beginnen mit den Grundlagen der Bibliothek und konzentrieren uns jeweils auf einen bestimmten Bereich.
Um Animationen mit Anime.js zu erstellen, müssen Sie die anime () funktionieren und übergeben Sie ein Objekt mit Schlüssel-Wert-Paaren, die unter anderem die Zielelemente und Eigenschaften angeben, die Sie animieren möchten. Du kannst den ... benutzen Ziele Taste, um Anime.js mitzuteilen, welche Elemente Sie animieren möchten. Dieser Schlüssel kann Werte in verschiedenen Formaten akzeptieren.
CSS-Selektoren: Sie können einen oder mehrere CSS-Selektoren als Wert für die übergeben Ziele Schlüssel.
var blue = anime (Ziele: '.blue', translateY: 200); var redBlue = anime (Ziele: '.red, .blue', translateY: 200); var even = anime (Ziele: '.square: nth-child (gerade)', translateY: 200); var notRed = anime (Ziele: '.square: nicht (.red)', translateY: 200);
Im ersten Fall animiert Anime.js alle Elemente mit einem Blau Klasse. Im zweiten Fall animiert Anime.js alle Elemente entweder mit rot oder Blau Klasse. Im dritten Fall animiert Anime.js alle selbst Kinder mit einem Quadrat Klasse. Im letzten Fall animiert Anime.js alle Elemente mit einem Quadrat Klasse, die keine hat rot Klasse.
DOM-Knoten oder NodeList: Sie können auch einen DOM-Knoten oder eine NodeList als Wert für die verwenden Ziele Schlüssel. Hier sind ein paar Beispiele für die Einstellung Ziele als DOM-Knoten.
Accentsconagua
var special = anime (Targets: document.getElementById ('special'), translateY: 200); var blue = anime (Targets: document.querySelector ('. blue'), translateY: 200); var redBlue = anime (target: document.querySelectorAll ('. red, .blue'), translateY: 200); var even = anime (Targets: document.querySelectorAll ('. square: nth-child (gerade)'), translateY: 200); var notRed = anime (Ziele: Dokument.querySelectorAll ('. Quadrat: nicht (.red)'), translateY: 200);Im ersten Fall habe ich die verwendet getElementById () Funktion, um unser besonderes Element zu erhalten. Das querySelector () Funktion wird verwendet, um das erste Element mit der blauen Klasse abzurufen. Das querySelectorAll () Funktion wird verwendet, um alle Elemente im Dokument abzurufen, die der angegebenen Auswahlgruppe entsprechen.
Es gibt auch viele andere Funktionen, mit denen Sie Ihre Zielelemente auswählen können, die Sie animieren möchten. Zum Beispiel können Sie alle Elemente mit einem bestimmten Klassennamen mit der getElementsByClassName () Funktion. In ähnlicher Weise können Sie auch alle Elemente mit einem bestimmten Tag-Namen über das Symbol erhalten getElementsByTagName () Funktion.
Mit jeder Funktion, die einen DOM-Knoten oder eine NodeList zurückgibt, kann der Wert von festgelegt werden Ziele Schlüssel in Anime.js.
Objekt: Sie können auch ein JavaScript-Objekt als Wert für die verwenden Ziele Schlüssel. Der Schlüssel dieses Objekts wird als Bezeichner verwendet, und der Wert wird als Zahl verwendet, die animiert werden muss.
Sie können die Animation dann mit Hilfe von JavaScript in einem anderen HTML-Element anzeigen. Hier ist der Code zum Animieren der Werte von zwei verschiedenen Schlüsseln eines Objekts.
var filesScanned = count: 0, infiziert: 0; var scan = anime (Ziele: DateienScan, Anzahl: 1000, infiziert: 8, Runde: 1, Update: Funktion () Var ScanCount = Dokument.querySelector ('. Scan-Count'); ScanCount.innerHTML = filesScanned.count ; var infectedCount = document.querySelector ('. infected-count'); infectedCount.innerHTML = filesScanned.infected;);Mit dem obigen Code wird die Anzahl der gescannten Dateien von 0 bis 1.000 und die Anzahl der infizierten Dateien von 0 bis 8 animiert. Denken Sie daran, dass Sie nur numerische Werte auf diese Weise animieren können. Der Versuch, einen Schlüssel von 'AAA' zu 'BOY' zu animieren, führt zu einem Fehler.
Wir haben auch eine Rückruffunktion für die verwendet aktualisieren Schlüssel, der bei laufender Animation für jedes Bild aufgerufen wird. Wir haben es hier verwendet, um die Anzahl der gescannten und infizierten Dateien zu aktualisieren. Sie könnten jedoch einen Schritt weitergehen und Benutzern eine Fehlermeldung anzeigen, wenn die Anzahl der infizierten Dateien einen bestimmten Schwellenwert überschreitet.
Array: Die Möglichkeit, ein JavaScript-Array als Ziel festzulegen, ist nützlich, wenn Sie eine Reihe von Elementen animieren müssen, die unter verschiedene Kategorien fallen. Wenn Sie beispielsweise einen DOM-Knoten, ein Objekt und eine Reihe anderer Elemente auf der Grundlage von CSS-Selektoren animieren möchten, können Sie dies ganz einfach tun, indem Sie alle Elemente in ein Array einfügen und dieses Array dann als Wert für den Ziele Schlüssel. Das folgende Beispiel soll es klarer machen:
var multipleAnimations = anime (Ziele: [document.querySelectorAll ('. blue'), '.red, #special'], translateY: 250);Da Sie nun wissen, wie Sie verschiedene Elemente angeben, die Sie animieren möchten, ist es an der Zeit, sich mit allen Eigenschaften und Attributen vertraut zu machen, die mit der Bibliothek animiert werden können.
CSS-EigenschaftenMit Anime.js können Sie viele CSS-Eigenschaften wie Breite, Höhe und Farbe für verschiedene Zielelemente animieren. Die endgültigen Werte verschiedener animierbarer Eigenschaften wie Hintergrundfarbe und Rahmenbreite werden mithilfe einer Kamelfallversion dieser Eigenschaft angegeben. Daher wird Hintergrundfarbe Hintergrundfarbe, und Randbreite wird Rahmenbreite. Der folgende Codeausschnitt zeigt, wie die linke Position und die Hintergrundfarbe eines Zielelements in Anime.js animiert werden.
var animateLeft = anime (Ziele: '.square', links: '50% '); var animateBackground = anime (Ziele: '.square', backgroundColor: '# f96');
Die Eigenschaften können alle Arten von Werten akzeptieren, die sie bei normalem CSS akzeptiert hätten. Zum Beispiel die Eigenschaft links könnte eingestellt werden 50vh, 500px, oder 25em. Sie können den Wert auch als bloße Zahl angeben. In diesem Fall wird die Anzahl in einen Pixelwert umgewandelt. Ebenso kann die Hintergrundfarbe als Hexadezimal-, RGB- oder HSL-Farbwert angegeben werden.
CSS-Transformationen: Sie können auch verschiedene CSS-Transformationseigenschaften mit Anime.js animieren. Eine Verschiebung entlang der x- und y-Achse kann mit der erreicht werden translateX und translateY Eigenschaften. Auf ähnliche Weise ist es möglich, ein Element entlang einer bestimmten Achse zu skalieren, zu neigen oder zu drehen Rahmen, Schräglauf und drehen Eigenschaft, die dieser bestimmten Achse entspricht.
Sie können verschiedene Winkel entweder in Form oder in Grad oder in Form angeben Wende. Der Wert einer Umdrehung entspricht 360 °. Dies kann die Berechnung erleichtern, wenn Sie wissen, um wie viel Sie die Elemente in Bezug auf vollständige Rotationen drehen möchten. Das folgende Beispiel zeigt, wie Sie die Skalierung, Verschiebung oder Drehung eines Elements sowohl einzeln als auch auf einmal animieren.
var animateScaling = anime (Ziele: '.square', Maßstab: 0,8); var animateTranslation = anime (Ziele: '.square', translateX: window.innerWidth * 0.8); var animateRotation = anime (Ziele: '.square', drehen: '1turn'); var animateAll = anime (Ziele: '.square', Maßstab: 0.8, translateX: window.innerWidth * 0.8, drehen: '1turn');
SVG-Attribute: Mit Anime.js können Attribute verschiedener SVG-Elemente animiert werden. Die einzige Bedingung ist, dass der Wert dieser Attribute numerisch sein muss. Diese Fähigkeit, verschiedene Attribute zu animieren, eröffnet die Möglichkeit, einige wirklich coole Effekte zu erzeugen. Da Sie gerade erst anfangen, etwas über Anime.js zu lernen, werden wir die Beispiele in diesem Tutorial sehr einfach halten.
Im weiteren Verlauf werden Sie lernen, komplexere Animationen zu erstellen. Hier ist der Code zum Animieren der cx, cy und Strichbreite Attribute eines Kreises. Genau wie die CSS-Eigenschaften müssen Sie eine Kamelfallversion von verwenden Strichbreite damit der Code funktioniert.
var animateX = anime (Ziele: '.circle', cx: window.innerWidth * 0,6); var animateStrokeWidth = anime (Ziele: '.circle', strokeWidth: '25');
DOM-Attribute: Sie können numerische DOM-Attribute genauso animieren wie Ihre SVG-Attribute. Eine Situation, in der die Animation eines DOM-Attributs hilfreich sein kann, ist das HTML5-Fortschrittselement. Dieses Element hat zwei Attribute, Wert und max. In unserem Beispiel animieren wir das value-Attribut, um den Fortschritt des Dateiübertragungsprozesses anzuzeigen. Hier ist der Code zum Animieren der Wert Attribut.
var animateProgress = anime (Ziele: 'Fortschritt', Wert: 100, Beschleunigung: 'Linear');
In diesem Lernprogramm haben Sie erfahren, wie Sie Zielelemente in Anime.js auswählen und wie Sie verschiedene CSS-Eigenschaften und -Attribute animieren. Zu diesem Zeitpunkt kontrollieren wir nichts im Zusammenhang mit der eigentlichen Animation.
JavaScript ist wahrscheinlich das Sprache des Webs. Es ist natürlich nicht ohne Lernkurven und es gibt viele Frameworks und Bibliotheken, die Sie beschäftigen können, wie Sie sehen können. Wenn Sie nach zusätzlichen Ressourcen suchen, um zu studieren oder in Ihrer Arbeit zu verwenden, schauen Sie nach, was wir auf dem Envato-Marktplatz zur Verfügung haben.
Im nächsten Lernprogramm der Serie lernen Sie, wie Sie die Beschleunigung, Verzögerung und Dauer der Animation für verschiedene Eigenschaften sowohl als Gruppe als auch einzeln steuern können. Sie lernen dann, wie Sie alle diese Animationsparameter für einzelne Elemente steuern.
.
