Share
Den forrige opplæringen av serien viste deg hvordan du animerer forskjellige CSS-egenskaper til ethvert element ved hjelp av KUTE.js. Kjernemotoren tillater deg imidlertid ikke å animere egenskaper som er spesifikke for SVG-elementer. På samme måte kan du ikke animere SVG-morphing av forskjellige baneformer eller tegning av forskjellige SVG-elementer ved hjelp av slag. Du må bruke KUTE.js SVG plugin for å oppnå noen av disse oppgavene.
Før vi begynner, husk at du må inkludere både KUTE.js-kjernemotoren og SVG-pluginet for eksemplene i denne opplæringen til arbeid.
Å overføre en SVG-form til en annen er en svært vanlig funksjon som du vil komme over. KUTE.js SVG plugin gir oss alt vi trenger for å lage våre egne morphing animasjoner med letthet.
Det er tre måter å morph SVG former ved hjelp av dette biblioteket:
Accentsconagua
fra til() Metode for å spesifisere både den opprinnelige og den endelige SVG-banen for elementet ditt. til() metode og unngå å angi startveien. I dette tilfellet vil startverdien for morphing bestemmes ut fra verdien av d attributt for det valgte elementet du vil morph. KUTE.fromTo ('# shape-a', path: '# shape-a', path: '# shape-b'); KUTE.to ('# shape-a', path: '# shape-b'); KUTE.fromTo ('# shape-a', path: '# shape-a', path: 'Banen til # form-b som en gyldig streng.'); KUTE.to ('# shape-a', path: 'Banen til # form-b som en gyldig streng.');Under initialiseringen prøver biblioteket noen punkter basert på stiene som vi oppgav. Disse punktene lagres da i to forskjellige arrays. Til slutt brukes disse arraysene for interpolering. Det finnes en rekke alternativer som du kan konfigurere for å kontrollere morphing-oppførselen for forskjellige baner.
morphPrecision: Som du kanskje har gjettet, lar dette alternativet angi nøyaktigheten eller nøyaktigheten til morphing. Det er angitt som et tall, og en lavere verdi betyr høyere presisjon. Husk at høyere presisjon vil resultere i mer nøyaktighet, men det vil også være skadelig for ytelsen. Dette alternativet gjelder ikke når du har å gjøre med polygonale former eller stier der d-attributtet består av bare h, l, og v. I slike tilfeller brukes de originale polygonbanene i stedet for å prøve nye.reverseFirstPath: Du kan angi verdien av dette alternativet til ekte for å reversere tegnebanen for din første form. Standardverdien er falsk.reverseSecondPath: Du kan angi verdien av dette alternativet til ekte for å reversere tegningsbanen for den andre figuren. Standardverdien er også falsk.morphIndex: Noen ganger kan punktene på en bane måtte dekke mye avstand under morphing. Du kan kontrollere denne oppførselen ved hjelp av morphIndex parameter. Når denne parameteren er angitt, kan du rotere den endelige banen slik at alle punktene kjører minst mulig avstand.La oss bruke det vi har lært så langt for å morph et batteriikon i et bokmerkeikon. Du bør merke at jeg har brukt små bokstaver l for å spesifisere banen i relative termer. Dette er påkrevd markering:
Følgende JavaScript oppretter tween-objektet og starter animasjonen på knappen, klikk:
var morphA = KUTE.to ('# batteri-a', bane: '# bokmerke-a', varighet: 5000); startButton.addEventListener ("klikk", funksjon () morphA.start ();, false);Her er en demonstrasjon som viser den ovennevnte koden i aksjon. Jeg har også lagt til et ekstra element der morph animasjonen setter reverseFirstPath til ekte. Dette vil hjelpe deg å forstå den samlede effekten av forskjellige konfigurasjonsalternativer på morphing. Animasjonsvarigheten er satt til 5 sekunder, slik at du nøye kan observere begge animasjonene og oppdage forskjellene.
I det forrige eksempelet hadde hovedbanen ingen underruter. Dette gjorde morphing veldig grei. Dette kan imidlertid ikke alltid være tilfelle.
La oss legge til en ekstra undervei til bokmerket vårt samt batteriikonet. Hvis du morph ikonene nå, vil du se at bare den første subpathen animerer. Den andre delveien forsvinner bare i begynnelsen av animasjonen og vises på slutten. Den eneste måten å animere alle underruter i slike tilfeller er, er å endre underruter i individuelle stier. Her er et eksempel:
En annen populær SVG-relatert animasjonseffekt inkluderer å starte fra ingenting og deretter tegne en forhåndsdefinert form ved hjelp av SVG-slag. Dette kan brukes til å animere tegningen av logoer eller andre objekter. I denne delen lærer du hvordan du bruker KUTE.js for å lage en strekk animasjon for ikonet Font Awesome sykkel.
Det er tre måter å animere SVG-slag i KUTE.js. Du kan animere fra 0% til 100% ved å sette inn fra til verdier som 0% 0% og 0% 100%. Du kan også tegne en del av SVG-formen ved å sette verdiene til noe som 0% 5% og 95% 100%. Til slutt kan du sette sluttverdien til 0% 0% for å skape en slettende effekt i stedet for en tegningseffekt.
Her er JavaScript-koden jeg har brukt til å animere sykkelen vår:
var wholeAnimation = KUTE.fromTo ("#icon", draw: "0% 0%", tegne: "0% 100%", varighet: 10000); var partialAnimation = KUTE.fromTo ("#icon", draw: "0% 5%", tegne: "95% 100%", varighet: 10000); var eraseAnimation = KUTE.fromTo ("#icon", draw: "0% 100%", tegne: "0% 0%", varighet: 5000);Som du kan se i eksemplet nedenfor, trenger du ikke å bekymre deg for flere underruter i en bane. KUTE.js animerer alle disse underruter individuelt uten problemer. Animasjonsvarigheten brukes til å bestemme tidspunktet for animasjonen til den lengste banen. Berøringsvarigheten for resten av underveiene bestemmes da basert på lengden.
Vi har allerede lært hvordan å animere CSS-transformasjonsverdier i den andre opplæringen av serien. KUTE.js SVG plugin lar deg også bruke svgTransform attributt for å rotere, oversette, skala eller skrå forskjellige SVG-elementer på en nettside.
De rotere Attributt aksepterer en enkelt verdi som bestemmer rotasjonsvinkelen. Som standard skjer rotasjonen rundt midtpunktet til elementet, men du kan angi et nytt rotasjonsrotasjon ved hjelp av transformOrigin Egenskap.
De oversette Attributt aksepterer verdiene i formatet oversette: [x, y] eller oversette: x. Når den leveres med en enkelt verdi, er verdien av y antas å være null.
Når skilleelementer, må du bruke skewX og skewY. Det er ingen støtte for skrå [x, y] i SVG. På samme måte, skala Attributt aksepterer bare én verdi. Den samme verdien brukes til å skalere elementene i både x og y retninger.
Her er en kodebit som gjelder alle disse transformasjonene på et rektangel og en sirkel.
var rotasjon = KUTE.allTo ("rekt, sirkel", svgTransform: rotate: 360, repeat: 1, yoyo: true); var scaling = KUTE.allTo ("rekt, sirkel", svgTransform: skala: 1,5, gjenta: 1, yoyo: true); var translation = KUTE.allTo ("rekt, sirkel", svgTransform: translate: [100, -50], gjenta: 1, yoyo: true); var skewing = KUTE.allTo ("rekt, sirkel", svgTransform: skewX: 25, repeat: 1, yoyo: true);Jeg har satt yoyo parameter til ekte slik at etter å ha spilt animasjonen i revers, er transformasjonsegenskapene satt til deres opprinnelige verdi. På denne måten kan vi spille animasjonene igjen og igjen ved å klikke på knappene.
Hvis du trykker på Rotere knappen i demoen, vil du legge merke til at det ikke ser ut til å ha noen effekt på sirkelen. For å observere rotasjonen av sirkelen, må du bruke en skråtransform på den for å endre form og deretter klikke på roter umiddelbart.
Vi begynte denne opplæringen ved å dekke grunnleggende om SVG morphing og stroke animasjoner. Du lærte hvordan du skal formidle komplekse veier som har underliggende veier, og hvordan vi kan lage en slettestrek-effekt i stedet for en tegning en ved å velge de riktige verdiene for tegne Egenskap. Etter det diskutert vi hvordan vi kan bruke svgTransform attributt for å animere forskjellige transformasjoner.
I ulike opplæringsprogrammer har vi sett hvor kraftig JavaScript har blitt. Det er ikke uten sine lærekurver, og det er nok av 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.
Opplæringen var ment å introdusere deg til alle funksjonene i KUTE.js SVG-pluginet og hjelpe deg med å komme i gang raskt. Du kan lære mer om SVG-pluginet ved å lese dokumentasjonen.
