Share
De vorige zelfstudie van de serie liet zien hoe je verschillende CSS-eigenschappen van elk element kunt animeren met behulp van KUTE.js. Met de kernengine kunt u echter geen eigenschappen animeren die specifiek zijn voor SVG-elementen. Op dezelfde manier kunt u de SVG-morphing van verschillende padvormen of de tekening van verschillende SVG-elementen niet animeren met behulp van streken. U moet de KUTE.js SVG-plug-in gebruiken om een van deze taken te realiseren.
Voordat we beginnen, moet u er rekening mee houden dat u zowel de KUTE.js-kernengine als de SVG-plug-in voor de voorbeelden in deze zelfstudie moet gebruiken om te werken.
De ene SVG-vorm in de andere omzetten is een veel voorkomende functie die u tegen zult komen. De KUTE.js SVG-plug-in geeft ons alles wat we nodig hebben om met gemak onze eigen morphing-animaties te maken.
Er zijn drie manieren om SVG-vormen te morphen met behulp van deze bibliotheek:
Accentsconagua
van naar() methode om zowel het initiële als het laatste SVG-pad voor uw element op te geven. naar() methode en vermijd het opgeven van het initiële pad. In dit geval zal de startwaarde voor de morphing worden bepaald op basis van de waarde van de d attribuut van het geselecteerde element dat u wilt morphen. 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: 'Het pad van # shape-b als een geldige string.'); KUTE.to ('# shape-a', path: 'Het pad van # shape-b als een geldige string.');Tijdens de initialisatie samplet de bibliotheek enkele punten op basis van de paden die we hebben aangeleverd. Deze punten worden vervolgens opgeslagen in twee verschillende arrays. Ten slotte worden deze matrices gebruikt voor de interpolatie. Er zijn een aantal opties die u kunt configureren om het morphing-gedrag voor verschillende paden te regelen.
morphPrecision: Zoals u misschien al geraden had, kunt u met deze optie de nauwkeurigheid of nauwkeurigheid van de morphing specificeren. Het wordt gespecificeerd als een getal en een lagere waarde betekent hogere precisie. Houd er rekening mee dat hogere precisie zal resulteren in meer nauwkeurigheid, maar het zal ook schadelijk zijn voor de prestaties. Deze optie is niet van toepassing wanneer u te maken hebt met veelhoekige vormen of paden waarbij het kenmerk d alleen bestaat uit h, l, en v. In dergelijke gevallen worden de oorspronkelijke polygoonpaden gebruikt in plaats van nieuwe te analyseren.reverseFirstPath: U kunt de waarde van deze optie instellen op waar om het tekenpad voor uw eerste vorm om te keren. De standaardwaarde is vals.reverseSecondPath: U kunt de waarde van deze optie instellen op waar om het tekenpad voor uw tweede vorm om te keren. De standaardwaarde is ook vals.morphIndex: Soms moeten de punten op een pad veel afstand overbruggen tijdens het morphen. U kunt dit gedrag beheren met behulp van de morphIndex parameter. Indien opgegeven, kunt u met deze parameter het laatste pad zo roteren dat alle punten zo min mogelijk afleggen.Laten we gebruiken wat we tot nu toe hebben geleerd om een batterijpictogram in een bladwijzersymbool te veranderen. Houd er rekening mee dat ik kleine letters heb gebruikt l om het pad in relatieve termen op te geven. Dit is de vereiste markup:
Het volgende JavaScript maakt het tween-object en start de animatie met klikken op de knop:
var morphA = KUTE.to ('# battery-a', path: '# bookmark-a', duration: 5000); startButton.addEventListener ("klik", functie () morphA.start ();, false);Hier is een demo die de bovenstaande code in actie toont. Ik heb ook een extra element toegevoegd waar de morph-animatie instelt reverseFirstPath naar waar. Dit zal u helpen de algemene impact van verschillende configuratieopties op de morphing te begrijpen. De animatieduur is ingesteld op 5 seconden, zodat u beide animaties van dichtbij kunt bekijken en de verschillen kunt opmerken.
In het vorige voorbeeld had het hoofdpad geen subpaden. Dit maakte de morphing zeer eenvoudig. Dit is echter niet altijd het geval.
Laten we een extra subpad toevoegen aan onze bladwijzer, evenals het batterijpictogram. Als u nu de pictogrammen mororf, ziet u dat alleen het eerste subpad animeert. Het tweede subpad verdwijnt net aan het begin van de animatie en verschijnt aan het einde opnieuw. De enige manier om alle subpaden in dergelijke gevallen te animeren, is door de subpaden in afzonderlijke paden te wijzigen. Hier is een voorbeeld:
Een ander populair SVG-gerelateerd animatie-effect bestaat uit het starten van het niets en vervolgens een voorgedefinieerde vorm tekenen met behulp van SVG-streken. Dit kan worden gebruikt om de tekening van logo's of andere objecten te animeren. In deze sectie leert u hoe u KUTE.js kunt gebruiken om een streekanimatie te maken voor het fietstoonpictogram van Font Awesome.
Er zijn drie manieren om SVG-slagen te animeren in KUTE.js. U kunt animeren van 0% tot 100% door de van naar waarden als 0% 0% en 0% 100%. U kunt ook een deel van de SVG-vorm tekenen door de waarden ergens op te zetten 0% 5% en 95% 100%. Ten slotte kunt u de eindwaarde instellen op 0% 0% om een wiseffect in plaats van een tekeningeffect te maken.
Hier is de JavaScript-code die ik heb gebruikt om onze fiets te animeren:
var wholeAnimation = KUTE.fromTo ("#icon", draw: "0% 0%", draw: "0% 100%", duration: 10000); var partialAnimation = KUTE.fromTo ("#icon", draw: "0% 5%", draw: "95% 100%", duration: 10000); var eraseAnimation = KUTE.fromTo ("#icon", draw: "0% 100%", draw: "0% 0%", duration: 5000);Zoals u in het onderstaande voorbeeld kunt zien, hoeft u zich geen zorgen te maken over meerdere subpaden binnen een pad. KUTE.js animeert al deze subpaden afzonderlijk zonder problemen. De animatieduur wordt gebruikt om de tijd te bepalen voor de animatie van het langste pad. De slagduur voor de rest van de subpaden wordt vervolgens bepaald op basis van hun lengte.
We hebben al geleerd CSS-transformatiewaarden te animeren in de tweede zelfstudie van de serie. Met de KUTE.js SVG-plug-in kunt u ook de svgTransform attribuut om verschillende SVG-elementen op een webpagina te roteren, vertalen, schalen of scheeftrekken.
De draaien attribuut accepteert een enkele waarde die de rotatiehoek bepaalt. Standaard vindt de rotatie plaats rond het middelpunt van het element, maar u kunt een nieuw rotatiepunt opgeven met behulp van de transformOrigin attribuut.
De vertalen attribuut accepteert de waarden in het formaat vertalen: [x, y] of vertalen: x. Indien geleverd met een enkele waarde, de waarde van Y wordt verondersteld nul te zijn.
Als je elementen verschuift, moet je gebruiken skewX en skewY. Er is geen ondersteuning voor scheef [x, y] in SVG. Evenzo is de schaal attribuut accepteert ook maar één waarde. Dezelfde waarde wordt gebruikt om de elementen in zowel de x- als de y-richting te schalen.
Hier is een codefragment dat al deze transformaties op een rechthoek en een cirkel toepast.
var rotatie = KUTE.allTo ("rect, circle", svgTransform: rotate: 360, repeat: 1, yoyo: true); var scaling = KUTE.allTo ("rect, circle", svgTransform: scale: 1.5, repeat: 1, yoyo: true); var translation = KUTE.allTo ("rect, circle", svgTransform: translate: [100, -50], repeat: 1, yoyo: true); var skewing = KUTE.allTo ("rect, circle", svgTransform: skewX: 25, repeat: 1, yoyo: true);Ik heb de yoyo parameter naar waar zodat na het in omgekeerde volgorde afspelen van de animatie de transformatie-eigenschappen op hun oorspronkelijke waarde worden ingesteld. Op deze manier kunnen we de animaties opnieuw en opnieuw afspelen door op de knoppen te klikken.
Als u op drukt Draaien knop in de demo, zult u merken dat het geen enkel effect op de cirkel lijkt te hebben. Om de rotatie van de cirkel te observeren, moet je een scheve transformatie erop toepassen om de vorm ervan te wijzigen en klik je vervolgens direct op draaien.
We begonnen deze tutorial met de basisprincipes van SVG-morphing en lijnanimaties. U hebt geleerd complexe paden met subpaden correct te wijzigen en hoe we een wistaseffect in plaats van een tekening kunnen maken door de juiste waarden voor de trek attribuut. Daarna hebben we besproken hoe we het kunnen gebruiken svgTransform attribuut om verschillende transformaties te animeren.
In verschillende zelfstudies hebben we gezien hoe krachtig JavaScript is geworden. Het is niet zonder zijn leercurven, en er zijn ook genoeg kaders en bibliotheken om je bezig te houden. Als u op zoek bent naar extra middelen om te studeren of om te gebruiken in uw werk, kijk dan wat we op Envato Market beschikbaar hebben.
De tutorial was bedoeld om je kennis te laten maken met alle functies van de KUTE.js SVG-plug-in en je snel aan de slag te helpen. U kunt meer lezen over de SVG-plug-in door de documentatie te lezen.
