Share
Anime.js er et lett JavaScript-basert animasjonsbibliotek. Du kan bruke den til å animere forskjellige CSS egenskaper, SVG eller DOM attributter på en nettside. Biblioteket lar deg kontrollere alle aspekter av animasjonen og gir mange måter du kan angi elementene du vil målrette mot eller egenskapene du vil animere.
Du har full kontroll over sekvensen der animasjonene spilles, eller hvordan synkroniserte animasjonene av ulike elementer er i forhold til hverandre. Biblioteket støtter alle moderne nettlesere, inkludert IE10+.
I denne opplæringsserien lærer du om alle funksjonene i Anime.js, slik at du enkelt kan bruke dem i virkelige prosjekter..
Før du dykker dypt inn i emnet, la oss først installere biblioteket. Du kan også bruke NPM eller Lysthus å utføre installasjonen ved å kjøre følgende kommandoer:
npm installere animejs bower install animejs
Du kan også laste ned biblioteket og inkludere det i prosjektet eller direkte link til den nyeste versjonen av biblioteket som er hostet på en CDN.
Etter en vellykket installasjon, er du nå klar til å bruke dette biblioteket for å legge til interessant animasjon til elementene dine. Vi vil starte med det grunnleggende i biblioteket, med fokus på et bestemt område om gangen.
For å lage animasjoner ved hjelp av Anime.js må du ringe anime () fungere og send det til et objekt med nøkkelverdige par som angir målelementene og egenskapene du vil animere blant annet. Du kan bruke mål nøkkel til å fortelle Anime.js hvilke elementer du vil animere. Denne nøkkelen kan akseptere verdier i forskjellige formater.
CSS Selectors: Du kan bestå en eller flere CSS-selektorer som en verdi for mål nøkkel.
var blue = anime (mål: '.blue', translateY: 200); var redBlue = anime (mål: '.red, .blue', translateY: 200); var even = anime (mål: '. square: nth-child (even)', translateY: 200); var notRed = anime (mål: '.square: ikke (.red)', translateY: 200);
I det første tilfellet vil Anime.js animere alle elementene med a blå klasse. I andre tilfelle vil Anime.js animere alle elementene med enten rød eller blå klasse. I tredje tilfelle vil Anime.js animere alle de enslige barna med a torget klasse. I det siste tilfellet vil Anime.js animere alle elementene med a torget klasse som ikke har en rød klasse.
DOM Node eller NodeList: Du kan også bruke en DOM-node eller en NodeList som en verdi for mål nøkkel. Her er noen eksempler på å sette inn mål som en DOM-node.
Accentsconagua
var special = anime (mål: document.getElementById ('special'), translateY: 200); var blue = anime (mål: document.querySelector ('blue'), translateY: 200); var redBlue = anime (mål: document.querySelectorAll ('. rød, .blue'), translateY: 200); var even = anime (mål: document.querySelectorAll ('. square: nth-child (even)'), translateY: 200); var notRed = anime (mål: document.querySelectorAll ('. square: not (.red)'), translateY: 200);I det første tilfellet har jeg brukt getElementById () funksjon for å få vårt spesielle element. De querySelector () funksjonen brukes til å få det første elementet som har den blå klassen. De querySelectorAll () funksjonen brukes til å få alle elementene i dokumentet som samsvarer med den angitte gruppen av selektorer.
Det er også mange andre funksjoner som du kan bruke til å velge målelementene du vil animere. For eksempel kan du få alle elementene med et gitt klassenavn ved hjelp av getElementsByClassName () funksjon. På samme måte kan du også få alle elementene med et gitt tagnavn ved hjelp av getElementsByTagName () funksjon.
Enhver funksjon som returnerer en DOM-node eller en NodeList kan brukes til å angi verdien av mål tast inn Anime.js.
Gjenstand: Du kan også bruke et JavaScript-objekt som en verdi for mål nøkkel. Nøkkelen til objektet brukes som en identifikator, og verdien brukes som et tall som må animeres.
Du kan deretter vise animasjonen i et annet HTML-element ved hjelp av ekstra JavaScript. Her er koden for å animere verdiene til to forskjellige nøkler til et objekt.
var filesScanned = count: 0, infected: 0; var scanning = anime (mål: filesScanned, count: 1000, infisert: 8, runde: 1, oppdatering: funksjon () var scanCount = document.querySelector ('scan-count'); scanCount.innerHTML = filesScanned.count ; var infectedCount = document.querySelector ('infected-count'); infectedCount.innerHTML = filesScanned.infected;);Ovennevnte kode vil animere de skannede filene som teller fra 0 til 1000, og de infiserte filene teller fra 0 til 8. Husk at du bare kan animere numeriske verdier på denne måten. Å prøve å animere en nøkkel fra 'AAA' til 'BOY' vil føre til en feil.
Vi har også brukt en tilbakeringingsfunksjon for Oppdater nøkkel som kalles på hver ramme mens animasjonen kjører. Vi har brukt det her for å oppdatere antallet av skannede og infiserte filer. Du kan imidlertid gå et skritt videre og vise brukerne en feilmelding når antall infiserte filer går over en bestemt grense.
Array: Muligheten til å spesifisere et JavaScript-array som målet kommer til nytte når du må animere en mengde elementer som faller under forskjellige kategorier. Hvis du for eksempel vil animere en DOM-node, et objekt og en rekke andre elementer basert på CSS-selektorer, kan du gjøre det enkelt ved å sette dem alle inne i en matrise og deretter spesifisere det som en verdi for mål nøkkel. Følgende eksempel skal gjøre det tydeligere:
var multipleAnimations = anime (mål: [document.querySelectorAll ('blue'), '.red, #special'], translateY: 250);Nå som du vet hvordan du angir forskjellige elementer du vil animere, er det på tide å lære om alle egenskapene og attributter som kan animeres ved hjelp av biblioteket.
CSS Egenskaper: Anime.js lar deg animere mange CSS egenskaper, som bredde, høyde og farge, for ulike målelementer. De endelige verdiene av forskjellige animerbare egenskaper som bakgrunnsfarge og kantbredde er spesifisert ved hjelp av en kamel-tilfelleversjon av den aktuelle egenskapen. Derfor blir bakgrunnsfargen bakgrunnsfarge, og grensebredden blir borderWidth. Følgende kodestykke viser hvordan du animerer venstre posisjon og bakgrunnsfargen til et målelement i Anime.js.
var animateLeft = anime (mål: '. square', venstre: '50% '); var animateBackground = anime (mål: '. square', backgroundColor: '# f96');
Egenskapene kan akseptere alle typer verdier som de ville ha akseptert når de ble brukt i vanlig CSS. For eksempel eiendommen venstre kan settes til 50vh, 500px, eller 25em. Du kan også angi verdien som et bare nummer. I dette tilfellet vil nummeret bli konvertert til en pikselverdi. På samme måte kan bakgrunnsfargen spesifiseres som en heksadesimal, RGB- eller HSL-fargeverdi.
CSS Transforms: Du kan også animere forskjellige CSS-transformasjonsegenskaper ved hjelp av Anime.js. Oversettelse langs x- og y-aksene kan oppnås ved hjelp av translateX og translateY eiendommer. På samme måte er det mulig å skala, skrå eller rotere et element langs en bestemt akse ved å bruke skala, skew og rotere eiendom som tilsvarer den spesifikke akse.
Du kan angi forskjellige vinkler enten i termer eller grader eller i forhold til sving. Verdien på 1 sving er lik 360 °. Dette kan gjøre beregningen enklere når du vet hvor mye du vil slå elementene i form av fullstendige rotasjoner. Følgende eksempel viser hvordan du kan animere skaleringen, oversettelsen eller rotasjonen av et element på individuell basis, så vel som alle samtidig.
var animateScaling = anime (mål: '. square', skala: 0,8); var animateTranslation = anime (mål: '. square', translateX: window.innerWidth * 0.8); var animateRotation = anime (mål: '. square', roter: '1turn'); var animateAll = anime (mål: '. square', skala: 0,8, translateX: window.innerWidth * 0.8, roter: '1turn');
SVG Attributter: Det er mulig å animere attributter av forskjellige SVG-elementer ved hjelp av Anime.js. Den eneste betingelsen er at verdien av disse attributter skal være numerisk. Denne muligheten til å animere forskjellige attributter åpner opp muligheten for å skape noen virkelig kule effekter. Siden du nettopp begynner å lære om Anime.js, vil vi holde eksemplene i denne opplæringen veldig grunnleggende.
Når vi går videre, lærer du hvordan du lager mer komplekse animasjoner. Her er koden for å animere cx, cy og slag-bredde attributter av en sirkel. På samme måte som CSS-egenskapene, må du bruke en camel case versjon av slag-bredde for koden til å fungere.
var animateX = anime (mål: '.circle', cx: window.innerWidth * 0,6); var animateStrokeWidth = anime (mål: '.circle', strokeWidth: '25');
DOM Attributter: Du kan også animere numeriske DOM-attributter, akkurat som du animerte SVG-attributter. En situasjon hvor animering av en DOM-attributt kan være nyttig er HTML5-fremdriftselementet. Dette elementet har to attributter, verdi og max. I vårt eksempel vil vi animere verdierattributtet for å vise fremdriften i vår filoverføringsprosess. Her er koden for å animere verdi Egenskap.
var animateProgress = anime (mål: 'fremgang', verdi: 100, lettelse: 'lineær');
I denne opplæringen lærte du om alle måtene å velge målelementer i Anime.js og hvordan du animerer forskjellige CSS-egenskaper og attributter knyttet til dem. På dette punktet kontrollerer vi ikke noe som er relatert til selve animasjonen.
JavaScript er uten tvil de språk på nettet. Det er selvfølgelig ikke uten sine lærekurver, og det er mange rammer og biblioteker som holder deg opptatt, som du kan fortelle. Hvis du leter etter flere ressurser for å studere eller bruke i arbeidet ditt, sjekk ut hva vi har tilgjengelig på Envato-markedet.
I neste veiledning av serien, lærer du hvordan du kontrollerer lettelsen, forsinkelsen og varigheten av animasjonen for forskjellige egenskaper som en gruppe, så vel som individuelt. Du vil da lære å kontrollere alle disse animasjonsparametrene for individuelle elementer.
.
