Share
Tutorialul precedent al seriei va arata cum sa animati diferite proprietati CSS ale oricarui element folosind KUTE.js. Cu toate acestea, motorul de bază nu vă permite să animați proprietăți care sunt specifice elementelor SVG. În mod similar, nu puteți anima morfingul SVG al diferitelor forme de traseu sau desenarea diferitelor elemente SVG utilizând lovituri. Va trebui să utilizați pluginul KUTE.js SVG pentru a realiza oricare dintre aceste sarcini.
Înainte de a începe, rețineți că va trebui să includeți atât motorul de bază KUTE.js cât și pluginul SVG pentru exemplele din acest tutorial pentru a lucra.
Morfingul unei forme SVG în alta este o caracteristică foarte comună pe care o veți întâlni. Pluginul KUTE.js SVG ne oferă tot ceea ce avem nevoie pentru a crea cu ușurință propriile animații morfing.
Există trei moduri de a modela forme SVG folosind această bibliotecă:
Accentsconagua
de la catre() pentru a specifica atât calea SVG inițială, cât și cea finală pentru elementul dvs.. la() și evită specificarea căii inițiale. În acest caz, valoarea de pornire pentru morfing va fi determinată pe baza valorii d atributul elementului selectat pe care doriți să îl modificați. KUTE.fromTo ('# formă-a', cale: '# formă-a', cale: '# shape-b'); KUTE.to ('# formă-a', cale: '# shape-b'); KUTE.fromTo ('# shape-a', path: '# shape-a', path: 'Calea lui # shape-b ca șir valabil.'); KUTE.to ('# shape-a', path: 'Calea lui # shape-b ca șir valabil.');În timpul inițializării, biblioteca eșantionează câteva puncte pe baza căilor pe care le-am furnizat. Aceste puncte sunt apoi stocate în două tablouri diferite. În cele din urmă, aceste tablouri sunt folosite pentru interpolare. Există o serie de opțiuni pe care le puteți configura pentru a controla comportamentul morfing pentru diferite căi.
morphPrecision: După cum probabil ați ghicit, această opțiune vă permite să specificați precizia sau precizia morfingului. Este specificat ca număr, iar o valoare mai mică înseamnă o precizie mai mare. Rețineți că o precizie mai mare va duce la o mai mare acuratețe, dar va fi, de asemenea, în detrimentul performanței. Această opțiune nu se aplică atunci când aveți de-a face cu forme sau căi poligonale în care atributul d constă numai din h, L, și v. În astfel de cazuri, căile originale de poligon sunt folosite în loc să preiau probe noi.reverseFirstPath: Puteți seta valoarea acestei opțiuni Adevărat pentru a inversa traseul de trasare pentru prima dvs. formă. Valoarea implicită este fals.reverseSecondPath: Puteți seta valoarea acestei opțiuni Adevărat pentru a inversa traseul de desen pentru cea de-a doua forma. Valoarea implicită este de asemenea fals.morphIndex: Uneori, punctele de pe o cale ar putea să acopere o mare distanță în timpul morfingului. Puteți controla acest comportament folosind morphIndex parametru. Când este specificat, acest parametru vă permite să rotiți calea finală astfel încât toate punctele să circule cât mai puțin posibil.Să folosim ceea ce am învățat până acum pentru a transforma o pictogramă a bateriei într-o pictogramă de marcaj. Trebuie să rețineți că am folosit litere mici L pentru a specifica calea în termeni relativi. Acesta este marcajul necesar:
Următorul cod JavaScript creează obiectul tween și pornește clic pe butonul de animație:
var morphA = KUTE.to ('# baterie-a', cale: '# bookmark-a', duration: 5000); startButton.addEventListener ("clic", funcția () morphA.start ();, false);Iată un demo care arată codul de mai sus în acțiune. Am adăugat, de asemenea, un element suplimentar în care se fixează animația morph reverseFirstPath la Adevărat. Acest lucru vă va ajuta să înțelegeți impactul general al diferitelor opțiuni de configurare asupra morfingului. Durata de animație a fost setată la 5 secunde, astfel încât să puteți observa îndeaproape ambele animații și să vedeți diferențele.
În exemplul precedent, calea principală nu avea subpagini. Acest lucru a făcut ca morfingul să fie foarte simplu. Cu toate acestea, acest lucru s-ar putea să nu fie întotdeauna cazul.
Să adăugăm un subpath suplimentar la marcajele noastre, precum și pictograma bateriei. Dacă transformi acum icoanele, vei vedea că numai primul subteror animă. Cea de-a doua etapă dispare doar la începutul animației și reapare la sfârșit. Singura modalitate de a anima toate subpaths în astfel de cazuri este prin schimbarea subpaths în căi individuale. Iată un exemplu:
Un alt efect popular de animație legat de SVG include pornirea din nimic și apoi desenarea unei forme predefinite folosind curse SVG. Acest lucru poate fi folosit pentru a anima desenul de logo-uri sau alte obiecte. În această secțiune, veți învăța cum să utilizați KUTE.js pentru a crea o animație de derulare pentru pictograma bicicletei Font Awesome.
Există trei moduri de a anima accidentele SVG în KUTE.js. Puteți să animați de la 0% la 100% prin setarea de la catre valori ca 0% 0% și 0% 100%. De asemenea, puteți desena o parte a formei SVG prin setarea valorilor la ceva asemănător 0% 5% și 95% 100%. În cele din urmă, puteți seta valoarea de terminare la 0% 0% pentru a crea un efect de ștergere în locul unui efect de desenare.
Iată codul JavaScript pe care l-am folosit pentru a-mi anima bicicleta:
var wholeAnimation = KUTE.fromTo ("#icon", draw: "0% 0%", draw: "0% 100%", duration: 10000); var parțialAnimație = KUTE.fromTo ("#icon", draw: "0% 5%", trageți: "95% 100%", duration: 10000); var eraseAnimation = KUTE.fromTo ("#icon", draw: "0% 100%", trageți: "0% 0%", duration: 5000);După cum puteți vedea în exemplul de mai jos, nu trebuie să vă faceți griji cu privire la mai multe căi subterane dintr-o cale. KUTE.js animă toate aceste subpaths individual fără probleme. Durata de animație este folosită pentru a determina timpul pentru animarea celei mai lungi căi. Durata cursei pentru restul subpaths este apoi determinată pe baza lungimii lor.
Am învățat deja cum să animăm valorile transformării CSS în al doilea tutorial al seriei. Pluginul KUTE.js SVG vă permite, de asemenea, să utilizați svgTransform atribut pentru a roti, traduce, scala sau deplasa diferite elemente SVG pe o pagină web.
roti atributul acceptă o singură valoare care determină unghiul de rotație. Implicit, rotația se întâmplă în jurul punctului central al elementului, dar puteți specifica un nou centru de rotație utilizând transformOrigin atribut.
Traduceți atributul acceptă valorile în format traduceți: [x, y] sau traduceți: x. Când este prevăzută cu o singură valoare, valoarea lui y se presupune că este zero.
Atunci când elementele sunt înclinate, va trebui să le folosiți skewX și skewY. Nu există sprijin pentru înclinare [x, y] în SVG. În mod similar, scară atributul acceptă și o singură valoare. Aceeași valoare este folosită pentru a scala elemente în ambele direcții x și y.
Iată un fragment de cod care aplică toate aceste transformări pe un dreptunghi și un cerc.
var rotație = KUTE.allTo ("rect, cerc", svgTransform: rotate: 360, repeat: 1, yoyo: true); var scaling = KUTE.allTo ("rect, cerc", svgTransform: scale: 1.5, repeat: 1, yoyo: true); vară traducere = KUTE.allTo ("rect, cerc", svgTransform: traducere: [100, -50], repet: 1, yoyo: true); var skewing = KUTE.allTo ("rect, cerc", svgTransform: skewX: 25, repeat: 1, yoyo: true);Am setat YOYO parametru pentru Adevărat astfel încât după ce au jucat animația în sens invers, proprietățile transformate sunt setate la valoarea lor inițială. În acest fel, putem relua animațiile din nou și din nou făcând clic pe butoane.
Dacă apăsați butonul Roti în demo, veți observa că nu pare să aibă niciun efect asupra cercului. Pentru a observa rotația cercului, va trebui să aplicați o transformare oblică pe ea pentru a schimba forma și apoi faceți clic pe rotiți imediat.
Am inceput acest tutorial acoperind principiile de morfing SVG si animatiile de accident vascular cerebral. Ați învățat cum să modelați în mod corespunzător căi complexe care au subpagini și cum putem crea un efect de ștergere a cursei în locul unei trageri prin alegerea valorilor potrivite pentru a desena atribut. După aceea, am discutat despre modul în care putem folosi svgTransform pentru a anima diferite transformări.
În diverse tutoriale, am văzut cât de puternic a devenit JavaScript. Nu este fără curbele sale de învățare, și există o mulțime de cadre și biblioteci pentru a vă menține ocupați. Dacă sunteți în căutarea unor resurse suplimentare pentru a studia sau a utiliza în munca dvs., verificați ce avem disponibil pe Envato Market.
Tutorialul a fost menit să vă prezinte toate caracteristicile pluginului SVG KUTE.js și să vă ajute să începeți rapid. Puteți afla mai multe despre pluginul SVG citit documentația.
