Advertisement
  1. Web Design
  2. Animation

Mag-sign on sa mga Tuldok na Linya: I-animate ang Iyong Sariling SVG na Signatura

by
Read Time:7 minsLanguages:

Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)

Ang pag-aanimate ng stroke ng SVG ay nababagay para sa pagsi-simulate ng sulat-kamay. Sa paglipas ng kurso ng dalawang tutoryal gagamit tayo ng CSS animation para gumawa ng signatura na parang sinulat, tila ikaw mismo ang pumirma sa pahina.

Narito ang gagawin natin:

1. SVG File

Bago natin talakayin ang anumang code, kailangan natin ang SVG na bersyon ng iyong signatura. Hindi mahalaga kung anong software ang gagamitin mo para gawin ito, ngunit subukang panatilihin ang mga linya at kurbada nang makinis hangga't maaari para sa pinakamahusay na epekto.

Ito ang sa akin, kung saan maaari mong makita na naiguhit na may tatlong magkakahiwalay na landas:

first signature pathfirst signature pathfirst signature path
Unang landas
Second signature pathSecond signature pathSecond signature path
Ikalawang landas
Third signature pathThird signature pathThird signature path
Ikatlong landas

Tiyakin na ang iyong artboard ay napaigsi nang mabuti para sa signatura, at i-save ang file bilang SVG.

2. Pag-aayos ng SVG Code

Ang pagbubukas ng file sa code editor ay maglalantad ng XML na istraktura ng SVG. Depende sa kung aling application ang iyong ginamit para disenyuhin ito, at dagdag pa kung paano mo ito na-save at na-export, magkakaroon ka ng <svg> na elemento na may ilang mumbo jumbo bago ito. Ang mumbo jumbo ay maaaring alisin.

Sa kasong ito, ang elementong maiiwan ay may itsura na parang:

Sa loob ng aming pangunahing <svg> maroon tayong <line>, at may <path>, pagkatapos ay isa pang <line>. Ito ang tatlong vectors na ating iginuhit, naiiba lamang dahil ang linya ay walang curvature, kaya tinukoy itong kakaiba sa landas sa SVG.

3. Magdadagdag ng mga Klase

Kailangan nating ihiwalay na i-target ang mga vectors na ito kasama ang CSS sa kaunti pang panahon, kaya tiyakin na mayroon silang nararapat na klase ng pangalan. Ang <svg> na elemento ay maaaring magkaroon ng isang id na sumasalamin sa layer na pangalan kung saang application ito idinisenyo.

Binigyan ko ang aking mga vector ng mga klase ng pangalan depende kung ano sila (una ay ang “I” sa aking pangalan, halimbawa lang).

4. Lahat ng Iba pang SVG na Attributes

Sa kabutihan, ang iyong SVG ay hindi magiging ganito kalinis. Bawat isa sa mga vector na ito ay magkakaroon ng maraming mga coordinates, dagdag pa ang ilang mga attributes na nakatago sa mga iyon. Ang mga coordinates ay kailangang manatili, ngunit maaari nating alisin ang ilan sa mga pangkariniwang nagamit na mga attribute at sa halip ilagay ito sa ating CSS, panatilihin ang mga bagay na kaaya-aya at MALINIS.

Bagong Proyekto

Gagawin ko ito gamit ang CodePen, ngunit maaari mong gamitin ang standalone HTML at CSS na mga dokumento kung iyong nanaisin. I-paste ang SVG na code direkta sa iyong HTML na dokumento. Pagkatapos, alisin ang mga attribute ng bawat landas at elemento ng linya na mayroong pagkakaparehas, sa halip ilagay ito sa CSS na dokumento. Halimbawa, mapapansin mo ang mga attribute tulad ng:

  • fill="none"
  • stroke="#0F436D"
  • stroke-width="2"
  • stroke-linecap="round"
  • stroke-linejoin="round"
  • stroke-miterlimit="10"

Ang mga ito ay maaaring alisin at sa halip ilagay sa pamamagitan ng CSS, tulad nito:

Mas maayos!

5. Magsimulang Mag-animate

Upang mai-animate ang mga stroke ng SVG na ito gagamit tayo ng estilo na unang tinalakay ni Jake Archibald. Ang ideya ay ang mga sumusunod: bawat isa mga vector na ito ay bibigyan ng isang dashed stroke. Ginagawa natin ito sa pamamagitan ng pag-apply ng isang stroke-dasharray value sa loob ng CSS:

Haba ng Dash

Sa bawat isang mga vector ay nakakagawa kami ng stroke-dasharray tiyak na kasing haba ng landas, kaya bawat isa ay mayroong solong dash na sumasakop sa buong haba nito. Ito ay nangangailangan ng kaunting pagsubok at pagkakamali, ngunit sa ating kaso ang mga halaga ay ang ganitong anyo:

Ngayon, para mai-animate itong mga stroke, kailangan nating i-offset ang bawat gitling upang ang mga gap ang tatakip sa vector, hindi ang dash. May katuturan ba ito? Maaaring makatulong ang mga ilustrasyong ito. Sa unang ito, isipin na ang mga dash na linya ay ginamit para takpan ang flourish sa dulo ng signatura.

Ngayon sa isang ito ay inoffset natin ang dash, para ang gap ang nasa ibabaw ng flourish:

Ang kailangan nating gawin ngayon ay gamitin ang CSS upang mai-animate mula sa offset na estado tungo sa iba pa.

6. Mga Keyframe

Ang CSS na animation ay nakadepende sa unang paglalarawan ng keyframes. Bawat keyframe ay naglalarawan ng estado kasama ang timeline, at ang aming mga browser ang nagbibigay ng mga animation sa pagitan nila.

Tingnan muna natin kung paano itong mga offset na dash ay maaaring mai-animate. Gagamitin natin ang unang stroke, ang “I”, at mag-animate sa pagitan ng dalawang estado. Magsimula sa pamamagitan ng pag-set up ng ilang keyframes:

Dito binibigyan namin ang mga keyframe ng isang pangalan(write1) at sa paggamit ng shorthand na syntax upang tukuyin sa simula pa lang ng timeline (0%) na nais namin na ang stroke-dashoffset ay maging 80. Sa ibang salita: ang dash, kung saan ang eksaktong 80px ang haba, ay magiging kumpletong offset.

Sa dulo ng timeline(sa 100%) gusto namin na ang stroke-dashoffset ay maging 0, kaya ang gitling ay muling magtatakip sa vector.

Pag-aapply ng Animation

Ngayon ay mayroon na tayong keyframes, tayo na’t ikabit ito sa animation. Nagdagdag muli tayo ng deklarasyon sa ating stroke-I na panuntunan:

Dito, gamit ang animation property, masasabi natin na nais nating gumamit ng write1 keyframes na tinukoy kani-kanina lang, nais natin ang buong bagay na ito na magtagal ng eksaktong 3 segundo, nais natin na ang animation ay mag-loop nang walang katapusan at nais natin na ang bilis nito ay maging linear (upang walang pagpapabilis o pagpapabagal).

Ito ang makukuha natin:

Tandaan: Ginagamit ko ang Autoprefixer in CodePen na tumutulong sa akin upang hindi gumamit ng mga browser prefixes sa animation stuff.

Ilagay sa Lahat ng Tatlong Vectors

Kailangan nating tukuyin ang dalawa pang set ng keyframes (write2 at write3) para sa natitirang mga vector sa signature–at kailangan nating i-offset sa pamamagitan ng tamang haba ng dash na nalaman natin kanina:

At kailangan nating ilagay ang mga animation na ito sa natitirang dalawang vector:

Ito ang makukuha natin:

Ngayon may nagagawa na tayo! Ang bawat vector ay perpektong nag-aanimate, sa isang linear na mosyon na tumatagal ng 3 segundo.

Susunod na gagawin? Ang i-animate ang mga ito sa sequence.

7. Ang Sequential Animation

Sa ngayon, tayo ay may tatlong stroke na nag-aanimate nang sabay-sabay. Subalit, ninanais natin na ang “I” ay mag-animate, at ang “an”, at ang flourish sa huli. Kung isasalarawan ko ito sa timeline maaaring maging ganito ang anyo nito:

Maaari nating irepresenta ang mga bahaging ito ng timeline sa ating mga CSS keyframe. Halimbawa, ang unang bahagi (mula 0% hanggang 33.3%) ay kung saan nais natin na ang “I” ay mag-animate, kaya babaguhin natin ang mga keyframe upang tapusin sa 33.3% sa halip na 100%:

Ngayon, kung ang lahat ng tatlo nating animation ay may pare-parehong haba (3 segundo) matitiyak natin na ang pangalawa ay hindi magsisimula hanggang sa 33.3%, kung saan ang unang animation ay kumpleto:

Ito ang ibibigay sa atin:

Ang Pagbuo ng Sequence

Ang unang dalawang animation ay gumagalaw nang maayos, kaya pagbutihin pa natin ang mga bagay-bagay sa pamamagitan ng pagtatapos ng pangalawa sa 66.6%, sa kung saan maaaring magsimula ang huling animation. Ganito ang magiging anyo ng ating mga keyframe:

At ang mga sequence ay magiging ganito:

Iba pang Pag-aayos

Maganda ang ating nagawa, ngunit hindi ito perpekto–tiyak na malayo pa sa tunay na galaw ng panulat. Ang bawat isa sa tatlong vector ay mapapalapit sa kurso ng isang Segundo, anuman ang haba nito. Ang gitnang vector ay mas mahaba sa huli, kaya mas mahaba ito kung iguhit. Ganito ang magiging anyo ng mas magandang timeline:

Upang mas maging katotohanan mayroon din na gap sa pagitan ng pagtatapos ng unang vector at ang pagsisimula ng pangalawa. Kaya baguhin natin ang mga keyframe value upang ipakita ang:

Sa huli, bilisan natin ang mga bagay-bagay sa pamamagitan ng pagbabago ng lahat ng mga value ng 3s sa 2s. Maaari din nating baguhin ang animation declaration upang ang bawat isa ay magpapakita lamang ng isang beses, at hindi magpapatuloy nang paulit-ulit:

Maaaring nais mo din na gamitin ang may linear na value, sa halip na maglagay ng anumang easing tulad ng ease-in, ease-in-out, ease-out etc upang hindi masyadong pare-pareho ang mga galaw. Ano ang ibibigay nito sa atin?

Sa Susunod

Maganda ang ating progreso at marami tayong natutunan! Sa susunod na tutoryal mas pagbubutihin pa natin, ang paggamit ng Waypoints.js upang tulungan tayong kontrolin ang animation. Magkita-kita tayo doon!

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.