Share
I den første opplæringen av Anime.js-serien lærte du om forskjellige måter å spesifisere målelementene du vil animere, og hvilke typer CSS-egenskaper og DOM-attributter som kan animeres. Animasjonene i forrige opplæring var veldig grunnleggende. Alle målelementene flytte bare en viss avstand eller endrer grensen radius med en fast hastighet.
Noen ganger må du kanskje animere målelementene på en mer rytmisk måte. For eksempel kan du ha ti forskjellige elementer som du vil flytte fra venstre til høyre med en forsinkelse på 500ms mellom starten av animasjonen for hvert element. På samme måte vil du kanskje øke eller redusere animasjonsvarigheten for hvert element basert på posisjonen.
I denne opplæringen lærer du hvordan du bruker Anime.js til riktig tid å animere ulike elementer ved hjelp av bestemte parametere. Dette vil tillate deg å kontrollere rekkefølgen der en animasjonssekvens spilles for enkelte elementer eller alle elementene.
Disse parametrene lar deg kontrollere varigheten, forsinkelsen og lempelsen av individuelle egenskaper eller en gruppe av egenskaper samtidig. De varighet og utsette parametere er spesifisert i millisekunder. Standardverdien for varighet er 1000ms eller 1s.
Dette betyr at med mindre annet er angitt, vil en animasjon som er brukt på et element bli spilt i 1 sekund. De utsette parameter angir hvor lang tid animasjonen tar for å begynne når du allerede har utløst den. Standardverdien for forsinkelse er 0. Dette betyr at animasjonene starter så snart de utløses.
Du kan bruke lettelser parameter for å styre frekvensen der en animasjon spilles for varigheten den er aktiv. Noen animasjoner starter sakte, tar opp tempoet i midten, og senker du igjen på slutten. Andre starter i et godt tempo og senker deretter for resten av tiden.
Imidlertid fullfører animasjonen i alle tilfeller alltid innen den angitte tiden ved hjelp av varighet parameter. Anime.js gir mange enkle funksjoner som du kan søke på elementene dine direkte ved å bare bruke navnene sine. For noen lettelsefunksjoner kan du også angi en verdi for elastisitet parameter for å kontrollere hvor mye elementets verdi spretter frem og tilbake som en vår.
Du vil lære mer om ulike lettelsefunksjoner i den siste opplæringen av serien. Følgende kodestykke viser hvordan du bruker alle disse parameterne til forskjellige animasjoner.
var slowAnimation = anime (mål: '. square', translateY: 250, borderRadius: 50, duration: 4000); var delayAnimation = anime (mål: '. square', translateY: 250, borderRadius: 50, delay: 800); var cubicAnimation = anime (mål: '. square', translateY: 250, borderRadius: 50, duration: 1200, easing: 'easeInOutCubic');
Som du kan se, kan disse parameterne brukes uavhengig av andre parametere eller i kombinasjon med dem. De cubicAnimation har begge varighet og lettelser parameter brukt på den. Hvis varigheten ikke var oppgitt, ville animasjonen ha kjørt i 1 sekund. Nå vil den løpe i 1200 millisekunder eller 1,2 sekunder.
En stor begrensning av egenskapsparametere i eksempelet ovenfor var at alle animasjonene til målelementet vil ha det samme varighet, utsette og lettelser verdier.
Dette kan eller ikke være ønsket oppførsel. For eksempel, i stedet for å oversette og endre grenseradiusen til målelementet samtidig, kan du først oversette målelementet og deretter animere grenseradiusen. Anime.js lar deg angi forskjellige verdier for varighet, utsette, lettelser og elastisitet parametere for individuelle egenskaper. Følgende kode og demo skal gjøre det tydeligere.
var indiParam = anime (mål: '. square', translateY: verdi: 250, roter: verdi: '2.125turn', backgroundColor: verdi: 'rgb (255,0,0)', varighet: 400, forsinkelse: 1500, lettelse: 'lineær', varighet: 1500);
I ovennevnte kode har alle egenskapene vi vil animere, forskjellige verdier. Bakgrunnsfargeanimasjonen har en varighet på 400ms, mens rotasjons- og oversettelsesanimasjonene bruker den globale varighetsverdien på 1500ms.
Bakgrunnsfargeanimasjonen har også en forsinkelse, slik at en endring i fargen bare starter etter at 1500m er gått. De rotere og translateY Egenskaper bruker standardverdien for utsette og lettelser parametere fordi vi heller ikke har gitt en lokal eller global verdi for dem.
Egenskapsbaserte parametere er nyttige når du vil endre rekkefølgen og varigheten for å animere individuelle egenskaper. Men det samme varighet og utsette vil fortsatt bli brukt for individuelle egenskaper på alle målelementene. Funksjonsbaserte parametre lar deg spesifisere spesifikt varighet, utsette, elastisitet og lettelser for ulike målelementer på en kompakt måte.
I dette tilfellet angir du verdiene for forskjellige parametere ved hjelp av funksjoner i stedet for tall. Disse funksjonene godtar tre parametere: mål, index, og targetCount. De mål parameter lagrer referansen til det nåværende målelementet. De index parameter lagrer indeksen eller posisjonen til det nåværende målelementet. De targetCount parameter lagrer totalt antall målelementer.
De mål parameteren er nyttig når animasjonsverdiene må settes basert på noen attributter av målelementet. For eksempel kan du lagre utsette, varighet eller lettelser verdier for et målelement i dataattributter og deretter få tilgang til dem senere.
På samme måte kan du få tilgang til bakgrunnsfargen til et målelement, og deretter manipulere det for å angi en enestående unikt fargerverdi for individuelle elementer. På denne måten kan du animere alle elementene for å ha en bakgrunnsfarge som er 20% mørkere enn deres nåværende farge.
De index parameteren gir deg posisjonen til det nåværende målet i vår liste over målelementer. Du kan bruke den til å gradvis endre verdien for parametere som varighet og utsette for forskjellige elementer.
Dette er generelt nyttig når du vil angi verdiene i stigende rekkefølge. Du kan også trekke fra index fra targetCount å angi verdiene i synkende rekkefølge. Følgende kodestykke bruker begge disse parametrene til å angi verdiene i stigende og synkende rekkefølge.
var delaySequence = anime (mål: '. square', translateY: 250, forsinkelse: funksjon (mål, indeks) returindeks * 200;); var delaySequenceR = anime (mål: '.square', translateY: 250, forsinkelse: funksjon (mål, indeks, targetCount) return (targetCount - index) * 200;);
Følgende kode angir et annet lettelser verdi for hvert målelement ved hjelp av index parameter.
var easeInValues = ['easeInQuad', 'easeInCubic', 'easeInQuart', 'easeInQuint', 'easeInSine', 'easeInExpo', 'easeInCirc', 'easeInBack', 'easeInElastic']; var easyInSequence = anime (mål: '. square', translateY: 250, duration: 2000, easing: funksjon (mål, indeks) retur easeInValues [index];, autoplay: false);
Dette siste settet med parametre lar deg spesifisere antall ganger en animasjon skal spilles og retningen der den skal spilles. Du kan angi antall ganger en animasjon skal spilles med sløyfe parameter. Det er også en Auto spill parameter som kan settes til ekte eller falsk. Standardverdien er ekte, men du kan stoppe animasjonene fra å starte med seg selv ved å sette den til falsk.
De retning parameteren styrer retningen der animasjonen spilles. Det kan ha tre verdier: normal, omvendt, og alternere. Standardverdien er normal, som gjør at animasjonen spiller normalt fra startverdiene til sluttverdiene. Når målelementene når sluttverdien, hvis sløyfe verdien er større enn 1, hopper målelementene brått tilbake til startverdiene og starter animasjonen på nytt.
Når retning er satt til omvendt og sløyfe verdien er større enn 1, animasjonen blir reversert. Med andre ord starter målelementene animasjonen fra sin endelige tilstand og går bakover for å nå den opprinnelige tilstanden. Når de er i opprinnelig tilstand, hopper elementene tilbake til den endelige tilstanden og starter igjen omvendt animasjon. De alternere retningsverdien endrer animasjonsretningen etter hver løkke.
var normalLoop = anime (mål: '.square', translateY: 250, forsinkelse: funksjon (mål, indeks) returindeks * 200;, loop: 4, lettelse: 'easeInSine', autoplay: false);
I den følgende demoen har jeg satt antall løkker til fire slik at du enkelt kan merke forskjellen i animasjon av elementene i forskjellige moduser.
I denne opplæringen lærte du om ulike typer parametere som kan brukes til å kontrollere animasjonen av målelementer i Anime.js. Egenskapsparametrene brukes til å kontrollere animasjonen av individuelle egenskaper.
Du kan bruke dem til å kontrollere sekvensen der animasjonen spilles for individuelle elementer. Funksjonsparametrene lar deg styre timingen og animasjonsgraden for individuelle elementer i forhold til hele gruppen. Animasjonsparametrene lar deg kontrollere hvordan selve animasjonen spilles for forskjellige elementer.
Hvis du har noen spørsmål knyttet til denne opplæringen, vennligst gi beskjed i kommentarene.
Accentsconagua