Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Performant na mga Animations Paggamit ng KUTE.js: Parte 3, Animasyon ng SVG

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Performant Animations Using KUTE.js.
Performant Animations Using KUTE.js: Part 2, Animating CSS Properties
Performant Animations Using KUTE.js: Part 4, Animating Text

Tagalog (Wikang Tagalog) translation by Robert Alexander (you can also view the original English article)

Ang nakaraang pagtuturo ng serye ay nagpakita sa iyo kung paano pagalawin ang iba't ibang mga katangian ng CSS ng anumang elemento gamit ang KUTE.js. Gayunpaman, ang pangunahing kagamitan ay hindi nagpapahintulot sa iyo upang bigyang-buhay ang mga katangian na partikular sa mga elemento ng SVG. Katulad nito, hindi mo mapapagalaw ang SVG morphing ng iba't ibang mga hugis ng landas o ang pagguhit ng iba't ibang mga elemento ng SVG gamit ang mga pag-galaw. Kailangan mong gamitin ang KUTE.js SVG plugin upang makamit ang anuman sa mga gawaing ito.

Bago kami magsimula, tandaan na dapat mong isama ang parehong pangunahing kagamitan ng KUTE.js at ang SVG plugin para sa mga halimbawa sa pagtuturo na ito upang gumana.

Morphing ng SVG na mga Hugis

Ang isang morphing ng isang hugis ng SVG papunta sa isa pa ay isang pangkaraniwang sikat na iyong makikita. Ang KUTE.js SVG plugin ay nagbibigay sa amin ng lahat ng bagay na kailangan namin upang lumikha ng aming sariling mga morphing na pagpapagalaw nang madali.

May tatlong mga paraan upang ang morph SVG na mga hugis gamit ang libruhan na ito:

  1. Maaari mong gamitin ang method fromTo() upang tukuyin ang parehong pauna at pangwakas na gamit ng SVG para sa iyong elemento.
  2. Maaari mo ring gamitin ang to() na paraan at maiwasan ang pagtukoy sa unang gamit. Sa kasong ito, ang halaga ng pagsisimula para sa morphing ay matutukoy base sa halaga ng d kagandahan ng napiling elemento na nais mong i-morph.
  3. Isa pang pagpipilian na mayroon ka ay upang pumasa sa pangwakas na gawain bilang isang direktang pisi sa tween. Sa ganitong paraan, maaari mong maiwasan ang pagkakaroon ng dalawang magkakaibang pag-galaw sa iyong SVG.

Sa panahon ng pagpapabago, ang mga libruhan ay nagpapakita ng ilang mga puntos batay sa mga gamit na aming ibinigay. Ang mga puntong ito ay pagkatapos ay nakalagay sa dalawang magkaibang arrays. Sa wakas, ang mga arrays na ito ay ginagamit para sa paglalagay. Mayroong ilang mga pagpipilian na maaari mong palitan upang kontrolin ang pag-uugali ng morphing para sa iba't ibang mga landas.

  • morphPrecision: Tulad ng maaaring nahulaan mo, ang pagpipiliang ito ay nagbibigay-daan sa iyo upang tukuyin ang katamaan o pagiging maayos ng morphing. Ito ay tinukoy bilang isang numero, at ang isang mas mababang halaga ay nangangahulugan ng mas mataas na pagkatama. Tandaan na ang mas mataas na pagkatama ay magreresulta sa mas maayos, ngunit ito ay magiging mahirap sa pagganap. Ang pagpipiliang ito ay hindi nalalapat kapag nakikipagtulungan ka sa mga polygonal na hugis o gawain kung saan ang hugis ay binubuo lamang ng h, l at v. Sa ganitong mga kaso, ang orihinal na mga hugis ng polygon ay ginamit kesa sa pagpili ng bago.
  • reverseFirstPath: Maaari mong piliin ang halaga ng pagpipilian na ito sa true upang ibalik ang lugar ng pagguhit para sa iyong unang hugis. Ang default na halaga nito ay false.
  • reverseSecondPath: Maaari mong piliin ang halaga ng pagpipilian na ito sa true upang ibalik ang lugar ng pagguhit para sa iyong pangalawang hugis. Ang default na halaga nito ay false rin.
  • morphIndex: Minsan, ang mga napipiling pag-galaw ay maaaring magkaroon ng maraming distansya sa panahon ng morphing. Maaari mong kontrolin ang pag-galaw na ito gamit ang panukat na morphIndex. Kapag tinukoy ang panukat na ito ay nagbibigay-daan sa iyo upang paikutin ang huling landas sa isang paraan na ang lahat ng mga puntos maglakbay ng hindi bababa sa distansya maaari.

Gamitin natin kung ano ang natutunan natin sa ngayon sa isang icon ng baterya sa icon ng bookmark. Dapat mong tandaan na ginamit ko ang maliit na l na pagkakasunod sunod upang tukuyin ang landas sa mga magkakamag-anak na termino. Ito ang kinakailangang markahan:

Ang sumusunod na JavaScript ay lumilikha ng tween na object at nagsisimula sa pag-galaw sa pindutan ng pagpindot:

Narito ang isang pagtuturo na nagpapakita ng koda sa itaas sa pagkilos. Nagdagdag din ako ng dagdag na sangkap kung saan ang morph na pagpapagalaw ay nagtatakda reverseFirstPath sa true. Matutulungan ka nitong maunawaan ang pangkalahatang epekto ng iba't ibang mga pagpipilian sa pagsasaayos sa morphing. Ang tagal ng pag-galaw ay nailalagay sa 5 segundo upang maaari mong maingat na pagmasdan ang parehong mga pag-galaw at makita ang mga pagkakaiba.

Sa nakaraang halimbawa, ang pangunahing landas ay walang anumang subpath. Ginawa nito ang morphing na tapat. Gayunpaman, maaaring hindi ito laging nangyayari.

Magdaragdag kami ng dagdag na paggalaw sa aming bookmark pati na rin ang icon ng baterya. Kung morph mo ang mga icon ngayon, makikita mo na lamang ang unang subpath na gumagalaw. Ang pangalawang subpath ay mawala lamang sa simula ng pag-galaw at muling lumitaw sa dulo. Ang tanging paraan upang mapagalaw ang lahat ng mga subpath sa mga ganitong kaso ay sa pamamagitan ng pagpapalit ng mga subpath sa mga indibidwal na landas. Narito ang isang halimbawa:

Pagpapagalaw ng SVG Stroke

Isa pang sikat na epekto ng pagpapagalaw na may kaugnayan sa SVG ang nagsasama mula sa wala at pagkatapos ay gumuhit ng isang paunang natukoy na hugis gamit ang mga stroke SVG. Maaari itong gamitin upang mapagalaw ang pagguhit ng mga logo o iba pang mga bagay. Sa seksyon na ito, matututunan mo kung paano gamitin ang KUTE.js upang lumikha ng isang stroking na pagpapagalaw para sa Font Awesome icon ng bisikleta.

May tatlong paraan upang mapagalaw ang mga stroke sa SVG sa KUTE.js. Maaari kang magpasaya mula sa 0% hanggang 100% sa pamamagitan ng pagtatakda ng fromTo na mga halaga bilang 0% 0% at 0% 100%. Maaari ka ring gumuhit ng isang bahagi ng hugis ng SVG sa pamamagitan ng pagtatakda ng mga halaga sa isang bagay tulad ng 0% 5% at 95% 100%. Sa wakas, maaari mong itakda ang pangwakas na halaga sa 0% 0% upang lumikha ng isang binubura epekto sa halip ng isang epekto sa pagguhit.

Narito ang JavaScript code na ginamit ko upang mapagalaw ang aming bisikleta:

Tulad ng makikita mo sa halimbawa sa ibaba, hindi mo kailangang mag-alala tungkol sa maraming mga subpath sa loob ng landas. Ang KUTE.js ay nag-iisa ng lahat ng mga subpath na ito nang paisa-isa nang walang anumang mga isyu. Ang tagal ng pagpapagalaw ay ginagamit upang matukoy ang oras para sa galaw ng pinakamahabang landas. Ang tagal ng stroke para sa natitirang bahagi ng subpath ay pagkatapos ay tinutukoy base sa kanilang haba.

Pagpapagalaw ng SVG na Nagbabago

Natutuhan na namin kung paano pagalawin ang mga halaga ng pagbago ng CSS sa ikalawang pagtuturo ng serye. Pinapayagan ka rin ng KUTE.js SVG plugin na gamitin ang katangian ng svgTransform upang paikutin, isalin, sukatin, o hilig ng iba't ibang mga elemento ng SVG sa isang webpage.

Ang pagpapa-ikot na katangian ay tumatanggap ng isang halaga na tumutukoy sa anggulo ng pag-ikot. Bilang default, ang pag-ikot ay mangyayari sa paligid ng sentro ng elemento, ngunit maaari mong tukuyin ang isang bagong sentro ng pag-ikot gamit ang transformOrigin na katangian.

Ang translate ng pagsasalin na katangian ang mga halaga sa format translate: [x, y] o translate: x. Kapag ibinigay na may isang solong halaga, ang halaga ng y ay ipinapalagay na zero.

Kapag nag-skewing elemento, kailangan mong gumamit ng skewX at skewY. Walang suporta para sa skew [x, y] sa SVG. Gayundin, ang katangian ng scale ay tumatanggap lamang ng isang halaga. Ang parehong halaga ay ginagamit upang masukat ang mga elemento sa parehong mga direksyon x at y.

Narito ang isang code snippet na sumasaklaw sa lahat ng mga pagbabagong ito sa isang rektanggulo at isang bilog.

Naitakda ko ang yoyo parameter sa true upang pagkatapos na umpisahan ang pag-galaw sa kabaligtaran, ang mga katangian ng pagbabagong-anyo ay nakatakda sa kanilang unang halaga. Sa ganitong paraan, maaari naming muling ulitin ang mga pagpapagalaw muli sa pamamagitan ng pagpindot sa mga pindutan.

Kung pinindot mo ang pindutan ng Paikutin sa pagtuturo, mapapansin mo na hindi mukhang may epekto sa kabuuan. Upang obserbahan ang pag-ikot ng bilog, kakailanganin mong maglagay ng skew transform dito upang baguhin ang hugis nito at pagkatapos ay mapindot at paikutin kaagad.

Mga Huling Ideya

Sinimulan namin ang pagtuturo na ito sa pamamagitan ng pagtakip sa mga pangunahing kaalaman ng SVG morphing at stroke na pagpapagalaw. Natutunan mo kung paano maayos ang masalimuot na landas na may mga subpath at kung paano namin maaaring lumikha ng isang binubura na stroke na epekto sa halip na isang pagguhit ng isa sa pamamagitan ng pagpili ng tamang mga halaga para sa draw na katangian. Pagkatapos nito, tinalakay namin kung paano namin magagamit ang svgTransform na katangian upang mapagalaw ang iba't ibang mga pagbabago.

Sa iba't ibang mga pagtuturo, nakita namin kung gaano kalaking JavaScript ang naging. Ito ay hindi na walang mga pagpapalit sa pag-aaral nito, at maraming mga framework at mga libruhan ang nagpapanatili sa iyo ng abala. Kung naghahanap ka ng karagdagang mga mapagkukunan upang pag-aralan o gamitin sa iyong trabaho, tingnan kung anong mayroon kami sa Envato Market.

Ang pagtuturo ay sinadya upang ipakilala sa lahat ng mga sikat ng KUTE.js SVG plugin at tulungan kang magsimula nang mabilis. Maaari kang matuto nang higit pa tungkol sa SVG plugin sa pamamagitan ng pagbabasa ng dokumentasyon.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.