Share
I den forrige veiledningen i Anime.js-serien lærte du om ulike typer parametere som styrer hvordan ulike målelementer skal animeres. Du lærte også hvordan du bruker funksjonsparametere for gradvis å endre forsinkelsen eller varigheten av elementene.
I denne opplæringen vil vi gå et skritt videre og lære å spesifisere egenskapsverdiene selv ved hjelp av vanlige tall, funksjonsbaserte verdier og keyframes. Du vil også lære å spille animasjoner i rekkefølge ved hjelp av tidslinjer.
Anime.js lar deg spesifisere slutt- eller sluttverdiene for animerbare egenskaper til målelementene. Start- eller startverdien for animasjonen er standardverdien for den aktuelle egenskapen. Enhver verdi som er spesifisert i CSS kan også fungere som startverdi. Det er flere måter å spesifisere en slutt verdi på.
Det kan også være et enhetløst nummer. I dette tilfellet brukes de opprinnelige eller standard enhetene av eiendommen mens du beregner eventuelle eiendomsverdier. Du kan også spesifisere verdien som en streng, men strengen må inneholde minst en numerisk verdi. Eksempler på strengverdier ville være 10vh, 80%, og 9.125turn.
I stedet for å angi en absolutt verdi, kan du også angi eiendomsverdier i forhold til gjeldende verdi. For eksempel kan du angi finalen translateY verdi å være 150px større enn gjeldende verdi ved bruk av += 150px som en verdi. Husk at du kun kan bruke tillegg, multiplikasjon og subtraksjon mens du angir relative verdier.
Mens animerende farger, kan du ikke bruke farge navn som rødt, svart og blått for å angi en endelig fargeverdi for animasjonen. I slike tilfeller vil fargeanimasjonen ikke skje i det hele tatt, og endringen vil være øyeblikkelig. Den eneste måten å animere farger på er å angi verdiene enten som heksesiffer eller i form av RGB- og HSL-verdier.
Som du kanskje har lagt merke til, har vi ikke angitt en innledende verdi for våre målelementer for å animere dem. Anime.js bestemmer automatisk startverdien basert på vårt CSS og standardverdiene for disse egenskapene. Du kan imidlertid angi en annen verdi enn standardverdien for en egenskap som bruker arrays. Det første elementet i arrayet indikerer den opprinnelige verdien, og det andre elementet angir sluttverdien.
I stedet for å bruke samme sluttverdien for alle målelementene dine, kan du bruke funksjoner til å angi forskjellige verdier for ulike parametere. Prosessen ligner på å angi funksjonsbaserte egenskapsparametere.
var uniqueTranslation = anime (mål: '. square', translateY: funksjon (el, i) retur 50 * (i + 1);, autoplay: false); var randomScaling = anime (mål: '. square', skala: funksjon (el, i) return Math.random () * 1,5 + i / 10;, autoplay: false); var randomRotation = anime (mål: '. square', roter: funksjon () return anime.random (-180, 180);, autoplay: false); var randomRadius = anime (mål: '. square', borderRadius: funksjon (el) return 20 + Math.random () * el.offsetWidth / 4;, autoplay: false); var randomAll = anime (mål: '. square', translateY: funksjon (el, i) retur 50 + 50 * i;, skala: funksjon (el, i) retur Math.random () * 1.5 + i / 10;, rotere: funksjon () return anime.random (-180, 180);, borderRadius: funksjon (el) return Math.random () * el.offsetWidth / 2;, varighet: funksjon ) return anime.random (1500, 2400);, forsinkelse: funksjon () return anime.random (0, 1000);, autoplay: false);
For translateY eiendom bruker vi indeksen til elementet til å sette en oversettelsesverdi. Ved hjelp av 50 * (i + 1) øker translateY verdi for hvert element med 50 piksler.
Skalingsanimasjonen bruker også indeksen til elementet sammen med det innebygde Math.random () funksjon for å returnere et flytende punkt, pseudo-tilfeldig tall mindre enn 1. På denne måten måler elementene tilfeldig, men i / 10 En del av eiendommen øker muligheten for at elementer som oppstår i slutten har en større størrelse.
Inne i koden for rotasjonsanimasjon bruker vi anime.random (a, b) hjelpefunksjon for å få tilfeldige heltall mellom -180 og 180. Denne funksjonen er nyttig for å tilordne tilfeldige integrerte verdier til egenskaper som translateY og rotere. Ved å bruke denne funksjonen til å tilordne tilfeldige skalverdier vil det oppstå ekstreme resultater.
Grenseradiusverdien for forskjellige elementer bestemmes ved å beregne bredden på målelementene ved hjelp av el funksjonsparameter. Endelig tilordner den siste delen av koden tilfeldige verdier til varighet og utsette parametere også.
Du kan se at animasjonen oppnådd av den siste delen er veldig tilfeldig. Det er ingen sammenheng mellom verdiene for forskjellige egenskaper av elementer eller deres forsinkelses- og varighetsverdier. I virkeligheten er det mer fornuftig å bruke verdier som kan legge til litt følelse av retning til animasjonen.
Det er også mulig å animere forskjellige egenskaper av målelementene dine ved hjelp av keyframes. Hver keyframe består av en rekke av eiendomsobjektet. Du kan bruke objektet til å spesifisere eiendomsverdien, varighet, utsette og lettelser for den delen av animasjonen. Følgende kode oppretter en keyframe-basert oversettelse animasjon.
var keyframeTranslation = anime (mål: '.square', translateY: [verdi: 100, varighet: 500, verdi: 300, varighet: 1000, forsinkelse: 1000, verdi: 40, varighet: 500, forsinkelse : 1000], autoplay: false); var keyframeAll = anime (mål: '.square', translateY: [verdi: 100, varighet: 500, verdi: 300, varighet: 1000, forsinkelse: 1000, verdi: 40, varighet: 500, forsinkelse : 1000, skala: [verdi: 1,1, varighet: 500, verdi: 0,5, varighet: 1000, forsinkelse: 1000, verdi: 1, varighet: 500, forsinkelse: 1000], roter: verdi: 60, varighet: 500, verdi: -60, varighet: 1000, forsinkelse: 1000, verdi: 75, varighet: 500, forsinkelse: 1000], borderRadius: [verdi: 10, varighet: 500, verdi: 50, varighet: 1000, forsinkelse: 1000, verdi: 25, varighet: 500, forsinkelse: 1000], forsinkelse: funksjon (el, i) retur 100 * (i + 1) , autoplay: false);
Du kan også animere flere egenskaper samtidig, ved å angi forskjellige eller de samme verdiene for alle parametrene. I det andre tilfellet, den globale utsette parameteren bruker en innledende forsinkelse til alle elementene basert på deres indeks. Denne forsinkelsen er uavhengig av forsinkelsen som brukes på hver eiendom i keyframes.
Så langt i serien har vi brukt utsette parameter for å spille forskjellige animasjoner i en bestemt rekkefølge. For å bruke forsinkelse for dette formålet må vi også vite varigheten til den forrige animasjonen.
Med den økende kompleksiteten til animasjonssekvensen blir det svært kjedelig å opprettholde den riktige forsinkelsesverdien. Enhver endring i varigheten av en av animasjonene vil tvinge oss til å beregne alle forsinkelsesverdiene for å holde animasjonene i den opprinnelige sekvensen.
En bedre løsning på dette problemet er å bruke tidslinjer for å kontrollere animasjonssekvensen. Du må bruke anime.timeline () funksjon for å lage en tidslinje i Anime.js. Du kan også sende forskjellige parametere til denne funksjonen som et objekt. Disse parametrene kan spesifisere retningen som tidslinjen spilles av, tallet looper og en Auto spill parameter for å bestemme om animasjonen skal spilles automatisk. Alle disse parameterne er blitt diskutert i detalj i parameteropplæringen i denne serien.
Du kan legge til forskjellige animasjoner til en tidslinje ved hjelp av Legg til() metode. Alle animasjonene lagt til tidslinjen vil bli spilt i den rekkefølgen de ble lagt til. Det er mulig å spesifisere absolutte eller relative offsetverdier for å kontrollere rekkefølgen der animasjonene spilles.
Når relative offset-verdier brukes, bestemmes starttidspunktet for den nåværende animasjonen i forhold til tidspunktet for den forrige animasjonen. Relative forskyvninger kan være av tre typer:
Følgende kode viser hvordan du lager en grunnleggende tidslinje og en tidslinje med relative offsetverdier.
var basicTimeline = anime.timeline (retning: "alternativ", loop: 2, autoplay: false); basicTimeline.add (mål: '. square', translateY: 200) legg til (mål: '.red', translateY: 100). Legg til (mål: '.blue', translateY: 0); var offsetTimeline = anime.timeline (retning: "alternativ", loop: 2, autoplay: false); offsetTimeline.add (mål: '.square', translateY: 200). Legg til (mål: '.red', offset: '+ = 1000', translateY: 100). ', offset:' * = 2 ', translateY: 0);
Prøv å klikke på Offset Tidslinje knappen i ovennevnte demo. Du vil se at det er en forsinkelse på 2 sekunder mellom slutten av animasjonen av røde firkanter og begynnelsen av animasjonen av blå firkanter.
Vi har ikke spesifisert en varighet for den røde firkantede animasjonen. Derfor brukes en standardverdi på 1000ms eller 1s som varighet. Multiplikatorforskyvningen for den blå firkantede animasjonen fordobler verdien, og dette resulterer i en forsinkelse på to sekunder i animasjonen.
Når absolutt offset-verdier brukes, blir starttidspunktet for tidslinjen brukt som referansepunkt. Det er mulig å reversere sekvensen der animasjonene spilles ved å bruke store offsetverdier for animasjoner som forekommer i begynnelsen av tidslinjen.
Anime.js har en rekke alternativer for å spille, pause, starte på nytt eller søke animasjoner eller tidslinjer på et gitt punkt.
De spille() funksjonen tillater oss å starte animasjonen fra dagens utvikling. De pause() funksjonen vil fryse animasjonen i øyeblikket funksjonen ble kalt. De omstart() Funksjon starter animasjonen fra begynnelsen, uavhengig av gjeldende fremgang. De søke (verdi) funksjonen kan brukes til å fremme animasjonen av verdi antall millisekunder.
Du bør huske på at spille() Funksjonen gjenopptar bare animasjonen fra det tidspunkt den ble stanset. Hvis animasjonen allerede har nådd slutten, kan du ikke spille animasjonen igjen med spille(). For å spille av animasjonen, må du bruke omstart() funksjon.
Accentsconagua
var slowAnimation = anime (mål: '. square', translateY: 250, borderRadius: 50, duration: 4000, easing: 'lineær', autoplay: false); document.querySelector ('play'). onclick = slowAnimation.play; document.querySelector ('pause'). onclick = slowAnimation.pause; document.querySelector ('. restart'). onclick = slowAnimation.restart; var seekInput = document.querySelector ('. søk'); searchInput.oninput = function () slowAnimation.seek (slowAnimation.duration * (seekInput.value / 100)); ;Legg merke til at vi ikke bruker seekInput.value for å angi en verdi for søkefunksjonen. Dette skyldes at maksimumsverdien for rekkeviddeinngangen er satt til 100 i oppmerkningen. Direkte bruk av verdien for innspillingsområdet vil tillate oss å bare søke opptil 100 ms. Ved å multiplisere rekkeviddeinngangsverdien med animasjonsvarigheten sørger vi for at vi kan søke animasjonen fra begynnelsen til slutten på glidebryteren.
I denne opplæringen lærte du hvordan du animerer forskjellige eiendomsverdier som tall, funksjoner eller nøkkelrammer. Du lærte også hvordan du kontrollerer og manipulerer tidslinjer i Anime.js for å kontrollere rekkefølgen der en animasjonssekvens spilles.
Hvis du leter etter flere ressurser for å studere eller bruke i arbeidet ditt, sjekk ut hva vi har tilgjengelig på Envato-markedet.
Hvis du har noen spørsmål knyttet til denne opplæringen, vennligst gi beskjed i kommentarene.
