Share
Den første opplæringen av serien fokuserte på å gi en nybegynnerlig introduksjon til KUTE.js biblioteket. I den opplæringen animerte vi bare opasitet og rotateZ eiendom for våre elementer. I denne opplæringen lærer du hvordan du animerer resten av CSS-egenskapene ved å bruke KUTE.js.
Noen av disse egenskapene krever at du laster inn CSS-pluginet, mens andre kan animeres ved hjelp av selve kjernemotoren. Begge disse scenariene vil bli diskutert separat i opplæringen.
Kjernen KUTE.js-motoren kan animere bare de vanligste modellene i boksene: bredde, høyde, topp, og venstre. Du må bruke CSS-pluginet for å animere nesten alle andre boksmodellegenskaper. Her er et eksempel som animerer topplasseringen, bredden og høyden av boksene våre fra den forrige veiledningen:
var animateTop = KUTE.allFromTo (theBoxes, top: 0, top: 100, offset: 100); var animateA = KUTE.fromTo (boksA, høyde: 100, høyde: 175); var animateB = KUTE.fromTo (boksB, bredde: 100, bredde: 200);
Du har kanskje lagt merke til at jeg brukte allFromTo () å animere toppegenskapen til alle boksene. Imidlertid brukte jeg fra til() å animere individuelle bokser. Du bør huske at boksene forblir i sin endelige tilstand når animasjonen er fullført.
Med hjelp av CSS-pluginet vil du kunne animere margin, padding, og borderWidth også. Når du har tatt med pluginet i prosjektet, er resten av prosessen akkurat det samme.
Du kan animere nesten alle transformasjonsegenskapene nevnt i spesifikasjonen ved hjelp av selve kjernemotoren. Det er ikke nødvendig å laste inn CSS-pluginet i dette tilfellet.
Du kan animere elementoversettelsen i 2D-rom ved hjelp av oversette. På samme måte kan du bruke translateX, translateY, og translateZ for å animere elementene langs respektive akser. For translateZ Egenskapen har noen effekt, du må også sette en verdi for parentPerspective eiendom. Her er et eksempel:
Accentsconagua
var animateAll = KUTE.allFromTo (theBoxes, translateY: 0, translateY: 100, offset: 1000); var animateA = KUTE.fromTo (boxA, translateZ: 0, translateZ: 50, parentPerspective: 100, parentPerspectiveOrigin: "0% 0%"); var animateB = KUTE.fromTo (boxB, translateX: 0, translateX: -200); startButton.addEventListener ("klikk", funksjon () animateAll.start (); animateA.start (); animateB.start ();, false);Hvis du klikker på Start animasjon knappen og observere animasjonen nøye, vil du se at den røde boksen oversetter -200 i X-retningen først. Deretter flytter den til sin opprinnelige posisjon og begynner å oversette i Y-retningen. Årsaken til boksen for å animere translateX Først er det at vi har lagt til en forsinkelse for translateY animasjon ved hjelp av offset eiendom.
Akkurat som oversettelsen, kan du også utføre rotasjoner langs en bestemt akse ved hjelp av rotere, rotateX, rotateY, og rotateZ eiendommer. Siden rotateX og rotateY er 3D-rotasjoner, må du bruke perspektiv Egenskapen for rotasjonsanimasjonen fungerer som forventet. Følgende eksempel viser hvordan du bruker perspektiv Egenskapen påvirker den generelle animasjonen for disse to egenskapene.
var animateAll = KUTE.allFromTo (theBoxes, rotate: 0, rotate: 360, offset: 1000); var animateA = KUTE.fromTo (boxA, rotateY: 0, rotateY: 180, perspektiv: 100); var animateB = KUTE.fromTo (boxB, rotateY: 0, rotateY: -180); startButton.addEventListener ("klikk", funksjon () animateAll.start (); animateA.start (); animateB.start ();, false);I eksempelet ovenfor starter boks A og boks B sin rotasjon langs Y-aksen samtidig, men den resulterende animasjonen er veldig forskjellig på grunn av perspektiv eiendom. Du har kanskje lagt merke til at oransje boksen ikke utfører rotasjonen rundt sentrum som ble brukt på den ved hjelp av animateAll. Dette skyldes at alle animasjoner har en varighet på 500 millisekunder som standard, og vi søker begge animateAll og animateA på oransje boksen samtidig.
Siden animateA brukes etter animateAll, dets animasjon har forrang over animateAll. Du vil se at den felles rotasjonen bruker animateAll Brukes fortsatt på oransjeboksen når du øker animasjonsvarigheten. Med andre ord kan du ikke animere forskjellige transformasjonsegenskaper ved å bruke flere tweenobjekter samtidig. Alle transformasjonsegenskapene du vil animere, bør spesifiseres i et enkelt tweenobjekt. Følgende eksempel skal gjøre det klart:
// Dette virker ikke som forventet var translateAll = KUTE.allFromTo (theBoxes, translateY: 0, translateY: 100, offset: 1000); var rotateAll = KUTE.allFromTo (theBoxes, rotate: 0, rotate: 360, offset: 1000); startButton.addEventListener ("klikk", funksjon () translateAll.start (); rotateAll.start ();, false); // Dette vil fungere som forventet var rtAll = KUTE.allFromTo (theBoxes, translateY: 0, rotate: 0, translateY: 100, rotate: 360, offset: 1000); startButton.addEventListener ("klikk", funksjon () rtAll.start ();, false);Som nevnt tidligere, kan ikke alle CSS-egenskapene animeres ved hjelp av bare KUTE.js-kjernen. Du må bruke et ekstra CSS-plugin for å animere egenskaper som polstring, margin, bakgrunnsposisjon for bilder og andre grense-relaterte egenskaper. Så, før du prøver noen av eksemplene i denne delen, bør du inkludere pluginet i prosjektet.
Når du har tatt med pluginet, vil du kunne animere border-radius eiendom bruker borderRadius. Du kan også animere hele hjørnet border-radius verdier som brukes individuelt borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, og borderBottomRightRadius. Her er et eksempel som viser animasjonen i aksjon.
Hvis du klikker på Start animasjon knappen, vil du legge merke til at den øverste venstre grenseradiusen for den røde og gule boksen er animert etter en forsinkelse. Dette er på grunn av offset eiendom. Resten av radien er animert så snart vi klikker på knappen. Eksemplet ovenfor ble opprettet ved å bruke følgende kode:
var animateAll = KUTE.allFromTo (theBoxes, borderTopLeftRadius: '0%', borderTopLeftRadius: '100%', offset: 1000); var animateA = KUTE.fromTo (boxA, borderTopRightRadius: '0%', borderTopRightRadius: '100%'); var animateB = KUTE.fromTo (boxB, borderBottomLeftRadius: '0%', borderBottomLeftRadius: '100%'); var animateC = KUTE.fromTo (boxC, borderBottomRightRadius: '0%', borderBottomRightRadius: '100%'); startButton.addEventListener ("klikk", funksjon () animateAll.start (); animateA.start (); animateB.start (); animateC.start ();, false);Vi har ikke festet tweenobjektene sammen, så alle animasjonene starter med en gang denne gangen. Du kan også animere fargen på forskjellige grenser på en lignende måte med grensefarge, borderTopColor, borderLeftColor, borderBottomColor, og borderRightColor.
I denne opplæringen lærte vi om forskjellige CSS egenskaper som kan animeres med og uten bruk av KUTE.js CSS plugin. Hvis du har spørsmål, vennligst gi meg beskjed i kommentarene.
Den neste opplæringen vil dekke forskjellige animasjoner som kan opprettes ved hjelp av KUTE.js SVG-plugin.
