Share
Nachdem Sie die ersten drei Tutorials der Serie abgeschlossen haben, sollten Sie sich jetzt mit den Funktionen von Anime.js sehr wohl fühlen. Das erste Tutorial zeigte Ihnen, wie Sie Zielelemente auswählen. Im zweiten Lernprogramm haben Sie verschiedene Typen von Parametern kennen gelernt, mit denen Sie die Verzögerung und die Dauer von Animationen verschiedener Elemente genau steuern können. Das dritte Tutorial konzentrierte sich darauf, zu lernen, wie Sie die Werte einer einzelnen Eigenschaft im Verlauf der Animation besser steuern können.
In diesem Lernprogramm lernen Sie verschiedene Callbacks kennen, mit denen eine Funktion basierend auf dem Fortschritt der Animation ausgeführt werden kann. In fast allen Beispielen der vorherigen Lernprogramme wurden CSS-Eigenschaften verwendet, um die Funktionsweise verschiedener Methoden und Parameter zu veranschaulichen. Dies hat Ihnen möglicherweise die Idee vermittelt, dass sich die Bibliothek besser für die Animation von CSS-Eigenschaften eignet. Dieses Mal wird es einen Abschnitt geben, der sich mit der Erstellung interessanter SVG-Animationen in Anime.js befasst.
Wie bereits in der Einleitung erwähnt, können Sie mithilfe von Rückrufen Funktionen ausführen, die auf dem Fortschritt der Animation basieren. Es gibt vier verschiedene Rückrufe: Start, Lauf, aktualisieren, und Komplett. Jede Callback-Funktion wird zu einem bestimmten Zeitpunkt ausgelöst und akzeptiert ein Animationsobjekt als Argument.
Das Start() Funktion wird aufgerufen, wenn die Animation tatsächlich beginnt. Dies bedeutet, dass eine Animation eine Verzögerung von 800 ms hat, Start() wird erst nach Ablauf dieser Verzögerung aufgerufen. Sie können überprüfen, ob eine Animation gestartet wurde oder nicht animationName.begin, was wird wiederkommen wahr oder falsch beziehungsweise.
Das Lauf callback kann verwendet werden, um eine Funktion in jedem Frame auszuführen, nachdem eine Animation tatsächlich abgespielt wurde. Wenn Sie eine Funktion in jedem Frame von Beginn der Animation aus ausführen möchten, unabhängig von deren Animation verzögern, du solltest die verwenden aktualisieren Rückruf stattdessen.
Das Komplett Rückruf ist ähnlich Start mit Ausnahme der Tatsache, dass es aufgerufen wird, sobald die Animation beendet ist. So wie Start, Sie können verwenden animationName.complete um zu überprüfen, ob eine Animation abgespielt wurde oder nicht.
Sie haben bereits im ersten Tutorial gesehen, wie Sie das verwenden aktualisieren Callback während der Animation von numerischen Werten eines JavaScript-Objekts. In diesem Lernprogramm werden wir dieses Beispiel ändern und sehen, wie alle diese Rückrufe zusammen verwendet werden, um dem Benutzer weitere Informationen bereitzustellen.
Accentsconagua
var filesScanned = count: 0, infiziert: 0; var scanCount = document.querySelector (". scan-count"); var infected = document.querySelector (". infected-count"); var scan = anime (Ziele: DateienScan, Autoplay: falsch, Anzahl: 100, infiziert: 8, Verzögerung: 1000, Dauer: 2000, Beschleunigung: "linear", Runde: 1, Update: Funktion (anim) if (anim .aktuelle Uhrzeit < 1000) document.querySelector(".update-cb").innerHTML = "Creating an Index… "; , begin: function() document.querySelector(".begin-cb").innerHTML = "Starting the Scan… "; , run: function() scanCount.innerHTML = filesScanned.count; infected.innerHTML = filesScanned.infected; , complete: function() document.querySelector(".complete-cb").innerHTML = "Scan Complete… "; );Ich habe absichtlich etwas Verzögerung in dieser Animation hinzugefügt, damit wir den Unterschied im zeitlichen Ablauf der verschiedenen Callbacks feststellen können. Das aktualisieren Callback beginnt mit der Ausführung seiner Funktion, sobald die Animationsinstanz beginnt.
Die eigentliche Animation beginnt nach 1000ms zu spielen Start Funktion zeigt dem Benutzer die Meldung "Starten des Scans ...". Das Lauf Die Funktion wird auch gleichzeitig ausgeführt und aktualisiert die numerischen Werte des Objekts nach jedem Frame. Sobald die Animation beendet ist, wird die Komplett Rückruf zeigt dem Benutzer eine Meldung "Scan abgeschlossen ...".
Mithilfe von Beschleunigungsfunktionen kann gesteuert werden, wie der Wert einer Eigenschaft von ihrem Anfangswert zu ihrem Endwert übergeht. Diese Beschleunigungsfunktionen können mit dem Beschleunigungsparameter angegeben werden, der sowohl Strings als auch benutzerdefinierte Bézier-Kurvenkoordinaten (in Form eines Arrays) akzeptieren kann..
Es gibt 31 verschiedene integrierte Beschleunigungsfunktionen. Einer von ihnen ist linear, und die anderen 30 bestehen aus zehn verschiedenen Variationen von easeIn, easeOut, und easeInOut. Es gibt drei elastische Lockerungsgleichungen easeInElastic, easeOutElastic, und easeInOutElastic. Sie können ihre Elastizität mit dem steuern Elastizität Parameter. Der Wert von Elastizität kann zwischen 0 und 1000 liegen.
EaseIn Gleichungen beschleunigen die Wertänderung der Eigenschaft ab Null. Dies bedeutet, dass die Wertänderung am Anfang langsam und am Ende sehr schnell ist. Die Änderungsrate ist am Anfang null und am Ende maximal. EaseOut Gleichungen verlangsamen die Wertänderung der Eigenschaft ausgehend von der maximalen Ratenänderung.
Dies bedeutet, dass die Wertänderung am Anfang sehr schnell und am Ende sehr langsam ist. EaseInOut Gleichungen beschleunigen die Ratenänderung am Anfang und verlangsamen sie am Ende. Dies bedeutet, dass die Änderungsrate sowohl am Anfang als auch am Ende langsam ist und mitten in der Animation am schnellsten ist. Die folgende Demo zeigt den Unterschied in der Änderungsrate für jede dieser Beschleunigungsfunktionen.
Sie können der integrierten Liste auch mit Hilfe von Ihre eigenen benutzerdefinierten Beschleunigungsfunktionen hinzufügen anime.easings. Hier ist ein Beispiel zum Erstellen benutzerdefinierter Beschleunigungsfunktionen.
anime.easings ['tanCube'] = Funktion (t) return Math.pow (Math.tan (t * Math.PI / 4), 3); anime.easings ['tanSqr'] = Funktion (t) return Math.pow (Math.tan (t * Math.PI / 4), 2); var tanCubeSequence = anime (Ziele: '.tan-cube', translateX: '75vw', Dauer: 2000, Erleichterung: 'tanCube', Autoplay: false); var tanSqrSequence = anime (Ziele: '.tan-sqr', translateX: '75vw', Dauer: 2000, Beschleunigung: 'tanSqr', Autoplay: false);
Alle bewegungsbezogenen Animationen, die wir bisher erstellt haben, haben die Zielelemente in geraden Linien verschoben. In Anime.js ist es auch möglich, ein Element entlang eines komplexen SVG-Pfads mit vielen Kurven zu verschieben. Sie können sowohl die Position als auch den Winkel der Animationselemente auf dem Pfad steuern. Um ein Element zur x-Koordinate des Pfads zu verschieben, können Sie verwenden Pfad (x). Ebenso kann ein Element entsprechend der y-Koordinate des Pfads mit verschoben werden Pfad (y).
Wenn der Pfad keine gerade Linie ist, bildet er fast immer einen Winkel in Bezug auf die horizontale Basislinie. Wenn Sie ein nicht kreisförmiges Element drehen, fühlt es sich natürlicher an, wenn das Element dem Winkel des Pfads folgt. Sie können dies tun, indem Sie die drehen Eigenschaft gleich zu sein Pfad ('Winkel'). Hier ist der Code, der vier Elemente mit unterschiedlichen Beschleunigungswerten entlang eines SVG-Pfads animiert.
var path = anime.path ('path'); var easings = ['linear', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic']; var motionPath = anime (Ziele: '.square', translateX: Pfad ('x'), translateY: Pfad ('y'), drehen: Pfad ('Winkel'), Beschleunigung: Funktion (el, i) return Beschleunigungen [i];, Dauer: 10000, Schleife: wahr);Sie können in der folgenden Demo sehen, dass das rote Quadrat mit easeInCubic Die Lockerung ist am Anfang am langsamsten und am Ende am schnellsten. Ebenso das orangefarbene Quadrat mit easeOutCubic ist der schnellste am Anfang und der langsamste am Ende.
Sie können auch die Umwandlung verschiedener SVG-Formen mithilfe von Anime.js ineinander animieren. Die einzige Bedingung ist, dass beide Formen die gleiche Anzahl von Punkten haben. Das bedeutet, dass Sie Dreiecke nur in andere Dreiecke und Vierecke in andere Vierecke verwandeln können. Wenn Sie versuchen, zwischen einer ungleichen Anzahl von Polygonpunkten zu transformieren, führt dies zu einer abrupten Formänderung. Hier ist ein Beispiel für das Verwandeln einer dreieckigen Form.
var morphing = anime (Ziele: 'Polygon', Punkte: [Wert: '143 31 21 196 286 223', Wert: '243 31 21 196 286 223', Wert: '243 31 121 196 286 223 ', Wert:' 243 31 121 196 386 223 ', Wert:' 543 31 121 196 386 223 '], Erleichterung:' linear ', Dauer: 4000, Richtung:' alternate ', Loop: true );
Ein interessanter Effekt, den Sie mit SVG erstellen können, ist das Zeichnen von Linien. Alles, was Sie tun müssen, ist, Anime.js den Pfad zu geben, den Sie für das Zeichnen von Linien und andere Parameter verwenden möchten, die die Dauer, die Verzögerung oder die Verzögerung bestimmen. In der folgenden Demo habe ich die verwendet Komplett Rückruf, um die Strichzeichnung des Ankersymbols Font Awesome mit einer gelben Farbe zu füllen.
var lineDrawing = anime (Ziele: 'Pfad', strokeDashoffset: [anime.setDashoffset, 0], Beschleunigung: 'easeInOutCubic', Dauer: 4000, komplett: function (anim) document.querySelector ('path'). setAttribute ( "füllen", "gelb"););Durch die Kombination aller bisher gelernten Konzepte können Sie komplexere Strichzeichnungen erstellen, die die Art und Weise, wie sie gezeichnet werden, viel besser steuern. Hier ist ein Beispiel, in dem ich meinen eigenen Namen mit SVG geschrieben habe.
var letterTime = 2000; var lineDrawing = anime (Ziele: "Pfad", strokeDashoffset: [anime.setDashoffset, 0], Erleichterung: "easeInOutCubic"), Dauer: letterTime, delay: Funktion (el, i) return letterTime * i;, begin: function (anim) var letters = document.querySelectorAll ("Pfad"), i; für (i = 0; i < letters.length; ++i) letters[i].setAttribute("stroke", "black"); letters[i].setAttribute("fill", "none"); , update: function(anim) if (anim.currentTime >= letterTime) document.querySelector (". letter-m"). setAttribute ("fill", "# e91e63"); if (anim.currentTime> = 2 * letterTime) document.querySelector (". letter-o"). setAttribute ("fill", "# 3F51B5"); if (anim.currentTime> = 3 * letterTime) document.querySelector (". letter-n"). setAttribute ("fill", "# 8BC34A"); if (anim.currentTime> = 4 * letterTime) document.querySelector (". letter-t"). setAttribute ("fill", "# FF5722"); if (anim.currentTime> = 5 * letterTime) document.querySelector (". letter-y"). setAttribute ("fill", "# 795548"); , Autoplay: falsch); Ich beginne damit, der Variablen den Wert 2000 zuzuweisen letterTime. Dies ist die Zeit, die ich möchte, dass Anime.js jeden Buchstaben meines Namens zeichnet. Das verzögern Diese Eigenschaft verwendet den funktionsbasierten Indexparameter, um eine entsprechende Einstellung festzulegen verzögern Wert mit Hilfe der letterTime Variable.
Der Index des ersten Buchstabens "M" ist Null, sodass Anime.js sofort mit dem Zeichnen beginnt. Der Buchstabe "O" hat eine Verzögerung von 2000 ms, da dies die Zeit ist, die erforderlich ist, um den Buchstaben "M" vollständig zu zeichnen..
In der Start Rückruf habe ich eingestellt Schlaganfall Wert aller Briefe an schwarz und ihre füllen Werte bis keiner. Auf diese Weise können wir alle Farbwerte löschen, die innerhalb von verwendet werden aktualisieren Rückruf, damit die Buchstaben in ihren ursprünglichen Zustand zurückkehren können, wenn sie in mehreren Schleifen ausgeführt werden. Klicken Sie auf das Symbol Schreibe den Namen Klicken Sie in der folgenden Demo auf die Schaltfläche, um den Code in Aktion zu sehen.
In diesem Lernprogramm haben Sie verschiedene Callback-Funktionen kennen gelernt, mit denen Sie Aufgaben wie das Aktualisieren des DOM oder das Ändern des Werts eines Attributs basierend auf dem Animationsfortschritt ausführen können. Sie haben auch verschiedene Beschleunigungsfunktionen kennen gelernt und erfahren, wie Sie eine eigene erstellen. Der letzte Abschnitt des Tutorials konzentrierte sich auf das Erstellen von SVG-basierten Animationen.
Nachdem Sie alle vier Tutorials der Serie abgeschlossen haben, sollten Sie jetzt genug über Anime.js verfügen, um interessante Effekte für Ihr nächstes Projekt zu erzeugen. Wenn Sie Fragen zu diesem Tutorial haben, teilen Sie mir dies bitte in den Kommentaren mit.
