Conţinut
- Noțiuni de bază
- Crearea bazei platoului rotativ
- Crearea picioarelor
- Brațul și capul
- Culori și texturi
- Redare și export
- Finalizarea siglei
- Animează sigla
Există mai multe moduri de a crea animație 3D pe web, cele mai multe dintre ele necesitând o bună cunoaștere a JavaScript și WebGL sau utilizarea unui plug-in precum Flash. Datorită transformărilor CSS 3D, este posibil să creați 3D utilizând numai HTML și CSS, dar nu este ușor să faceți acest lucru. Tridiv, aplicația mea online gratuită, simplifică procesul, oferind o interfață WYSIWYG simplă și intuitivă care permite utilizatorilor să creeze obiecte 3D fără a scrie o singură linie de cod.
În acest tutorial, vom crea și vom anima o siglă pentru „Tridiv Records”, o casă de discuri fictivă, folosind doar HTML și CSS. Vizualul principal pentru logo va fi creat în 3D folosind Tridiv. Apoi vom adăuga elementele tipografice folosind HTML și CSS obișnuite.
Aici puteți vedea animația finală și codul care o generează.
Noțiuni de bază
Vom începe prin a crea platoul în 3D folosind Tridiv. Accesați tridiv.com și lansați aplicația. Va trebui să folosiți fie Chrome, Safari sau Opera 15 (sau o versiune ulterioară).
Înainte de a începe, este important să înțelegeți interfața Tridiv. Secțiunea principală a editorului este compusă din patru vizualizări: în partea stângă sus este vizualizarea 3D, oferind o vizualizare completă a scenei. Celelalte trei vederi îl arată din partea de sus, laterală și frontală. Folosind aceste trei vizualizări, puteți crea, edita și muta forme 3D.
Bara de instrumente orizontală este împărțită în două părți: partea din stânga afișează informații referitoare la documentul dvs.; partea dreaptă conține instrumente pentru crearea și editarea formelor. Mișcare selecție și Editați | × butoanele de selecție comută între diferitele moduri de editare.
Panoul de proprietăți (bara laterală) afișează setările documentului, cum ar fi zoomul și fixarea la grilă, precum și proprietățile formei selectate (dimensiune, poziție, rotație, culoare etc.). Unitatea utilizată pentru dimensiuni și poziție este ems; unghiurile de rotație sunt în grade.
Pentru a evita orice confuzie mai târziu în tutorial, vom folosi următoarea prescurtare:
w = lățime h = înălțime d = adâncime diam = diametru x deg = rotație în axa x y deg = rotație în axa y z deg = rotație în axa z
Crearea bazei platoului rotativ
Începeți prin setarea valorii zoomului la 200. Pentru a ajuta la desenarea formelor, activați setarea snap to grid în Setări document secțiunea barei laterale. Setați valoarea snap la 0.125.
Baza platoului rotativ este compusă dintr-un cuboid simplu, deci faceți clic pe Adăugați cuboid din bara de instrumente de sus. Ar trebui să vedeți cuboidul apărând în toate cele patru vizualizări din editor.
Redenumiți forma în baza folosind câmpul de nume al panoului de proprietăți (sub Proprietăți de formă). Numele formei trebuie să fie un nume valid de clasă CSS, deoarece va fi folosit în codul generat de editor. Vom folosi aceste nume de clase mai târziu la animarea logo-ului, așa că asigurați-vă că numiți fiecare formă nouă pe care o creați corect.
Odată ce cuboidul este numit, asigurați-vă că este selectat în vizualizarea de sus (trebuie evidențiat în albastru, cu un inel circular de instrumente în jurul său), apoi faceți clic pe Editați | × butonul din partea de sus a inelului pentru a afișa mânerele de editare. Trageți mânerele de control de pe laturile cuboidului, până când ating lățimea și adâncimea w = 10 și d = 8 în Proprietăți de formă.
Faceți clic pe forma din interiorul vederii laterale. Aceasta va afișa mânerele de editare în această vizualizare, permițându-ne să-i schimbăm înălțimea. Reglați înălțimea până ajunge h = 2. De asemenea, puteți tasta valori direct în panoul de proprietăți. Pentru a rotunji colțurile cuboidului, modificați valorile colțurilor din panoul de proprietăți la 1.75, apoi apăsați tasta [Introduce] tasta pentru a aplica modificările. Veți avea așa ceva.
Crearea picioarelor
Pentru picioarele platanului, vom folosi cilindri. Adăugați un cilindru, apoi schimbați-i diametrul în diam = 1,75 iar înălțimea sa la h = 0,5. Faceți clic pe Mișcare butonul de selectare din bara de instrumente de sus pentru a afișa zona glisabilă pe formă. Mutați cilindrul sub bază, așezându-l într-unul din colțuri. (Poate fi necesar să îl mutați în vizualizările de sus, laterale și frontale.)
Duplicați cilindrul (apăsați butonul Duplicat din inelul circular al instrumentelor sau apăsați butonul D tasta) și pentru a muta noul cilindru într-un alt colț al bazei. Repetați procesul până când toate cele patru picioare sunt poziționate corect. Nu uitați să denumiți cilindrii (de exemplu, picioare-stânga-sus, picioare-dreapta-sus, picioare-stânga-jos, picioare-stânga-sus). După ce ați făcut acest lucru, rezultatul ar trebui să arate astfel.
Vom analiza acum crearea platoului, a discului, axa brațului și a butonului. Procesul de creare a următoarelor forme este similar cu cel pentru picioare. Iată dimensiunile utilizate pentru diferiți cilindri:
platou: diam = 7; h = 0,5 disc: diam = 6,75; h = 0,25 buton: diam = 1,5; h = 0,25 braț-axă-bază: diam = 2,25; h = 0,25 axa brațului: diam = 1,375; h = 1
Pentru a rafina laturile cilindrilor, puteți crește numărul de fețe din fiecare, folosind câmpul lateral din panoul de proprietăți. Nu adăugați prea multe părți, deoarece acest lucru poate influența negativ performanța globală a editorului și animația finală. În acest caz, vă sfătuiesc să nu utilizați mai mult de 32 de fețe pentru platou și disc. Ar trebui să ai așa ceva.
Brațul și capul
Pentru braț și capul platoului, vom folosi cuboizi. Pentru braț, creați un cuboid (w = 0,25; h = 0,25; d = 4), apoi aplicați o rotație de -33° pe axa y. Pentru cap, creați un cuboid (w = 0,5; h = 0,5; d = 1), apoi aplicați o rotație de -33° pe axa y. Aliniați ambele forme cu cilindrul axului brațului. Rezultatul ar trebui să arate așa.
Culori și texturi
Aproape am terminat cu platanul. Ultimul pas este să atribuiți culori și să aplicați o textură vinilului (o imagine care reprezintă suprafața discului). Pentru a atribui culori, selectați o formă și faceți clic pe culori din panoul de proprietăți. Tridiv vă permite să specificați culori individuale pentru fiecare față a unei forme, dar, în acest exemplu, trebuie să folosim câmpul all pentru a schimba culoarea tuturor fețelor. Pentru a face acest lucru, introduceți doar un cod de culoare hexagonală în câmp, apoi confirmați apăsând introduce.
Iată culorile utilizate în acest exemplu:
bază: # 0099FF picioare, buton, axă, braț și cap: # F2EEE5 disc: # fa7f7a
Pentru textura vinilului, procesul este similar cu atribuirea culorilor. Selectați cilindrul discului, apoi faceți clic pe imagini din panoul de proprietăți. Lipiți URL-ul imaginii pe care doriți să o aplicați pe vinil în câmpul de sus și confirmați apăsând introduce. Puteți utiliza o imagine proprie sau o puteți descărca pe cea utilizată în acest exemplu.
Ar trebui să aveți acum ceva care arată așa.
Redare și export
Acum, când platoul este terminat, vom lucra la modul în care este redat înainte de a-l exporta. Apasă pe previzualizare din partea de sus a panoului de proprietăți. Setați valoarea zoomului la 200 pentru a afișa platanul mai mare. Pentru a elimina marginile negre ale formelor, accesați Frontiere secțiunea panoului și setați opacitatea la 0. Rezultatul ar trebui să arate cam așa.
Vrem ca platanul să fie luminat de sus. Pentru a face acest lucru, rotiți scena în așa fel încât partea de sus a platoului rotativ să fie orientată către dvs. Baza ar trebui să arate perfect dreptunghiulară. Modificarea valorilor de lumină și întuneric din secțiunea tridiv.com/d/4k6 a panoului de proprietăți va regenera umbrele din scenă. Schimbați valoarea luminii în 0.
Platanul este acum gata de export!
Finalizarea siglei
Suntem gata să adăugăm textul la siglă și să creăm animația siglei. Apasă pe Editați | × pe butonul CodePen din partea stângă jos a previzualizare vizualizare pentru a exporta codul în CodePen. Este important să rețineți că codul CSS generat de Tridiv nu folosește prefixele furnizorului, deci va trebui să utilizați instrumente precum prefixr.com sau leaverou.github.io/prefixfree pentru a face codul funcțional în fiecare browser. Începeți prin închiderea panoului JavaScript, deoarece nu îl vom folosi. În panoul HTML, eliminați eticheta de stil aplicată fișierului .scenă div.
Extindeți panoul CSS și adăugați următorul cod la final:
.scene {transform: translateY (-140px) rotateX (-55deg); }
Aici translateY (-140px) deplasează discul rotativ cu 140 px în sus, lăsând loc textului de sub acesta. Apoi, rotateX (-55deg) setează înclinația verticală a discului rotativ.
Pentru a adăuga textul, trebuie să adăugați un .titlu div imediat după deschidere #tridiv div în panoul HTML. În interior, adăugați două se întinde> (.main-title și .sub-title), separat de hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div> ...
Apoi, trebuie să aplicați fonturile și stilurile corecte. În panoul CSS, importați fontul Open Sans utilizat în siglă și adăugați stilurile de bază pentru elementele de text.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Centrarea blocurilor de text + stiluri de font de bază * / title {poziție: absolută; top: 50%; stânga: 50%; margine: 0 0 0 -165px; lățime: 330px; înălțime: 5em; font-family: „Open Sans”, sans-serif; greutate-font: 300; dimensiunea fontului: 24px; text-align: centru; spațierea literelor: 1,5em; culoare: # 0099FF; } title hr {border: 1px solid # fa7f7a; marja: .75em 0; } span de titlu {display: block; } .main-title {font-size: 2.15em; } .sub-title {text-indent: .25em; }
Voilà! Sigla dvs. este completă. Ar trebui să arate ca imaginea de mai jos. După ce ați terminat modelul 3D, puteți utiliza puterea CSS pentru a-l îmbunătăți și mai mult prin adăugarea de stiluri, animații sau evenimente de mouse: pur și simplu tratați modelul 3D ca orice alt element HTML.
Animează sigla
Vedeți o animație folosind logo-ul aici. Pe măsură ce părțile platoului rotativ „cad”, fiecare dintre ele împarte aceeași animație a cadrului cheie cu întârzieri diferite. Formele au atributul de sus setat la 50%. Pentru a crea efectul de cădere, animăm atributul de sus din -400px la 50%:
@keyframes cad {0% {top: -400px; } / * Începem animația poziționând forma la o înălțime de 400px * / 100% {top: 50%; } / * apoi îl încheiem în poziția sa inițială * /}
Puteți adăuga această animație la toate formele, după cum urmează:
.shape {top: -400px; animație: toamnă 1s ușurează 0s înainte; }
Setați atributul de sus la -400px și adăugați o întârziere:
.platter {animation-delay: 1.05s; } .disc {animation-delay: 1.35s; } .button {animation-delay: 1.5s; } ...
Creați efectul final de „bounce” folosind rotireX atribut:
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); }
Așa am creat această versiune specială, dar nu uitați: nu există limite!
Cuvinte: Julian Garnier
Acest articol a apărut inițial în numărul 248 al revistei net.
