Share
Mange nettsteder bruker nå en slags animasjon for å gjøre landingssidene mer tiltalende. Heldigvis er det mange biblioteker som lar deg animere elementer på en nettside uten å gjøre alt fra grunnen til. I denne opplæringen lærer du om et slikt bibliotek som heter mojs.
Biblioteket er veldig enkelt å bruke på grunn av sin enkle deklarative API. Animasjonene du kan lage med mojs vil alle være glatte og netthinnen klar slik at alt ser profesjonelt ut.
Det er mange måter å inkludere mojs på i prosjektene dine. Du kan hente biblioteket fra sitt GitHub-depot. Alternativt kan du direkte inkludere en kobling til den nyeste versjonen av biblioteket fra forskjellige CDN-er i prosjektet ditt.
Utviklere kan også installere mojs ved hjelp av pakkeforvaltere som npm og bower ved å kjøre følgende kommando:
installer mo-js bower install mojs
Når du har tatt med biblioteket i prosjektet, kan du begynne å bruke forskjellige moduler for å skape interessante animasjoner.
Denne opplæringen vil fokusere på HTML-modulen i mojs-biblioteket. Denne modulen kan brukes til å animere forskjellige HTML-elementer på nettsiden.
Det første du må gjøre for å animere et DOM-element, er å lage en mojs html gjenstand. Du kan angi velgeren til et element og dets egenskaper som du vil animere inne i dette objektet.
Angir en verdi for el lar deg identifisere elementet som du vil animere ved hjelp av mojs. Du kan enten angi verdien som en velger eller en DOM-node.
HTML-modulen har noen forhåndsdefinerte attributter som kan brukes til å animere forskjellige transformasjonsrelaterte egenskaper til et DOM-element. For eksempel kan du kontrollere oversettelsesanimasjonen av et element langs x-, y- og z-aksene ved å angi start- og sluttverdier for x, y og z eiendommer. Du kan også rotere et element langs forskjellige akser ved å bruke angleX, Angley og angleZ eiendommer. Dette ligner det tilsvarende rotateX (), rotateY () og rotateZ () transformerer i CSS. Du kan også skjære et element langs X- eller Y-aksen ved hjelp av skewX og skewY eiendommer.
Det er like enkelt å bruke skaleringsanimasjoner på forskjellige elementer. Hvis du vil skalere et element i begge retninger, må du bare angi en verdi for skala eiendom. På samme måte kan du animere skaleringen av elementer langs forskjellige akser ved å sette passende verdier for scaleX og Scaley eiendommer.
Foruten alle disse egenskapene som lar deg angi animasjonens innledende og endelige verdier, er det noen andre egenskaper som styrer animasjonsavspillingen. Du kan angi lengden på animasjonen ved hjelp av varighet eiendom. Den oppgitte verdien trenger et tall, og det vil angi animasjonsvarigheten i millisekunder. Hvis du vil starte en animasjon etter noen forsinkelser, kan du angi forsinkelsesverdien ved hjelp av utsette eiendom. Akkurat som varighet, utsette forventer også at verdien til å være et tall.
Animasjoner kan gjentas mer enn en gang ved hjelp av gjenta eiendom. Standardverdien er null, noe som betyr at animasjonen bare spilles en gang. Hvis du stiller det til 1, spiller animasjonen to ganger, og innstillingen til 2 vil spille animasjonen tre ganger. Når animasjonen har fullført sin første iterasjon, går elementet tilbake til sin opprinnelige tilstand og begynner å animere igjen (hvis du har angitt en verdi for gjenta eiendom). Dette plutselige hoppet fra den endelige staten til den innledende staten er kanskje ikke ønskelig i alle tilfeller.
Hvis du vil at animasjonen skal spille bakover når den har nådd sluttstaten, kan du angi verdien av isYoyo eiendom til ekte. Den er satt til falsk som standard. Til slutt kan du angi hastigheten som animasjonen skal spilles ved hjelp av hastighet eiendom. Standardverdien er 1. Innstillingen til 2 vil spille animasjonen to ganger så fort. Tilsvarende vil innstillingen til 0,5 spille animasjonen ved halv hastighet.
The mojs html Objekter du opprettet vil ikke animere de respektive elementene av seg selv. Du må ringe spille() metode på hver mojs html animasjon som du vil spille. Her er et eksempel som animerer tre forskjellige bokser med alle egenskapene vi nettopp diskuterte:
Accentsconagua
var htmlA = ny mojs.Html (el: ".a", x: 0: 400, vinkelZ: 0: 720, varighet: 1000, gjenta: 4, erYoyo: true); var htmlB = ny mojs.Html (el: ".b", x: 400: 0, vinkelY: 0: 360, vinkelZ: 0: 720, varighet: 1000, gjenta: 4); var htmlC = nye mojs.Html (el: ".c", x: 0: 400, vinkelY: 0: 360, skalaZ: 1: 2, skewX: 0: 30, varighet: 1000, gjenta: 4, erYoyo: true); document.querySelector ("play"). addEventListener ("klikk", funksjon () htmlA.play (); htmlB.play (); htmlC.play ();); Du er ikke begrenset til å bare animere transformasjonsegenskapene til et element. Mojs animasjon biblioteket lar deg animere alle andre animerte CSS egenskaper også. Du må bare sørge for at du gir gyldige innledende og endelige verdier for dem. For eksempel kan du animere bakgrunnsfargen til et element ved å angi gyldige verdier for bakgrunn.
Hvis CSS-egenskapen du vil animere inneholder en bindestrek, kan du fjerne bindestrek og konvertere eiendomsnavnet til Camelcase når du stiller innledende og endelige verdier inne i mojsene html gjenstand. Dette betyr at du kan animere border-radius ved å sette en gyldig verdi for borderRadius eiendom. Følgende eksempel skal gjøre alt klart:
var htmlA = nye mojs.Html (el: ".a", x: 0: 400, vinkelZ: 0: 360, bakgrunn: rød: 'svart', borderWidth: 10:20 borderColor: 'black': 'red', borderRadius: 0: '50% ', varighet: 2000, gjenta: 4, erYoyo: true); document.querySelector (". play"). addEventListener ("klikk", funksjon () htmlA.play ();); I eksempelet ovenfor endres grensefarge fra svart til rødt mens grenseradien animerer fra 0 til 50%. Du bør merke seg at et enhetløst tall vil bli vurdert som en pikselverdi, mens et tall med enheter skal angis som en streng som '50% '.
Så langt har vi brukt et enkelt sett med tween egenskaper for å kontrollere avspillingen av forskjellige animasjoner. Dette betydde at et element ville ta samme tid å flytte fra x: 0 til x: 200 som det vil ta å skalere fra skala: 1 til skala: 2.
Dette kan ikke være en ønskelig oppførsel som du kanskje vil utsette animasjonen av noen egenskaper og kontrollere deres varighet også. I slike tilfeller kan du angi animasjonsavspillingsparametrene for hver egenskap inne i selve objektobjektet.
var htmlA = ny mojs.Html (el: ".a", x: 0: 400, varighet: 1000, gjenta: 8, isYoyo: true, angleY: 0: 360, forsinkelse: 500, varighet: 1000 , gjenta: 4, isYoyo: true, angleZ: 0: 720, forsinkelse: 1000, varighet: 1000, gjenta: 4, erYoyo: true); document.querySelector (". play"). addEventListener ("klikk", funksjon () htmlA.play ();); Hver animasjon du oppretter vil ha sin.out lettelse ble brukt som standard. Hvis du vil at animasjonsavspillingen skal gå videre med en annen lettelsefunksjon, kan du spesifisere verdien ved hjelp av lettelser eiendom. Som standard er verdien angitt for lettelser brukes også når animasjonen spilles bakover. Hvis du vil bruke en annen lettelse for bakover animasjoner, kan du angi en verdi for backwardEasing eiendom.
Mojs-biblioteket har 11 forskjellige innebygde lettingsfunksjoner. Disse er lineær, letthet, synd, quad, kubikk, Quart, quint, expo, circ, tilbake, og elastisk. Den lineære lettelsen har bare en variant som heter linear.none. Dette gir mening fordi animasjonen vil utvikle seg med samme hastighet på forskjellige stadier. Alle andre lettelsefunksjoner har tre forskjellige variasjoner i, ute og inout vedlagt på slutten.
Det er to metoder for å angi lette funksjonen for en animasjon. Du kan enten bruke en streng som elastic.in eller du kan få tilgang til lette funksjonene direkte ved hjelp av mojs.easing objekt som mojs.easing.elastic.inout. I den innebygde CodePen-demoen har jeg brukt forskjellige lettelsefunksjoner på hver stolpe, slik at bredden vil endre seg i et annet tempo. Dette gir deg en ide om hvordan animasjonshastigheten er forskjellig med hver enkelt lettelse.
var allBoxes = document.querySelectorAll (".box"); var animasjoner = nytt Array (); var easings = ['ease.in', 'sin.in', 'quad.in', 'cubic.in', 'quart.in', 'quint.in', 'expo.in', 'circ.in ',' back.in ',' elastic.in ']; allBoxes.forEach (funksjon (boks, indeks) var animation = new mojs.Html (el: boks, bredde: 0: 550, varighet: 4000, gjenta: 8, isYoyo: true, easing: easings [index] ); animations.push (animasjon);); document.querySelector ("play"). addEventListener ("klikk", funksjon () animations.forEach (funksjon (anim) anim.play (););); Siden vi bare ønsker å endre lettelsefunksjonen som er brukt på hver boks, har jeg opprettet en løkke for å iterere over dem og deretter bruke en lettelsefunksjon hentet fra easing array. Dette forhindrer unødvendig duplisering av kodene. Du kan bruke samme teknikk til å animere flere elementer der eiendomsverdiene varierer ut fra et mønster.
Mojs gir mange metoder som tillater oss å kontrollere animasjonsavspillingen for forskjellige elementer når den allerede har startet. Du kan når som helst stoppe animasjonen ved å ringe pause() metode. På samme måte kan du gjenoppta en animert animasjon ved å ringe gjenoppta() metode.
Animasjoner som har blitt stoppet med pause() vil alltid fortsette fra det punktet du ringte til pause(). Hvis du vil at animasjonen skal starte fra begynnelsen etter at den er satt på pause, bør du bruke Stoppe() metode istedenfor.
Du kan også spille animasjonen bakover ved hjelp av playBackward () metode. Tidligere brukte vi hastighet eiendom for å kontrollere hastigheten som mojs spilte en animasjon på. Mojs har også a setSpeed () metode som kan angi animasjonshastigheten mens den fortsatt er i gang. I det følgende eksemplet har jeg brukt alle disse metodene til å kontrollere animasjonsavspillingen basert på knappeklikk.
var hastighet = 1; var htmlA = nye mojs.Html (el: ".a", angleZ: 0: 720, borderRadius: 0: '50% ', borderWidth: 10: 100, varighet: 2000, gjenta: 9999 , erYoyo: true); document.querySelector (". play"). addEventListener ("klikk", funksjon () htmlA.play ();); document.querySelector ("pause"). addEventListener ("klikk", funksjon () htmlA.pause ();); document.querySelector (". stop"). addEventListener ("klikk", funksjon () htmlA.stop ();); document.querySelector (". faster"). addEventListener ("klikk", funksjon () speed = speed + 1; htmlA.setSpeed (hastighet); document.querySelector (".data"). innerHTML = "Hastighet:" + hastighet; ); document.querySelector ("slowing"). addEventListener ("klikk", funksjon () speed = speed / 2; htmlA.setSpeed (speed); document.querySelector (".data"). innerHTML = "Hastighet:" + hastighet; ); I den følgende demonstrasjonen vises den gjeldende animasjonsavspillingshastigheten i den svarte boksen nederst i venstre hjørne. Klikk på Raskere vil øke gjeldende hastighet med 1, og klikke på Langsommere vil halvere gjeldende hastighet.
I denne veiledningen lærte vi å animere forskjellige DOM-elementer på en nettside ved hjelp av HTML-modulen i mojs. Vi kan spesifisere elementet vi ønsker å animere ved hjelp av enten en väljare eller en DOM-node. Biblioteket lar deg animere forskjellige transformasjonsegenskaper og opaktheten til ethvert element ved hjelp av de innebygde egenskapene til mojsene html gjenstand. Du kan imidlertid også animere andre CSS-egenskaper ved å spesifisere navnet ved hjelp av Camelcase notasjon.
JavaScript er ikke uten sine lærekurver, og det er mange rammer og biblioteker for å holde deg opptatt også. Hvis du leter etter flere ressurser for å studere eller bruke i arbeidet ditt, sjekk ut hva vi har tilgjengelig på Envato Market.
Gi meg beskjed om det er noe du vil at jeg skal klargjøre i denne opplæringen. Vi vil dekke Form-modulen fra mojs-biblioteket i neste opplæring.
