Share
KUTE.js är en JavaScript-baserad animationsmotor som fokuserar på prestanda och minneseffektivitet samtidigt som man animerar olika element på en webbsida. Jag har redan skrivit en serie om att använda Anime.js för att skapa JavaScript-baserade animeringar. Den här gången lär vi oss om KUTE.js och hur vi kan använda den för att animera CSS-egenskaper, SVG och textelement, bland annat.
Innan vi dyker in i några exempel, låt oss installera biblioteket först. KUTE.js har en kärnmotor, och då finns plugins för animering av värdet av olika CSS-egenskaper, SVG-attribut eller text. Du kan direkt länka till biblioteket från populära CDN som cdnjs och jsDelivr.
Du kan också installera KUTE.js med antingen NPM eller Bower med hjälp av följande kommandon:
npm installera - spara kute.js bower install - spara kute.js
När du väl har inkluderat biblioteket i dina projekt kan du börja skapa egna animationssekvenser.
När du skapar din animering med KUTE.js måste du definiera tweenobjekt. Dessa mellanliggande objekt ger all animationsrelaterad information för ett visst element eller element. Detta inkluderar själva elementet, egenskaperna du vill animera, animationens varaktighet och andra attribut som repetitionsräkning, fördröjning eller förskjutning.
Du kan använda .till() metod eller .från till() metod för att animera en uppsättning CSS-egenskaper från ett värde till ett annat. De .till() Metoden animerar egenskaperna från deras standardvärde eller deras beräknade / nuvarande värde till ett slutligt angivet värde. I fallet med .från till() metod måste du tillhandahålla både start- och slutanimationsvärdena.
De .till() Metoden är användbar när du inte känner till nuvarande eller standardvärdet för egenskapen du vill animera. En stor nackdel med denna metod är att biblioteket måste beräkna det nuvarande värdet av alla egenskaper i sig. Detta resulterar i en fördröjning på några millisekunder efter att du ringer .Start() för att starta animationen.
De .från till() Metoden låter dig ange start och slut animationsvärden själv. Detta kan marginellt förbättra animationens prestanda. Du kan nu också ange enheterna för att starta och avsluta värden själv och undvika överraskningar under animeringens gång. En nackdel med att använda .från till() är att du inte kommer att kunna stapla flera transformationsegenskaper på kedjda tweens. I sådana fall måste du använda .till() metod.
Kom ihåg att båda .från till() och .till() är avsedda att användas när du animerar enskilda element. Om du vill animera flera element samtidigt måste du använda antingen .allt till() eller .allFromTo (). Dessa metoder fungerar precis som deras enskilda element motsvarigheter och ärver alla deras attribut. De får också en extra offset attribut som bestämmer fördröjningen mellan animationsstart för olika element. Denna förskjutning definieras i millisekunder.
Här är ett exempel som animerar opaciteten av tre olika lådor i följd.
Följande JavaScript används för att skapa ovanstående animationssekvens:
Accentsconagua
var theBoxes = document.querySelectorAll (". box"); var startButton = document.querySelector ("start"); var animateOpacity = KUTE.allFromTo (theBoxes, opacity: 1, opacity: 0.1, offset: 700); startButton.addEventListener ("klicka", funktion () animateOpacity.start ();, false);Alla rutor ovan har en låda klass som har använts för att välja dem alla med hjälp av querySelectorAll () metod. De allFromTo () Metoden i KUTE.js används för att animera opaciteten hos dessa lådor från 1 till 0,1 med en offset på 700 millisekunder. Som du kan se, startar inte tween-objektet animationen av sig själv. Du måste ringa Start() metod för att starta animationen.
I föregående avsnitt använde vi Start() metod för att starta animationerna. KUTE.js-biblioteket innehåller också några andra metoder som kan användas för att styra animationsuppspelningen.
Till exempel kan du stoppa animeringar som för närvarande pågår med hjälp av sluta() metod. Tänk på att du kan använda den här metoden för att stoppa animeringen av endast de mellan objekt som har lagrats i en variabel. Animationen för varje tweenobjekt som skapades i flygningen kan inte stoppas med den här metoden.
Du har också möjlighet att bara pausa en animering med hjälp av paus() metod. Det här är till hjälp när du vill återuppta animationen igen vid en senare tidpunkt. Du kan antingen använda återuppta() eller spela() för att återuppta all animering som pausades.
Följande exempel är en uppdaterad version av tidigare demo med alla fyra metoderna som lagts till.
Här är JavaScript-koden som behövs för att lägga till start, stopp, spela och pausfunktionalitet.
var theBoxes = document.querySelectorAll (". box"); var startButton = document.querySelector ("start"); var stopButton = document.querySelector (". stop"); var pauseButton = document.querySelector (". paus"); var resumeButton = document.querySelector (". återuppta"); var animateOpacity = KUTE.allFromTo (theBoxes, opacity: 1, opacity: 0.1, offset: 700, duration: 2000); startButton.addEventListener ("klicka", funktion () animateOpacity.start ();, false); stopButton.addEventListener ("klicka", funktion () animateOpacity.stop ();, false); pauseButton.addEventListener ("klicka", funktion () animateOpacity.pause ();, false); resumeButton.addEventListener ("click", function () animateOpacity.resume ();, false); Jag har ändrat animationens varaktighet till 2000 millisekunder. Detta ger oss tillräckligt med tid att trycka på olika knappar och se hur de påverkar animationsuppspelningen.
Du kan använda kedja() metod för att kedja olika tweens tillsammans. När olika tweens har knyts, kallar de Start() Metod på andra tweens efter att deras egen animering har slutförts.
På så sätt får du spela olika animeringar i en sekvens. Du kan kedja olika tweens med varandra för att spela dem i en loop. Följande exempel borde klargöra:
var animateOpacity = KUTE.allFromTo (theBoxes, opacity: 1, opacity: 0.1, offset: 100, duration: 800); var animateRotation = KUTE.allFromTo (theBoxes, rotate: 0, rotate: 360, offset: 250, duration: 800); opacityButton.addEventListener ("klicka", funktion () animateOpacity.start ();, false); rotateButton.addEventListener ("klicka", funktion () animateRotation.start ();, false); chainButton.addEventListener ("klicka", funktion () animateOpacity.chain (animateRotation); animateOpacity.start ();, false); loopButton.addEventListener ("klicka", funktion () animateOpacity.chain (animateRotation); animateRotation.chain (animateOpacity); animateOpacity.start ();, false);Vi hade redan en tween för att animera opaciteten. Vi har nu lagt till en annan som animerar rotationen av våra lådor. De två första knapparna animerar opaciteten och rotationen en åt gången. Den tredje knappen utlöser kedjan av animateOpacity med animateRotation.
Kedjan själv startar inte animeringen, så vi använder också Start() metod för att starta opacitet animationen. Den sista knappen används för att kedja båda tweensna med varandra. Den här tiden fortsätter animationerna att spela oändligt när de har startats. Här är en CodePen-demo som visar all ovanstående kod i åtgärd:
För att förstå hur kedjan fungerar, måste du trycka på knapparna i en viss sekvens. Klicka på Animera opacitet knappen först och du kommer se att opacitetsanimationen spelas bara en gång och då händer inget annat. Nu trycker du på Animera Rotation knappen och du ser att lådorna roterar en gång och då händer inget annat.
Därefter trycker du på Kedje Animationer knappen och du kommer att se att opacitetsanimationen spelar först och, när den har slutfört sin iteration, börjar rotationsanimationen spela upp sig själv. Detta hände på grund av att rotationsanimationen nu är kedjad till opacitetsanimationen.
Nu trycker du på Animera opacitet knappen igen och du kommer att se att både opacitet och rotation är animerade i följd. Detta beror på att de redan hade kedjats efter att vi klickade på Kedje Animationer.
Vid denna tidpunkt trycker du på Animera Rotation knappen kommer bara att animera rotationen. Anledningen till detta beteende är att vi endast har kopplat rotationsanimationen till opacitet animationen. Det betyder att lådorna kommer att roteras varje gång opaciteten är animerad, men en rotationsanimation betyder inte att opaciteten kommer att animeras också.
Slutligen kan du klicka på Spela i en loop knapp. Detta kommer att kedja båda animationerna med varandra, och när det händer kommer animationerna att fortsätta spela i en obestämd loop. Detta beror på att slutet av en animering utlöser starten på den andra animationen.
I denna inledande KUTE.js handledning lärde du dig om bibliotekets grunder. Vi började med installationen och flyttade sedan vidare till olika metoder som kan användas för att skapa mellanobjekt.
Du lärde dig också hur man kontrollerar uppspelningen av en animering och hur man kedjar olika tweens tillsammans. När du väl förstår chaining, kommer du att kunna skapa några intressanta animationer med det här biblioteket.
I nästa handledning i serien lär du dig att animera olika typer av CSS-egenskaper med KUTE.js.
