Vsebina
- Kako začeti
- Ustvarjanje podlage gramofona
- Ustvarjanje stopal
- Roka in glava
- Barve in teksture
- Upodabljanje in izvoz
- Dokončanje logotipa
- Animirajte logotip
Obstaja več načinov za ustvarjanje 3D animacije v spletu, večina od njih zahteva dobro znanje JavaScript in WebGL ali uporabo vtičnika, kot je Flash. Zahvaljujoč preoblikovanju CSS 3D je mogoče ustvariti 3D z uporabo samo HTML in CSS, vendar tega ni enostavno narediti. Tridiv, moja brezplačna spletna aplikacija, poenostavlja postopek in ponuja preprost in intuitiven vmesnik WYSIWYG, ki uporabnikom omogoča ustvarjanje 3D predmetov brez pisanja ene vrstice kode.
V tej vadnici bomo ustvarili in animirali logotip za 'Tridiv Records', izmišljeno založbo, z uporabo samo HTML in CSS. Glavni vizualni logotip bo ustvarjen v 3D s pomočjo Tridiva. Nato bomo tipografske elemente dodali z običajnimi HTML in CSS.
Končno animacijo in kodo, ki jo ustvari, si lahko ogledate tukaj.
Kako začeti
Začeli bomo z ustvarjanjem gramofona v 3D s pomočjo Tridiva. Pojdite na tridiv.com in zaženite aplikacijo. Uporabljati boste morali Chrome, Safari ali Opera 15 (ali novejšo).
Pred začetkom je pomembno razumeti vmesnik Tridiv. Glavni del urejevalnika je sestavljen iz štirih pogledov: zgoraj levo je 3D pogled, ki omogoča popoln pogled na sceno. Ostali trije pogledi kažejo od zgoraj, s strani in spredaj. S pomočjo teh treh pogledov lahko ustvarjate, urejate in premikate 3D oblike.
Vodoravna orodna vrstica je razdeljena na dva dela: levi del prikazuje informacije v zvezi z vašim dokumentom; desni del vsebuje orodja za ustvarjanje in urejanje oblik. The Premakni se izbor in Uredi izbirni gumbi preklapljajo med različnimi načini urejanja.
Podokno z lastnostmi (stranska vrstica) prikazuje nastavitve dokumenta, kot sta povečava in pripenjanje na mrežo, ter lastnosti izbrane oblike (velikost, položaj, zasuk, barva itd.). Enota za dimenzije in položaj je ems; koti vrtenja so v stopinjah.
Da ne bi prišlo do zmede v nadaljevanju vaje, bomo uporabili naslednjo okrajšavo:
w = širina h = višina d = premer globine = premer x stopinja = vrtenje v osi x y deg = vrtenje v osi y z deg = vrtenje v osi z
Ustvarjanje podlage gramofona
Začnite z nastavitvijo vrednosti povečave na 200. Za lažje risanje oblik aktivirajte nastavitev snap to grid v Nastavitve dokumenta odsek stranske vrstice. Vrednost snap nastavite na 0.125.
Osnova gramofona je sestavljena iz preprostega kocka, zato kliknite Dodaj kockasto v zgornji orodni vrstici. Morali bi videti, da se v vseh štirih pogledih urejevalnika prikaže kocka.
Preimenujte obliko v osnova z uporabo polja imena v podoknu z lastnostmi (pod Lastnosti oblike). Ime oblike mora biti veljavno ime razreda CSS, ker bo uporabljeno v kodi, ki jo ustvari urejevalnik. Ta imena razredov bomo uporabili pozneje pri animiranju logotipa, zato poskrbite, da boste pravilno poimenovali vsako novo obliko, ki jo ustvarite.
Ko je kuboid imenovan, se prepričajte, da je izbran v pogledu od zgoraj (označen mora biti modro, s krožnim obročem okrog njega), nato kliknite Uredi na vrhu obroča za prikaz ročic za urejanje. Povlecite krmilne ročaje ob straneh kuboida, dokler ne dosežeta širine in globine w = 10 in d = 8 v Lastnosti oblike.
Kliknite obliko znotraj stranskega pogleda. To bo prikazalo ročaje za urejanje v tem pogledu, kar nam bo omogočilo, da spremenimo njegovo višino. Prilagodite višino, dokler ne doseže h = 2. Vrednosti lahko vnesete tudi neposredno v podokno z lastnostmi. Če želite zaokrožiti vogale kocka, spremenite vrednosti vogalov v podoknu lastnosti na 1.75, nato pritisnite [Enter] za uveljavitev sprememb. Imeli boste kaj takega.
Ustvarjanje stopal
Za noge gramofona bomo uporabili jeklenke. Dodajte valj, nato spremenite njegov premer na premer = 1,75 in njegova višina do h = 0,5. Kliknite na Premakni se gumb za izbiro v zgornji orodni vrstici za prikaz povlečljivega območja na obliki. Premaknite valj pod podnožje in ga postavite v enega od vogalov. (Morda ga boste morali premakniti v zgornjem, stranskem in sprednjem pogledu.)
Podvojite valj (pritisnite Dvojnik v krožnem obroču orodij ali pritisnite D tipko) in nov valj premaknite v drug kot baze. Postopek ponavljajte, dokler niso vse štiri noge pravilno postavljene. Ne pozabite poimenovati valjev (na primer noge-levo-zgoraj, stopala-desno-zgoraj, noge-levo-spodaj, noge-levo-zgoraj). Ko to storite, bi moral biti rezultat videti tako.
Zdaj si bomo ogledali ustvarjanje plošče, diska, osi roke in gumba. Postopek ustvarjanja naslednjih oblik je podoben postopku za stopala. Tu so mere, ki se uporabljajo za različne jeklenke:
krožnik: premer = 7; h = 0,5 diska: premer = 6,75; gumb h = 0,25: premer = 1,5; h = 0,25 osnova-os roke: premer = 2,25; h = 0,25 osi roke: premer = 1,375; h = 1
Če želite izboljšati stranice valjev, lahko povečate število ploskev vsakega s pomočjo polja s stranskimi ploščami v podoknu z lastnostmi. Ne dodajajte preveč strani, saj lahko to negativno vpliva na globalno uspešnost urejevalnika in končno animacijo. V tem primeru vam svetujem, da za ploščo in disk ne uporabljate več kot 32 strani. Moral bi imeti kaj takega.
Roka in glava
Za roko in glavo gramofona bomo uporabili kuboide. Za roko ustvarite kockasti (w = 0,25; h = 0,25; d = 4), nato uporabite rotacijo za -33° na os y. Za glavo ustvarite kockasti (w = 0,5; h = 0,5; d = 1), nato uporabite rotacijo za -33° na os y. Poravnajte obe obliki s cilindrom osi roke. Rezultat bi moral biti takšen.
Barve in teksture
Z gramofonom smo že skoraj končali. Zadnji korak je dodelitev barv in nanos teksture na vinil (slika, ki predstavlja površino plošče). Če želite dodeliti barve, izberite obliko in kliknite na barve polje v podoknu lastnosti. Tridiv vam omogoča, da določite posamezne barve za vsak obraz oblike, vendar moramo v tem primeru uporabiti polje all, da spremenimo barvo vseh obrazov. To storite tako, da v polje vnesete šestnajstiško barvno kodo in potrdite s pritiskom na Enter.
Tu so barve, uporabljene v tem primeru:
osnova: # 0099FF noge, gumb, os, roka in glava: # F2EEE5 disk: # fa7f7a
Za teksturo vinila je postopek podoben dodeljevanju barv. Izberite valj diska in kliknite na slike polje v podoknu lastnosti. V zgornje polje prilepite URL slike, ki jo želite uporabiti za vinil, in potrdite s pritiskom na Enter. Lahko uporabite svojo sliko ali prenesete sliko, uporabljeno v tem primeru.
Zdaj bi morali imeti nekaj, kar je videti tako.
Upodabljanje in izvoz
Zdaj, ko je gramofon končan, bomo pred izvozom obdelali način, na katerega je upodobljen. Kliknite Predogled na vrhu podokna z lastnostmi. Nastavite vrednost povečave na 200 za prikaz gramofona večji. Če želite odstraniti črne obrobe oblik, pojdite na Meje odsek podokna in nastavite motnost na 0. Rezultat bi moral izgledati nekako takole.
Želimo, da je gramofon osvetljen z vrha. Če želite to narediti, zavrtite sceno tako, da je vrh gramofona obrnjen proti vam. Osnova mora biti videti popolnoma pravokotna. Če spremenite vrednosti svetlobe in teme v odseku tridiv.com/d/4k6 podokna z lastnostmi, boste obnovili sence v sceni. Spremenite vrednost svetlobe na 0.
Gramofon je zdaj pripravljen za izvoz!
Dokončanje logotipa
Pripravljeni smo dodati besedilo logotipu in ustvariti animacijo logotipa. Kliknite Uredi na gumbu CodePen v spodnjem levem kotu gumba Predogled za izvoz kode v CodePen. Pomembno je vedeti, da koda CSS, ki jo ustvari Tridiv, ne uporablja predpon ponudnikov, zato boste morali uporabiti orodja, kot sta prefixr.com ali leaverou.github.io/prefixfree, da bo koda lahko delovala v vseh brskalnikih. Začnite z zapiranjem podokna JavaScript, saj ga ne bomo uporabljali. V podoknu HTML odstranite oznako sloga, uporabljeno za .scena div.
Razširite podokno CSS in na koncu dodajte naslednjo kodo:
.scene {preoblikovanje: translateY (-140px) rotateX (-55deg); }
Tukaj translateY (-140px) premakne gramofon 140 px navzgor, tako da ostane prostor za besedilo pod njim. Potem, rotateX (-55deg) nastavi navpični nagib gramofona.
Če želite dodati besedilo, morate dodati .naslov div takoj po odprtju #tridiv div v podoknu HTML. V notranjosti dodajte dve razteza> (.main-title in .sub-title), ločena z hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…
Nato morate uporabiti pravilne pisave in sloge. V podokno CSS uvozite pisavo Open Sans, uporabljeno v logotipu, in dodajte osnovne sloge za elemente besedila.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Centriranje bloka besedila + osnovni slogi pisave * / naslov {položaj: absolutno; zgoraj: 50%; levo: 50%; marža: 0 0 0 -165px; širina: 330px; višina: 5em; družina pisav: 'Open Sans', sans-serif; teža pisave: 300; velikost pisave: 24 slikovnih pik; poravnava besedila: sredina; razmik med črkami: 1,5em; barva: # 0099FF; } naslov hr {border: 1px solid # fa7f7a; marža: .75em 0; } razpon naslova {display: block; } .main-title {velikost pisave: 2.15em; } .sub-naslov {zamik besedila: .25em; }
Voilà! Vaš logotip je popoln. Videti bi moralo biti podobno spodnji sliki. Ko je vaš 3D model končan, ga lahko z močjo CSS še izboljšate z dodajanjem slogov, animacij ali dogodkov miške: 3D model obravnavajte kot kateri koli drug element HTML.
Animirajte logotip
Tukaj si oglejte animacijo z logotipom. Ko deli gramofona "padejo", si vsi delijo isto animacijo ključnih okvirjev z različnimi zamudami. Za oblike je nastavljen atribut top 50%. Za ustvarjanje padajočega učinka animiramo zgornji atribut iz -400 slikovnih pik do 50%:
@keyframes pade za {0% {top: -400px; } / * Animacijo začnemo s pozicioniranjem oblike na višino 400px * / 100% {top: 50%; } / * in ga končamo na prvotnem položaju * /}
To animacijo lahko dodate vsem oblikam, kot sledi:
.shape {top: -400px; animacija: padec 1s lahkotnost 0s naprej; }
Atribut top nastavite na -400 slikovnih pik in dodajte zamudo:
.platter {zakasnitev animacije: 1,05 s; } .disc {zakasnitev animacije: 1,35 s; } .button {zakasnitev animacije: 1,5 s; } ...
Ustvarite končni učinek odbijanja z uporabo rotateX atribut:
90% {preoblikovanje: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {preoblikovanje: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {preoblikovanje: translateY (-4,5em) rotateX (660deg) rotateY (0deg); }
Tako smo ustvarili to različico, vendar ne pozabite: omejitev ni!
Besede: Julian Garnier
Ta članek je bil prvotno objavljen v številki 248 revije net.
