Share
Den tidigare handledningen i serien visade dig hur man animerar olika CSS-egenskaper hos något element med KUTE.js. Kärnmotorn tillåter dig dock inte att animera egenskaper som är specifika för SVG-element. På samma sätt kan du inte animera SVG-morphing av olika banformar eller ritning av olika SVG-element med hjälp av slag. Du måste använda KUTE.js SVG-plugin för att uppnå några av dessa uppgifter.
Innan vi börjar bör du komma ihåg att du måste inkludera både KUTE.js-kärnmotorn och SVG-pluginet för exemplen i denna handledning för att arbeta.
Att förvandla en SVG-form till en annan är en mycket vanlig funktion som du kommer att stöta på. KUTE.js SVG-plugin ger oss allt vi behöver för att skapa egna morphing animeringar med lätthet.
Det finns tre sätt att morph SVG-former använder detta bibliotek:
Accentsconagua
från till() Metod för att ange både den ursprungliga och den sista SVG-sökvägen för ditt element. till() metod och undvik att ange den ursprungliga banan. I detta fall bestäms startvärdet för morphing baserat på värdet av d attribut för det valda elementet som du vill 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: 'Banan till # form-b som en giltig sträng.'); KUTE.to ('# shape-a', path: 'Banan till # form-b som en giltig sträng.');Under initieringen prövar biblioteket några punkter baserat på de vägar vi tillhandahöll. Dessa punkter lagras sedan i två olika arrays. Slutligen används dessa arrays för interpolering. Det finns ett antal alternativ som du kan konfigurera för att styra morphing beteendet för olika vägar.
morphPrecision: Som du kanske har gissat kan du ange precisionen eller noggrannheten för morphing. Det anges som ett tal och ett lägre värde betyder högre precision. Tänk på att högre precision kommer att resultera i mer noggrannhet, men det kommer också att vara skadligt för prestanda. Det här alternativet gäller inte när du hanterar polygonala former eller vägar där d-attributet bara består av h, l, och v. I sådana fall används de ursprungliga polygonbanorna istället för att prova nya.reverseFirstPath: Du kan ange värdet för det här alternativet till Sann för att vända ritstigen för din första form. Standardvärdet är falsk.reverseSecondPath: Du kan ange värdet för det här alternativet till Sann för att vända ritningsvägen för din andra form. Standardvärdet är också falsk.morphIndex: Ibland kan poängen på en väg behöva täcka mycket avstånd under morphing. Du kan styra detta beteende med hjälp av morphIndex parameter. När den här parametern är inställd kan du rotera den sista banan så att alla punkter gör det minsta möjliga avståndet.Låt oss använda det vi hittills har lärt oss för att morph en batteriikon till en bokmärkesikon. Du bör notera att jag har använt små bokstäver l för att ange sökvägen i relativa termer. Detta är den obligatoriska markeringen:
Följande JavaScript skapar tween-objektet och startar animeringen på knappen klicka:
var morphA = KUTE.to ('# battery-a', path: '# bookmark-a', duration: 5000); startButton.addEventListener ("klicka", funktion () morphA.start ();, false);Här är en demo som visar ovanstående kod i åtgärd. Jag har också lagt till ett extra element där morph animeringen sätter reverseFirstPath till Sann. Det här hjälper dig att förstå den övergripande effekten av olika konfigurationsalternativ på morphing. Animationens varaktighet är inställd på 5 sekunder så att du kan observera båda animationerna och upptäcka skillnaderna.
I det föregående exemplet hade huvudvägen inga undervägar. Detta gjorde morphing mycket enkelt. Detta kan dock inte alltid vara fallet.
Låt oss lägga till en extra delväg till vårt bokmärke såväl som batteriikonen. Om du morph ikonerna nu kommer du att se att endast den första subpathen animerar. Den andra subpathen försvinner bara i början av animationen och återkommer i slutet. Det enda sättet att animera alla subpaths i sådana fall är att byta subpaths i enskilda vägar. Här är ett exempel:
En annan populär SVG-relaterad animeringseffekt inkluderar att starta från ingenting och sedan dra en fördefinierad form med SVG-slag. Detta kan användas för att animera ritningen av logotyper eller andra objekt. I det här avsnittet kommer du att lära dig hur du använder KUTE.js för att skapa en strängande animering för ikonen Font Awesome Bicycle icon.
Det finns tre sätt att animera SVG-slag i KUTE.js. Du kan animera från 0% till 100% genom att ställa in från till värden som 0% 0% och 0% 100%. Du kan också dra en del av SVG-formen genom att ställa in värdena till något liknande 0% 5% och 95% 100%. Slutligen kan du ställa slutvärdet till 0% 0% för att skapa en raderingseffekt istället för en teckningseffekt.
Här är JavaScript-koden som jag har använt för att animera vår cykel:
var wholeAnimation = KUTE.fromTo ("#icon", dra: "0% 0%", dra: "0% 100%", varaktighet: 10000); var partialAnimation = KUTE.fromTo ("#icon", dra: "0% 5%", teckna: "95% 100%", varaktighet: 10000); var eraseAnimation = KUTE.fromTo ("#icon", dra: "0% 100%", dra: "0% 0%", varaktighet: 5000);Som du kan se i exemplet nedan behöver du inte oroa sig för flera delbanor i en sökväg. KUTE.js animerar alla dessa subpaths individuellt utan några problem. Animationens varaktighet används för att bestämma tiden för animationen av den längsta vägen. Streckvaraktigheten för resten av delbanorna bestäms sedan baserat på deras längd.
Vi har redan lärt oss hur man animerar CSS-omvandlingsvärden i serieens andra handledning. I pluggen KUTE.js SVG kan du också använda svgTransform attribut för att rotera, översätta, skala eller skråma olika SVG-element på en webbsida.
De rotera attributet accepterar ett enda värde som bestämmer vridningsvinkeln. Som standard sker rotationen runt elementets mittpunkt, men du kan ange ett nytt rotationscentrum med hjälp av transformOrigin attribut.
De Översätt attributet accepterar värdena i formatet översätt: [x, y] eller översätt: x. När det förses med ett enda värde, värdet av y antas vara noll.
När skevelement måste du använda skewX och skewY. Det finns inget stöd för skew [x, y] i SVG. På samma sätt, skala attributet accepterar endast ett värde. Samma värde används för att skala elementen i både x och y riktningar.
Här är en kodbit som gäller alla dessa omvandlingar på en rektangel och en cirkel.
var rotation = KUTE.allTo ("rekt cirkel", svgTransform: rotate: 360, repeat: 1, yoyo: true); var scaling = KUTE.allTo ("rekt cirkel", svgTransform: skala: 1.5, repeat: 1, yoyo: true); var translation = KUTE.allTo ("rekt cirkel", svgTransform: translate: [100, -50], repeat: 1, yoyo: true); var skewing = KUTE.allTo ("rekt cirkel", svgTransform: skewX: 25, repeat: 1, yoyo: true);Jag har satt jojo parameter till Sann så att omvandlingsegenskaperna är inställda efter initialt värde efter att ha spelat animeringen i omvänd ordning. På så sätt kan vi spela upp animationerna om och om igen genom att klicka på knapparna.
Om du trycker på Rotera knappen i demo märker du att det inte verkar ha någon effekt på cirkeln. För att observera cirkelrotationen måste du applicera en snedtransform på den för att ändra dess form och sedan klicka på rotera omedelbart.
Vi började denna handledning genom att täcka grunderna för SVG morphing och stroke animationer. Du lärde dig hur man korrekt formaterar komplexa vägar som har underskridskor och hur vi kan skapa en raderad strokeeffekt istället för en ritning genom att välja rätt värden för dra attribut. Därefter diskuterade vi hur vi kan använda svgTransform attribut för att animera olika omvandlingar.
I olika tutorials har vi sett hur kraftfull JavaScript har blivit. Det är inte utan sina inlärningskurvor, och det finns gott om ramar och bibliotek för att hålla dig upptagen också. Om du letar efter ytterligare resurser att studera eller använda i ditt arbete, kolla vad vi har tillgängligt på Envato Market.
Handledningen var tänkt att presentera dig för alla funktioner i KUTE.js SVG-plugin och hjälpa dig att komma igång snabbt. Du kan lära dig mer om SVG-pluginet genom att läsa dokumentationen.
