Share
Etter å ha fullført de første tre opplæringene i serien, bør du nå være veldig komfortabel med mange Anime.js-funksjoner. Den første opplæringen viste deg hvordan du velger målelementer. I den andre opplæringen lærte du om ulike typer parametere som kan brukes til å ha fin kontroll over forsinkelsen og varigheten av animasjoner av forskjellige elementer. Den tredje opplæringen fokuserte på å lære å få større kontroll over verdiene til en enkelt eiendom i løpet av animasjonen.
I denne opplæringen lærer du om ulike tilbakeringinger som kan brukes til å utføre en funksjon basert på utviklingen av animasjonen. Nesten hvert eksempel i de tidligere opplæringene brukte CSS egenskaper til å demonstrere hvordan ulike metoder og parametere virker. Dette kan ha gitt deg ideen om at biblioteket er mer egnet for å animere CSS-egenskaper. Denne gangen vil vi ha en seksjon dedikert til etableringen av interessante SVG-relaterte animasjoner i Anime.js.
Som jeg nevnte i introduksjonen, kan du bruke tilbakeringinger til å utføre funksjoner basert på utviklingen av animasjonen. Det er fire forskjellige tilbakeringinger: begynne, løpe, Oppdater, og fullstendig. Hver tilbakeringingsfunksjon avfyres på et bestemt tidspunkt, og hver enkelt aksepterer et animasjonsobjekt som argument.
De begynne() funksjonen kalles når animasjonen faktisk begynner. Dette betyr at hvis en animasjon har en forsinkelse på 800ms, begynne() vil bli kalt bare etter at forsinkelsen er over. Du kan sjekke om en animasjon har begynt å spille eller ikke bruke animationName.begin, som kommer tilbake ekte eller falsk henholdsvis.
De løpe tilbakeringing kan brukes til å utføre en funksjon i hver ramme etter at en animasjon faktisk begynner å spille. Hvis du vil utføre en funksjon i hver ramme fra begynnelsen av animasjonen uavhengig av dens utsette, du bør bruke Oppdater tilbakeringing i stedet.
De fullstendig tilbakeringing ligner på begynne bortsett fra det faktum at det kalles når animasjonen er ferdig med å spille. Akkurat som begynne, du kan bruke animationName.complete for å sjekke om en animasjon er ferdig med å spille eller ikke.
Du har allerede sett i første veiledning hvordan du bruker Oppdater tilbakering mens du animerer numeriske verdier av en JavaScript-objekt. I denne opplæringen vil vi endre dette eksemplet og se hvordan du bruker alle disse tilbakekallingene sammen for å gi mer informasjon til brukeren.
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: "lineær", runde: 1, oppdatering: funksjon .nåværende 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… "; );Jeg har med vilje lagt litt forsinkelse i denne animasjonen slik at vi kan merke forskjellen i tidspunktet for utførelsen av forskjellige tilbakeringinger. De Oppdater tilbakeringing begynner å utføre sin funksjon så snart animasjonseksemplet begynner.
Den faktiske animasjonen begynner å spille etter 1000ms, og det er da begynne funksjonen viser meldingen "Start av Scan ..." til brukeren. De løpe funksjonen begynner også å utføre samtidig og oppdaterer de numeriske verdiene til objektet etter hver ramme. Når animasjonen er ferdig, vil fullstendig tilbakeringing viser en "Scan Complete ..." melding til brukeren.
Easing-funksjoner kan brukes til å kontrollere hvordan verdien av en egenskap overgår fra den opprinnelige verdien til den endelige verdien. Disse lettingsfunksjonene kan spesifiseres ved hjelp av easing-parameteren, som kan akseptere strenger og tilpassede Bézier-kurvekoordinater (i form av en matrise).
Det finnes 31 forskjellige innebygde lettingsfunksjoner. En av dem er lineær, og de andre 30 består av ti forskjellige variasjoner av easeIn, easeOut, og easeInOut. Det kalles tre elastiske lettelser easeInElastic, easeOutElastic, og easeInOutElastic. Du kan kontrollere deres elastisitet ved hjelp av elastisitet parameter. Verdien av elastisitet kan være hvor som helst mellom 0 og 1000.
EaseIn ligninger akselerere verdien endring av egenskapen starter fra null. Dette betyr at verdiendringen vil være langsom i begynnelsen og veldig rask på slutten. Endringshastigheten er null i begynnelsen og maksimum på slutten. EaseOut ligningene senker verdienes endring av egenskapen med utgangspunkt i den maksimale hastighetsendringen.
Dette betyr at verdiendringen vil være veldig rask i begynnelsen og veldig sakte på slutten. EaseInOut ligninger akselerere hastighetsendringen i begynnelsen og decelerere den på slutten. Dette betyr at endringshastigheten vil være sakte i begynnelsen og i slutten, og det vil være raskest midt i animasjonen. Følgende demo viser forskjellen i endringshastigheten for hver av disse lettelsefunksjonene.
Du kan også legge til dine egne tilpassede lette funksjoner til den innebygde listen ved hjelp av anime.easings. Her er et eksempel på å skape tilpassede lette funksjoner.
anime.easings ['tanCube'] = funksjon (t) return Math.pow (Math.tan (t * Math.PI / 4), 3); anime.easings ['tanSqr'] = funksjon (t) return Math.pow (Math.tan (t * Math.PI / 4), 2); var tanCubeSequence = anime (mål: '.tan-cube', translateX: '75vw', varighet: 2000, lettelse: 'tanCube', autoplay: false); var tanSqrSequence = anime (mål: '.tan-sqr', translateX: '75vw', varighet: 2000, lettelse: 'tanSqr', autoplay: false);
Alle bevegelsesrelaterte animasjonene som vi har opprettet til nå har flyttet målelementene i rette linjer. Det er også mulig i Anime.js å flytte et element langs en kompleks SVG-bane med mange kurver. Du kan kontrollere både posisjonen og vinkelen til de animerende elementene på banen. For å flytte et element til x-koordinaten av banen, kan du bruke bane (x). På samme måte kan et element flyttes i henhold til y-koordinaten til banen ved hjelp av bane (y).
Med mindre banen er en rett linje, vil den nesten alltid danne en vinkel med hensyn til den horisontale grunnlinjen. Hvis du roterer et ikke-sirkulært element, vil det føles mer naturlig hvis elementet følger veivinkelen. Du kan gjøre det ved å sette inn rotere eiendom å være lik banen ( 'vinkel'). Her er koden som animerer fire elementer med forskjellige lettelseverdier langs en SVG-bane.
var path = anime.path ('path'); var easings = ['lineær', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic']; var motionPath = anime (mål: '. square', translateX: path ('x'), translateY: bane ('y'), rotere: bane ('vinkel'), lette: funksjon (el, i) easings [i];, varighet: 10000, loop: true);Du kan se i den følgende demoen at den røde firkanten med easeInCubic lettelse er sakte i begynnelsen og den raskeste på slutten. Tilsvarende, den oransje firkanten med easeOutCubic er den raskeste i begynnelsen og den tregeste på slutten.
Du kan også animere morphing av forskjellige SVG-former til hverandre ved hjelp av Anime.js. Den eneste tilstanden er at begge figurene skal ha samme antall poeng. Dette betyr at du bare kan morph trekanter i andre trekanter og firkanter i andre firkanter. Å forsøke å morph mellom et ulikt antall polygonpunkter vil resultere i en abrupt formendring. Her er et eksempel på morphing en trekantet form.
var morphing = anime (mål: 'polygon', poeng: [verdi: '143 31 21 196 286 223', verdi: '243 31 21 196 286 223', verdi: '243 31 121 196 286 223 ', verdi:' 243 31 121 196 386 223 ', verdi:' 543 31 121 196 386 223 '], lette:' lineær ', varighet: 4000, retning:' alternativ ', loop: true );
En mer interessant effekt som du kan opprette med SVG er linjetegning. Alt du trenger å gjøre er å gi Anime.js banen du vil bruke til linjetegning og andre parametere som styrer varigheten, forsinkelsen eller lempelsen. I den følgende demoen har jeg brukt fullstendig tilbakeringing for å fylle linje tegningen av Font Awesome ankerikonet med en gul farge.
var lineDrawing = anime (mål: 'path', strokeDashoffset: [anime.setDashoffset, 0], easing: 'easeInOutCubic', varighet: 4000, komplett: funksjon (anim) document.querySelector ('path'). setAttribute "fyll", "gul"););Kombinere kunnskapen om alle konseptene du har lært så langt, kan du lage mer komplekse linjetegninger med mye bedre kontroll over måten de er tegnet på. Her er et eksempel der jeg har skrevet mitt eget navn ved hjelp av SVG.
var letterTime = 2000; var lineDrawing = anime (mål: "sti", strøkDashoffset: [anime.setDashoffset, 0], easing: "easeInOutCubic", varighet: letterTime, forsinkelse: funksjon (el, i) return letterTime * i;, start: funksjon (anim) var bokstaver = document.querySelectorAll ("path"), i; for (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"); hvis (anim.currentTime> = 2 * letterTime) document.querySelector (". letter-o"). setAttribute ("fill", "# 3F51B5"); hvis (anim.currentTime> = 3 * letterTime) document.querySelector (". letter-n"). setAttribute ("fill", "# 8BC34A"); hvis (anim.currentTime> = 4 * letterTime) document.querySelector (". letter-t"). setAttribute ("fill", "# FF5722"); hvis (anim.currentTime> = 5 * letterTime) document.querySelector (". letter-y"). setAttribute ("fill", "# 795548"); , autoplay: false); Jeg begynner med å tildele verdien 2000 til variabelen letterTime. Dette er tiden jeg vil ha Anime.js å ta mens den tegner hvert brev i navnet mitt. De utsette eiendom bruker den funksjonsbaserte indeksparameteren til å angi et passende utsette verdi ved hjelp av letterTime variabel.
Indeksen for første bokstaven "M" er null, så Anime.js begynner å tegne det umiddelbart. Bokstaven "O" har en forsinkelse på 2000ms fordi det er den tiden det tar å helt tegne bokstaven "M".
Inne i begynne tilbakeringing, jeg har satt hjerneslag verdien av alle bokstavene til svart og deres fylle verdier til ingen. På denne måten kan vi fjerne alle fargeverdiene som brukes i Oppdater tilbakeringing slik at bokstavene kan returnere til sin opprinnelige tilstand når de kjøres i flere sløyfer. Prøv å klikke på Skriv navnet knappen i den følgende demonstrasjonen for å se koden i aksjon.
I denne opplæringen har du lært om forskjellige tilbakeringingsfunksjoner som kan brukes til å utføre oppgaver som å oppdatere DOM eller endre verdien av et attributt basert på animasjonsfremgangen. Du lærte også om ulike lettelsefunksjoner og hvordan du lager en egen. Den siste delen av opplæringen fokuserte på å lage SVG-baserte animasjoner.
Etter å ha fullført alle fire veiledningene i serien, bør du nå ha nok kunnskap om Anime.js for å skape interessante effekter for ditt neste prosjekt. Hvis du har noen spørsmål knyttet til denne opplæringen, vennligst gi beskjed i kommentarene.
