Nilalaman
- Nagsisimula
- Lumilikha ng base ng paikutan
- Paglikha ng paa
- Ang braso at ulo
- Mga kulay at pagkakayari
- Pag-render at pag-export
- Tinatapos ang logo
- Paganahin ang logo
Mayroong maraming mga paraan upang lumikha ng 3D na animasyon sa web, karamihan sa mga ito ay nangangailangan ng isang mahusay na kaalaman sa JavaScript at WebGL, o ang paggamit ng isang plug-in tulad ng Flash. Salamat sa mga pagbabago sa CSS 3D, posible na lumikha ng 3D gamit lamang ang HTML at CSS, ngunit hindi madaling gawin ito. Ang Tridiv, ang aking libreng online app, ay pinapasimple ang proseso, nag-aalok ng isang simple at madaling maunawaan na interface ng WYSIWYG na nagbibigay-daan sa mga gumagamit na lumikha ng mga 3D na bagay nang hindi nagsusulat ng isang solong linya ng code.
Sa tutorial na ito, lilikha at bubuhayin namin ang isang logo para sa 'Tridiv Records', isang tatak na talaan ng kathang-isip, na gumagamit lamang ng HTML at CSS. Ang pangunahing visual para sa logo ay malilikha sa 3D gamit ang Tridiv. Pagkatapos ay idaragdag namin ang mga elemento ng typographic gamit ang regular na HTML at CSS.
Maaari mong makita ang panghuling animasyon at ang code na bumubuo rito.
Nagsisimula
Magsisimula na kami sa pamamagitan ng paglikha ng paikutan sa 3D gamit ang Tridiv. Tumungo sa tridiv.com at ilunsad ang app. Kakailanganin mong gumamit ng alinman sa Chrome, Safari, o Opera 15 (o mas bago).
Bago magsimula, mahalagang maunawaan ang interface ng Tridiv. Ang pangunahing seksyon ng editor ay binubuo ng apat na pagtingin: sa kaliwang bahagi sa itaas ay ang 3D view, na nagbibigay ng isang kumpletong view ng eksena. Ang iba pang tatlong pagtingin ay ipinapakita ito mula sa tuktok, gilid at harap. Gamit ang tatlong mga view na ito, maaari kang lumikha, mag-edit at ilipat ang mga 3D na hugis.
Ang pahalang na toolbar ay nahahati sa dalawang bahagi: ang kaliwang bahagi ay nagpapakita ng impormasyon na nauugnay sa iyong dokumento; ang tamang bahagi ay naglalaman ng mga tool para sa paglikha at pag-edit ng mga hugis. Ang Gumalaw pagpili at I-edit ang mga pindutan ng pagpili ay lumipat sa pagitan ng iba't ibang mga mode sa pag-edit.
Ang pane ng mga katangian (ang sidebar) ay nagpapakita ng mga setting ng dokumento tulad ng pag-zoom at snap sa grid, at ang mga katangian ng napiling hugis (laki, posisyon, pag-ikot, kulay, at iba pa). Ang yunit na ginamit para sa mga sukat at posisyon ay ems; ang mga anggulo ng pag-ikot ay nasa degree.
Upang maiwasan ang anumang pagkalito sa kalaunan sa tutorial, gagamitin namin ang sumusunod na maikling salita:
w = lapad h = taas d = lalim diam = diameter x deg = pag-ikot sa x-axis y deg = pag-ikot sa y-axis z deg = pag-ikot sa z-axis
Lumilikha ng base ng paikutan
Magsimula sa pamamagitan ng pagtatakda ng halaga ng pag-zoom sa 200. Upang matulungan ang pagguhit ng mga hugis, buhayin ang snap sa setting ng grid sa Mga Setting ng Dokumento seksyon ng sidebar. Itakda ang snap na halaga sa 0.125.
Ang base ng paikutan ay binubuo ng isang simpleng kuboid, kaya i-click ang Magdagdag ng kuboid pindutan sa tuktok na toolbar. Dapat mong makita ang cuboid na lilitaw sa lahat ng apat na pagtingin sa editor.
Palitan ang pangalan ng hugis sa base gamit ang patlang ng pangalan ng mga pane ng mga katangian (sa ilalim Mga Katangian ng Hugis). Ang pangalan ng hugis ay dapat na isang wastong pangalan ng klase ng CSS sapagkat gagamitin ito sa code na nabuo ng editor. Gagamitin namin ang mga pangalan ng klase na ito sa paglaon kapag gin-animate ang logo, kaya tiyaking pinangalanan mo ang bawat bagong hugis na nilikha mo nang maayos.
Kapag ang cuboid ay pinangalanan, siguraduhing napili ito sa tuktok na pagtingin (dapat itong ma-highlight sa asul, na may isang pabilog na singsing ng mga tool sa paligid nito), pagkatapos ay i-click ang I-edit pindutan sa tuktok ng singsing upang ipakita ang mga pag-edit ng hawakan. I-drag ang mga hawakan ng kontrol sa mga gilid ng cuboid, hanggang sa maabot ang lapad at lalim w = 10 at d = 8 nasa Mga Katangian ng Hugis.
Mag-click sa hugis sa loob ng view ng gilid. Ipapakita nito ang mga humahawak sa pag-edit sa view na ito, na pinapayagan kaming baguhin ang taas nito. Ayusin ang taas hanggang sa umabot ito h = 2. Maaari mo ring mai-type ang mga halaga nang direkta sa pane ng mga katangian. Upang maiikot ang mga sulok ng cuboid, baguhin ang mga halaga ng sulok sa pane ng mga katangian sa 1.75, pagkatapos ay pindutin ang [Ipasok] susi upang mailapat ang mga pagbabago. Magkakaroon ka ng tulad nito.
Paglikha ng paa
Para sa mga paa ng paikutan, gagamit kami ng mga silindro. Magdagdag ng isang silindro, pagkatapos ay baguhin ang diameter nito sa diam = 1.75 at ang taas nito sa h = 0.5. Mag-click sa Gumalaw pindutan ng pagpipilian sa tuktok na toolbar upang maipakita ang draggable area sa hugis. Ilipat ang silindro sa ilalim ng base, inilalagay ito sa isa sa mga sulok. (Maaaring kailanganin mong ilipat ito sa tuktok, gilid at harap ng mga view.)
I-duplicate ang silindro (pindutin ang Kopyahin pindutan sa pabilog na singsing ng mga tool, o pindutin ang D key) at upang ilipat ang bagong silindro sa isa pang sulok ng base. Ulitin ang proseso hanggang sa maayos na nakaposisyon ang lahat ng apat na talampakan. Huwag kalimutang pangalanan ang mga silindro (halimbawa, paa-kaliwa-itaas, paa-kanang-itaas, paa-kaliwa-ibaba, paa-kaliwa-itaas). Kapag nagawa mo na iyan, dapat ganito ang resulta.
Titingnan namin ngayon ang paglikha ng platter, disc, arm axis at pindutan. Ang proseso para sa paglikha ng mga susunod na hugis ay katulad ng para sa mga paa. Narito ang mga sukat na ginamit para sa iba't ibang mga silindro:
pinggan: diam = 7; h = 0,5 disc: diam = 6.75; h = 0,25 na pindutan: diam = 1.5; h = 0,25 arm-axis-base: diam = 2.25; h = 0,25 arm-axis: diam = 1.375; h = 1
Upang pinuhin ang mga gilid ng mga silindro, maaari mong dagdagan ang bilang ng mga mukha sa bawat isa, gamit ang patlang ng mga gilid sa pane ng mga katangian. Huwag magdagdag ng masyadong maraming panig dahil maaaring negatibong maimpluwensyahan nito ang pandaigdigang pagganap ng editor at ang panghuling animasyon. Sa kasong ito, payuhan ko kayo na huwag gumamit ng higit sa 32 panig para sa platter at disc. Dapat may ganito ka.
Ang braso at ulo
Para sa braso at ulo ng paikutan, gagamit kami ng mga cuboid. Para sa braso, lumikha ng isang cuboid (w = 0.25; h = 0.25; d = 4), pagkatapos ay maglapat ng isang pag-ikot ng -33° sa y-axis. Para sa ulo, lumikha ng isang cuboid (w = 0.5; h = 0.5; d = 1), pagkatapos ay maglapat ng isang pag-ikot ng -33° sa y-axis. Pantayin ang parehong mga hugis gamit ang silindro ng axis-axis. Ang resulta ay dapat magmukhang ganito.
Mga kulay at pagkakayari
Halos tapos na tayo sa paikutan. Ang pangwakas na hakbang ay upang magtalaga ng mga kulay at maglapat ng isang texture sa vinyl (isang imahe na kumakatawan sa ibabaw ng talaan). Upang magtalaga ng mga kulay, pumili ng isang hugis at mag-click sa mga kulay patlang sa pane ng mga katangian. Pinapayagan ka ng Tridiv na tukuyin ang mga indibidwal na kulay para sa bawat mukha ng isang hugis, ngunit, sa halimbawang ito, kailangan naming gamitin ang lahat ng patlang upang mabago ang kulay ng lahat ng mga mukha. Upang magawa ito, ipasok lamang ang isang hex color code sa patlang, pagkatapos kumpirmahin sa pamamagitan ng pagpindot Pasok.
Narito ang mga kulay na ginamit sa halimbawang ito:
base: # 0099FF talampakan, butones, axis, braso at ulo: # F2EEE5 disc: # fa7f7a
Para sa pagkakayari ng vinyl, ang proseso ay katulad ng pagtatalaga ng mga kulay. Piliin ang disc silindro, pagkatapos ay mag-click sa mga imahe patlang sa pane ng mga katangian. I-paste ang URL ng imahe na nais mong ilapat sa vinyl sa tuktok na patlang at kumpirmahin sa pamamagitan ng pagpindot Pasok. Maaari kang gumamit ng iyong sariling imahe, o i-download ang ginamit sa halimbawang ito.
Dapat mayroon ka ngayon ng isang bagay na ganito.
Pag-render at pag-export
Ngayon na tapos na ang turntable, gagana kami sa paraan kung saan ito nai-render bago i-export ito. I-click ang Preview pindutan sa tuktok ng pane ng mga katangian. Itakda ang halaga ng pag-zoom sa 200 upang ipakita ang paikutan na mas malaki. Upang alisin ang mga itim na hangganan ng mga hugis, pumunta sa Mga hangganan seksyon ng pane at itakda ang opacity sa 0. Ang resulta ay dapat magmukhang ganito.
Nais naming maiilawan mula sa itaas ang paikutan. Upang gawin ito, paikutin ang eksena sa isang paraan na nakaharap sa iyo ang tuktok ng paikutan ng paikutan. Ang base ay dapat magmukhang perpektong hugis-parihaba. Ang pagpapalit ng ilaw at madilim na mga halaga sa tridiv.com/d/4k6section ng pane ng mga katangian ay bubuhayin muli ang mga anino sa loob ng eksena. Baguhin ang light halaga sa 0.
Ang paikutan ay handa na ngayong i-export!
Tinatapos ang logo
Handa na kaming idagdag ang teksto sa logo at likhain ang logo ng animasyon. I-click ang I-edit sa pindutan ng CodePen sa kaliwang ibabang bahagi ng Preview tingnan upang i-export ang code sa CodePen. Mahalagang tandaan na ang CSS code na nabuo ng Tridiv ay hindi gumagamit ng mga preview ng vendor, kaya kakailanganin mong gumamit ng mga tool tulad ng previewr.com o leaverou.github.io/prefixfree upang maisagawa ang code sa bawat browser. Magsimula sa pamamagitan ng pagsasara ng pane ng JavaScript, dahil hindi namin ito gagamitin. Sa pane ng HTML, alisin ang style tag na inilapat sa .eksena div.
Palawakin ang pane ng CSS at idagdag ang sumusunod na code sa dulo:
.scene {transform: translateY (-140px) rotateX (-55deg); }
Narito, ang translateY (-140px) ilipat ang paikot na 140px paitaas, na nag-iiwan ng silid para sa teksto sa ilalim nito. Pagkatapos, ang paikutinX (-55deg) nagtatakda ng patayong pagkahilig ng paikutan.
Upang idagdag ang teksto, kailangan mong magdagdag ng a .title div kaagad pagkatapos ng pagbubukas #tridiv div sa pane ng HTML. Sa loob, magdagdag ng dalawa sumasaklaw> (. pangunahing pamagat at .sub-pamagat), pinaghiwalay ni hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> REKLAMO / span> / div>…
Kailangan mong ilapat ang tamang mga font at istilo. Sa pane ng CSS, i-import ang font ng Open Sans na ginamit sa logo, at idagdag ang mga pangunahing istilo para sa mga elemento ng teksto.
@import url (http://fonts.googleapis.com/css?family=Open+Sanselasan00); / * Nakasentro ng bloke ng teksto + pangunahing mga istilo ng font * / pamagat {posisyon: ganap; itaas: 50%; kaliwa: 50%; margin: 0 0 0 -165px; lapad: 330px; taas: 5em; font-family: 'Open Sans', sans-serif; font-weight: 300; laki ng font: 24px; text-align: gitna; sulat-spacing: 1.5em; kulay: # 0099FF; } pamagat hr {border: 1px solid # fa7f7a; margin: .75em 0; } span ng pamagat {display: block; } .mamagatang pamagat {font-size: 2.15em; } .sub-title {text-indent: .25em; }
Voilà! Kumpleto na ang iyong logo. Dapat itong magmukhang katulad ng imahe sa ibaba. Kapag tapos na ang iyong 3D na modelo, maaari mong gamitin ang lakas ng CSS upang gawing mas mahusay ito sa pamamagitan ng pagdaragdag ng mga istilo, mga animasyon o mga kaganapan sa mouse: tratuhin lamang ang modelo ng 3D tulad ng anumang iba pang elemento ng HTML.
Paganahin ang logo
Makita ang isang animation gamit ang logo dito. Tulad ng mga bahagi ng turntable 'fall' in, bawat isa sa kanila ay nagbabahagi ng parehong keyframe na animation na may iba't ibang mga pagkaantala. Ang mga hugis ay nakatakda sa tuktok na katangian 50%. Upang likhain ang bumabagsak na epekto, binubuhay namin ang nangungunang katangian mula sa -400px sa 50%:
Bumagsak ang @keyframes na {0% {tuktok: -400px; } / * Sinimulan namin ang pagpoposisyon ng animation ng hugis sa taas na 400px * / 100% {itaas: 50%; } / * pagkatapos ay tatapusin natin ito sa kanyang orihinal na posisyon * /}
Maaari mong idagdag ang animasyong ito sa lahat ng mga hugis, tulad ng sumusunod:
.hugis {itaas: -400px; animation: mahulog ang 1s madaling 0 pasulong; }
Itakda ang nangungunang katangian sa -400px at magdagdag ng isang pagkaantala:
.platter {animasyon-pagkaantala: 1.05s; } .disc {animasyon-pagkaantala: 1.35s; } .button {animasyon-pagkaantala: 1.5s; } ...
Lumikha ng pangwakas na 'bounce' na epekto gamit ang paikutinX katangian:
90% {transform: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {transform: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {transform: translateY (-4.5em) rotateX (660deg) rotateY (0deg); }
Iyon ang paraan kung paano namin nilikha ang partikular na bersyon na ito, ngunit tandaan: walang mga limitasyon!
Salita: Julian Garnier
Ang artikulong ito ay orihinal na lumitaw sa net magazine na isyu 248.
