Share
Efter att ha avslutat de första tre handledningarna i serien, borde du nu vara väldigt bekväm med många Anime.js-funktioner. Den första handledningen visade dig hur man väljer målelement. I den andra handledningen lärde du dig om olika typer av parametrar som kan användas för att få fin kontroll över fördröjningen och varaktigheten av animationer av olika element. Den tredje handledningen fokuserade på att lära sig att ha större kontroll över värdena på en enda egenskap under animeringens gång.
I denna handledning lär du dig information om olika återuppringningar som kan användas för att utföra en funktion baserat på animationens framsteg. Nästan alla exempel i de tidigare handledningarna använde CSS-egenskaper för att visa hur olika metoder och parametrar fungerar. Detta kan ha gett dig tanken att biblioteket passar mer för att animera CSS-egenskaper. Den här gången kommer vi att ha en del dedikerad till skapandet av intressanta SVG-relaterade animeringar i Anime.js.
Som jag nämnde i introduktionen kan du använda återuppringningar för att utföra funktioner baserat på animationens framsteg. Det finns fyra olika återuppringningar: Börja, springa, uppdatering, och komplett. Varje återuppringningsfunktion avfyras vid en viss tidpunkt, och var och en accepterar ett animationsobjekt som dess argument.
De Börja() funktion kallas när animationen faktiskt börjar. Detta innebär att om en animation har en fördröjning på 800ms, Börja() kommer att ringas först efter det att förseningen är över. Du kan kontrollera om en animering har börjat spela eller inte använda animationName.begin, som kommer att återvända Sann eller falsk respektive.
De springa återuppringning kan användas för att utföra en funktion i varje ram efter att en animering faktiskt börjar spela. Om du vill utföra en funktion i varje ram från animationens början, oberoende av dess fördröjning, du borde använda uppdatering återuppringning istället.
De komplett återuppringning liknar Börja förutom att det kallas en gång animationen har slutat spela. Precis som Börja, du kan använda animationName.complete för att kontrollera om en animation har spelats eller inte.
Du har redan sett i den första handledningen hur du använder uppdatering återuppringning medan animering av numeriska värden för ett JavaScript-objekt. I denna handledning kommer vi att ändra det exemplet och se hur du använder alla dessa återuppringningar tillsammans för att ge mer information till användaren.
Accentsconagua
var filesScanned = count: 0, infected: 0; var scanCount = document.querySelector ("scan-count"); var infected = document.querySelector ("infected-count"); var scanning = anime (mål: filesScanned, autoplay: false, count: 100, infected: 8, delay: 1000, duration: 2000, easing: "linear", round: 1, uppdatering: funktion .aktuell tid < 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… "; );Jag har avsiktligt lagt till viss fördröjning i denna animering så att vi kan märka skillnaden i tidpunkten för utförandet av olika återuppringningar. De uppdatering återuppringning börjar att utföra sin funktion så snart animationsexemplet börjar.
Den faktiska animationen börjar spela efter 1000ms, och det är då Börja funktionen visar meddelandet "Starta Scan ..." till användaren. De springa funktionen börjar också utföra samtidigt och uppdaterar objektets numeriska värden efter varje ram. När animationen är klar, kommer komplett återuppringning visar ett "Scan Complete ..." meddelande till användaren.
Lättningsfunktioner kan användas för att styra hur värdet på en egenskap övergår från sitt ursprungliga värde till dess slutliga värde. Dessa lättnadsfunktioner kan specificeras med hjälp av parametern för lättnad, som kan acceptera strängar såväl som anpassade Bézier-kurvkoordinater (i form av en array).
Det finns 31 olika inbyggda lättnadsfunktioner. En av dem är linjär, och de andra 30 består av tio olika variationer av easeIn, easeOut, och easeInOut. Det kallas tre elastiska lättnader easeInElastic, easeOutElastic, och easeInOutElastic. Du kan kontrollera deras elasticitet med hjälp av elasticitet parameter. Värdet av elasticitet kan vara mellan 0 och 1000.
easeIn ekvationerna accelererar värdeförändringen för egenskapen från noll. Det betyder att värdeförändringen skulle vara långsam i början och mycket snabbt i slutet. Ändringshastigheten är noll i början och max i slutet. easeOut ekvationer sänker värdeförändringen av egenskapen med början från maxhastighetsförändringen.
Det betyder att värdeförändringen skulle vara mycket snabb i början och mycket långsam i slutet. easeInOut ekvationerna accelererar hastighetsförändringen i början och decelererar den i slutet. Detta innebär att förändringshastigheten kommer att vara långsam i början och slutet, och det kommer att vara snabbast mitt i animationen. Följande demo visar skillnaden i förändringshastigheten för var och en av dessa lättnader.
Du kan också lägga till egna anpassade lättnadsfunktioner till den inbyggda listan med hjälp av anime.easings. Här är ett exempel på att skapa anpassade lättnadsfunktioner.
anime.easings ['tanCube'] = funktion (t) returnera Math.pow (Math.tan (t * Math.PI / 4), 3); anime.easings ['tanSqr'] = funktion (t) returnera Math.pow (Math.tan (t * Math.PI / 4), 2); var tanCubeSequence = anime (mål: '.tan-cube', translateX: '75vw', duration: 2000, easing: 'tanCube', autoplay: false); var tanSqrSequence = anime (mål: '.tan-sqr', translateX: '75vw', duration: 2000, easing: 'tanSqr', autoplay: false);
Alla rörelsesrelaterade animationer som vi har skapat hittills flyttade målelementen i raka linjer. Det är också möjligt i Anime.js att flytta ett element längs en komplex SVG-väg med många kurvor. Du kan styra både positionen och vinkeln på de animerande elementen på banan. För att flytta ett element till x-koordinaten av sökvägen kan du använda bana (x). På liknande sätt kan ett element flyttas enligt y-koordinaten för banan med användning av bana (y).
Om inte banan är en rak linje, kommer den nästan alltid att bilda en vinkel med avseende på den horisontella baslinjen. Om du roterar något icke-cirkulärt element, kommer det att känna sig mer naturligt om elementet följer vägens vinkel. Du kan göra det genom att ställa in rotera egendom som är lika med bana ( 'vinkel'). Här är koden som animerar fyra element med olika lättnadsvärden längs en SVG-sökväg.
var sökväg = anime.path ('path'); var easings = ['linear', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic']; var motionPath = anime (mål: '. square', translateX: path ('x'), translateY: väg ('y'), rotera: väg ('vinkel'), lättnad: funktion (el, i) easings [i];, duration: 10000, loop: true);Du kan se i den följande demo den röda torget med easeInCubic lättnad är långsammare i början och det snabbaste i slutet. På samma sätt, den orange rutan med easeOutCubic är den snabbaste i början och den långsammaste i slutet.
Du kan också animera morphing av olika SVG former till varandra med Anime.js. Det enda villkoret är att båda formerna ska ha samma antal poäng. Detta innebär att du bara kan morf trianglar i andra trianglar och fyrhjulingar i andra fyrhjulingar. Att försöka morph mellan ett ojämnt antal polygonpunkter kommer att resultera i en abrupt formändring. Här är ett exempel på att morphing en triangulär form.
var morphing = anime (mål: 'polygon', poäng: [värde: '143 31 21 196 286 223', värde: '243 31 21 196 286 223', värde: '243 31 121 196 286 223 ', värde:' 243 31 121 196 386 223 ', värde:' 543 31 121 196 386 223 '], lättnad:' linjär ', varaktighet: 4000, riktning:' alternerande ', loop: true );
En mer intressant effekt som du kan skapa med SVG är linjeteckning. Allt du behöver göra är att ge Anime.js den sökväg du vill använda för streckritning och andra parametrar som styr dess varaktighet, fördröjning eller lättnad. I följande demo har jag använt komplett återuppringning för att fylla linjetexten för Font Awesome anchor-ikonen med en gul färg.
var lineDrawing = anime (mål: 'path', strokeDashoffset: [anime.setDashoffset, 0], lättnad: 'easeInOutCubic', duration: 4000, fullständig: funktion (anim) document.querySelector ('path'). setAttribute "fyll", "gul"););Genom att kombinera kunskapen om alla begrepp du hittills har lärt dig kan du skapa mer komplexa linjeteckningar med mycket bättre kontroll över hur de ritas. Här är ett exempel där jag har skrivit mitt eget namn med SVG.
var letterTime = 2000; var lineDrawing = anime (mål: "path", strokeDashoffset: [anime.setDashoffset, 0], lättnad: "easeInOutCubic", varaktighet: letterTime, delay: funktion (el, i) return letterTime * i;, start: funktion (anim) var bokstäver = document.querySelectorAll ("path"), 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"); om (anim.currentTime> = 2 * letterTime) document.querySelector (". letter-o"). setAttribute ("fill", "# 3F51B5"); om (anim.currentTime> = 3 * letterTime) document.querySelector (". letter-n"). setAttribute ("fill", "# 8BC34A"); om (anim.currentTime> = 4 * letterTime) document.querySelector (". letter-t"). setAttribute ("fill", "# FF5722"); om (anim.currentTime> = 5 * letterTime) document.querySelector (". letter-y"). setAttribute ("fill", "# 795548"); , autoplay: false); Jag börjar med att tilldela värdet 2000 till variabeln letterTime. Det här är den tid som jag vill att Anime.js ska ta medan det drar varje bokstav i mitt namn. De fördröjning egendom använder det funktionsbaserade indexparametern för att ange ett lämpligt fördröjning värde med hjälp av letterTime variabel.
Indexet för första bokstaven "M" är noll, så Anime.js börjar skriva det omedelbart. Bokstaven "O" har en fördröjning på 2000ms eftersom det är den tid det tar att helt skriva bokstaven "M".
Inuti Börja återuppringning, jag har ställt in stroke värdet av alla bokstäver till svart och deras fylla värden till ingen. På så sätt kan vi rensa alla färgvärden som appliceras inuti uppdatering återuppringning så att bokstäverna kan återgå till sitt ursprungliga tillstånd när de körs i flera slingor. Försök klicka på Skriv namnet knappen i följande demo för att se koden i åtgärd.
I denna handledning lärde du dig om olika återuppringningsfunktioner som kan användas för att utföra uppgifter som att uppdatera DOM eller ändra värdet på ett attribut baserat på animationsframsteg. Du lärde dig också om olika lättnader och hur du skapar en egen. Den sista delen av handledningen fokuserade på att skapa SVG-baserade animeringar.
Efter att ha slutfört alla fyra handledningarna i serien, borde du nu ha tillräckligt med kunskaper om Anime.js för att skapa några intressanta effekter för ditt nästa projekt. Om du har några frågor relaterade till denna handledning, var god och låt mig veta i kommentarerna.
