Share
KUTE.js er en JavaScript-basert animasjonsmotor som fokuserer på ytelse og minneffektivitet mens du animerer ulike elementer på en nettside. Jeg har allerede skrevet en serie om bruk av Anime.js for å lage JavaScript-baserte animasjoner. Denne gangen vil vi lære om KUTE.js og hvordan vi kan bruke den til å animere CSS-egenskaper, SVG og tekstelementer, blant annet.
Før vi dykker inn i noen eksempler, la oss først installere biblioteket. KUTE.js har en kjernemotor, og så er det plugins for å animere verdien av forskjellige CSS egenskaper, SVG attributter eller tekst. Du kan direkte lenke til biblioteket fra populære CDNer som cdnjs og jsDelivr.
Du kan også installere KUTE.js ved hjelp av enten NPM eller Bower ved hjelp av følgende kommandoer:
npm installere - lagre kute.js bower install - save kute.js
Når du har tatt med biblioteket i prosjektene dine, kan du begynne å lage dine egne animasjonssekvenser.
Når du lager animasjonen din ved hjelp av KUTE.js, må du definere tweenobjekter. Disse tweenobjektene gir all animasjonsrelatert informasjon for et gitt element eller elementer. Dette inkluderer selve elementet, egenskapene du vil animere, animasjonens varighet og andre attributter som gjentattelling, forsinkelse eller kompensasjon.
Du kan bruke .til() metode eller .fra til() metode for å animere et sett med CSS egenskaper fra en verdi til en annen. De .til() Metoden animerer egenskapene fra standardverdien eller deres beregnede / nåværende verdi til en endelig angitt verdi. I tilfelle av .fra til() Metode, du må gi både start og slutt animasjon verdier.
De .til() Metoden er nyttig når du ikke kjenner gjeldende eller standardverdien for egenskapen du vil animere. En stor ulempe ved denne metoden er at biblioteket må beregne nåverdien av alle egenskapene av seg selv. Dette resulterer i en forsinkelse på noen millisekunder etter at du ringer .start() for å starte animasjonen.
De .fra til() Metoden lar deg spesifisere start og slutt animasjonsverdiene selv. Dette kan marginalt forbedre ytelsen til animasjonene. Du kan nå også spesifisere enhetene for å starte og avslutte verdier selv og unngå eventuelle overraskelser i løpet av animasjonen. En ulempe ved bruk av .fra til() er at du ikke vil kunne stable flere transformasjonsegenskaper på kjedede tweens. I slike tilfeller må du bruke .til() metode.
Husk at begge deler .fra til() og .til() er ment å bli brukt når du animerer individuelle elementer. Hvis du vil animere flere elementer på en gang, må du bruke heller .Altfor å () eller .allFromTo (). Disse metodene fungerer som deres enslige element kolleger og arver alle sine attributter. De får også en ekstra offset attributt som bestemmer forsinkelsen mellom animasjonens start for forskjellige elementer. Denne forskyvningen er definert i millisekunder.
Her er et eksempel som animerer opaciteten til tre forskjellige bokser i rekkefølge.
Følgende JavaScript brukes til å opprette animasjonssekvensen ovenfor:
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 ("klikk", funksjon () animateOpacity.start ();, false);Alle boksene ovenfor har a eske klasse som har blitt brukt til å velge dem alle ved hjelp av querySelectorAll () metode. De allFromTo () Metoden i KUTE.js brukes til å animere opaciteten av disse boksene fra 1 til 0,1 med en offset på 700 millisekunder. Som du kan se, starter ikke tween-objektet animasjonen av seg selv. Du må ringe start() metode for å starte animasjonen.
I den forrige delen brukte vi start() metode for å starte animasjonene våre. KUTE.js-biblioteket inneholder også noen andre metoder som kan brukes til å kontrollere animasjonsavspillingen.
For eksempel kan du stoppe en animasjon som for tiden pågår ved hjelp av Stoppe() metode. Husk at du kan bruke denne metoden til å stoppe animasjonen av bare de tweenobjektene som er lagret i en variabel. Animasjonen for et tweenobjekt som ble opprettet på fluen, kan ikke stoppes med denne metoden.
Du har også muligheten til å bare pause en animasjon ved hjelp av pause() metode. Dette er nyttig når du vil gjenoppta animasjonen igjen på et senere tidspunkt. Du kan enten bruke gjenoppta() eller spille() for å gjenoppta animasjon som ble satt på pause.
Følgende eksempel er en oppdatert versjon av forrige demo med alle de fire metodene som er lagt til den.
Her er JavaScript-koden som trengs for å legge til start, stopp, spill og pause funksjonalitet.
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, opacity: 1, opacity: 0.1, offset: 700, duration: 2000); startButton.addEventListener ("klikk", funksjon () animateOpacity.start ();, false); stopButton.addEventListener ("klikk", funksjon () animateOpacity.stop ();, false); pauseButton.addEventListener ("klikk", funksjon () animateOpacity.pause ();, false); resumeButton.addEventListener ("klikk", funksjon () animateOpacity.resume ();, false); Jeg har endret animasjonsvarigheten til 2000 millisekunder. Dette gir oss nok tid til å trykke på forskjellige knapper og se hvordan de påvirker animasjonsavspillingen.
Du kan bruke kjede() metode for å kjede forskjellige tweens sammen. Når forskjellige tweens har blitt koblet, kaller de start() Metoden på andre tweens etter at deres egen animasjon er ferdig.
På denne måten får du spille forskjellige animasjoner i en sekvens. Du kan kjede forskjellige tweens med hverandre for å spille dem i en løkke. Følgende eksempel skal gjøre det klart:
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 ("klikk", funksjon () animateOpacity.start ();, false); rotateButton.addEventListener ("klikk", funksjon () animateRotation.start ();, false); chainButton.addEventListener ("klikk", funksjon () animateOpacity.chain (animateRotation); animateOpacity.start ();, false); loopButton.addEventListener ("klikk", funksjon () animateOpacity.chain (animateRotation); animateRotation.chain (animateOpacity); animateOpacity.start ();, false);Vi hadde allerede en tween å animere opaciteten. Vi har nå lagt til en annen som animerer rotasjonen av boksene våre. De to første knappene animerer opaciteten og rotasjonen en om gangen. Den tredje knappen utløser kjetting av animateOpacity med animateRotation.
Kjedingen selv starter ikke animasjonen, så vi bruker også start() metode for å starte opacity animasjonen. Den siste knappen brukes til å kutte begge tweens med hverandre. Denne gangen fortsetter animasjonene å spille på ubestemt tid etter at de er startet. Her er en CodePen-demo som viser all den ovennevnte koden i handling:
For å forstå hvordan kjetting fungerer, må du trykke på knappene i en bestemt rekkefølge. Klikk på Anatom Opacity knappen først, og du vil se at opacity animasjonen spilles bare en gang, og så skjer ingenting annet. Trykk nå på Animere rotasjon knappen og du vil se at boksene roterer en gang og så skjer ingenting annet.
Deretter trykker du på Kjede Animasjoner knappen, og du vil se at opacitetsanimasjonen spilles først, og når den er ferdig med iterasjonen, begynner rotasjonsanimasjonen å spille alt av seg selv. Dette skjedde fordi rotasjonsanimasjonen nå er koblet til opacitetsanimasjonen.
Trykk nå på Anatom Opacity knappen igjen, og du vil se at både opasitet og rotasjon er animert i rekkefølge. Dette er fordi de allerede hadde blitt koblet etter at vi klikket på Kjede Animasjoner.
På dette punktet trykker du på Animere rotasjon knappen vil bare animere rotasjonen. Årsaken til denne oppførselen er at vi bare har festet rotasjonsanimasjonen til opacitetsanimasjonen. Dette betyr at boksene vil bli rotert hver gang opaciteten er animert, men en rotasjonsanimasjon betyr ikke at opaciteten vil bli animert også.
Til slutt kan du klikke på Spill i en løkke knapp. Dette vil kjede begge animasjonene med hverandre, og når det skjer, vil animasjonene fortsette å spille i en ubestemt løkke. Dette skyldes at slutten av en animasjon utløser starten på den andre animasjonen.
I denne innledende KUTE.js opplæringen lærte du om grunnleggende i biblioteket. Vi startet med installasjonen og flyttet videre til forskjellige metoder som kan brukes til å lage tweenobjekter.
Du lærte også hvordan du kontrollerer avspillingen av en animasjon og hvordan du kjeder forskjellige tweens sammen. Når du har forstått fullstendig kjetting, vil du kunne lage interessante animasjoner ved hjelp av dette biblioteket.
I neste veiledning i serien lærer du hvordan du animerer forskjellige typer CSS-egenskaper ved hjelp av KUTE.js.
