Tartalom
- Elkezdeni
- A lemezjátszó alapjának létrehozása
- A láb létrehozása
- A kar és a fej
- Színek és textúrák
- Rendering és exportálás
- A logó befejezése
- Animálja a logót
A 3D-s animáció weben történő létrehozásának többféle módja van, ezek többségéhez a JavaScript és a WebGL jó ismerete, vagy egy olyan plug-in használata szükséges, mint a Flash. A CSS 3D transzformációknak köszönhetően csak HTML és CSS használatával lehet 3D-t létrehozni, de ezt nem könnyű megtenni. A Tridiv, az ingyenes online alkalmazásom, leegyszerűsíti a folyamatot, egyszerű és intuitív WYSIWYG felületet kínálva, amely lehetővé teszi a felhasználók számára, hogy 3D objektumokat hozzanak létre egyetlen kódsor megírása nélkül.
Ebben az oktatóanyagban létrehozunk és animálunk egy logót a „Tridiv Records”, egy kitalált lemezkiadó számára, csak HTML és CSS használatával. A logó fő látványtervét 3D-ben, a Tridiv segítségével készítjük. Ezután hozzáadjuk a tipográfiai elemeket a szokásos HTML és CSS használatával.
A végső animációt és az azt létrehozó kódot itt láthatja.
Elkezdeni
Kezdjük azzal, hogy a Tridiv segítségével 3D-ben elkészítjük a lemezjátszót. Irány a tridiv.com, és indítsa el az alkalmazást. A Chrome, a Safari vagy az Opera 15 (vagy újabb) verziót kell használnia.
Indulás előtt fontos megérteni a Tridiv felületét. A szerkesztő fő része négy nézetből áll: a bal felső sarokban található a 3D nézet, amely teljes képet nyújt a jelenetről. A másik három nézet felülről, oldalról és elöl mutatja. E három nézet segítségével létrehozhat, szerkeszthet és áthelyezhet 3D alakzatokat.
A vízszintes eszköztár két részre oszlik: a bal oldalon a dokumentummal kapcsolatos információk láthatók; a jobb rész tartalmaz formákat létrehozó és szerkesztő eszközöket. A Mozog kiválasztás és Szerkesztés a választógombok a különböző szerkesztési módok között válthatnak.
A Tulajdonságok ablaktáblán (az oldalsávon) megjelennek a dokumentum beállításai, például a nagyítás és a rácsra igazítás, valamint a kiválasztott alak tulajdonságai (méret, helyzet, elforgatás, szín stb.). A méretekhez és helyzethez használt egység az ems; a forgási szögek fokban vannak.
Az oktatóanyag későbbi félreértéseinek elkerülése érdekében a következő rövidítést fogjuk használni:
w = szélesség h = magasság d = mélység átmérő = átmérő x deg = forgás az x tengelyen y deg = forgás az y tengelyen z deg = forgás a z tengelyen
A lemezjátszó alapjának létrehozása
Kezdje azzal, hogy a nagyítás értékét 200-ra állítja. A formák rajzolásának elősegítése érdekében aktiválja a rácshoz történő igazítás beállítást a Dokumentum beállításai szakasz az oldalsávon. Állítsa a bepattintási értéket 0.125.
A lemezjátszó alja egy egyszerű négyszögből áll, ezért kattintson a gombra Adjon kockacsőt gombra a felső eszköztáron. A négyszög megjelenik a szerkesztő mind a négy nézetében.
Nevezze át az alakzatot a következőre: bázis a tulajdonságok ablaktábla névmezőjének használatával ( Alak tulajdonságai). Az alakzat nevének érvényes CSS osztálynévnek kell lennie, mert a szerkesztő által generált kódban fogja használni. Ezeket az osztályneveket később fogjuk használni, amikor animáljuk a logót, ezért ügyeljen arra, hogy minden megfelelő alakot megnevezzen.
Miután a négyszöget elnevezte, ellenőrizze, hogy a felső nézetben van-e kiválasztva (kék színnel kell kiemelni, körkörös szerszámgyűrűvel körülötte), majd kattintson a Szerkesztés gombot a gyűrű tetején a szerkesztő fogantyúk megjelenítéséhez. Húzza a vezérlőfogantyúkat a téglalap oldalán, amíg a szélesség és a mélység el nem éri w = 10 és d = 8 ban,-ben Alak tulajdonságai.
Kattintson az alakra az oldalnézetben. Ez megmutatja a szerkesztési fogantyúkat ebben a nézetben, lehetővé téve számunkra a magasság megváltoztatását. Állítsa be a magasságot, amíg el nem éri h = 2. Az értékeket közvetlenül a tulajdonságok ablaktáblába is beírhatja. A négyszög sarkainak lekerekítéséhez állítsa a tulajdonságok ablaktábla sarkainak értékét a következőre: 1.75, majd nyomja meg a gombot [Belép] gombot a változtatások alkalmazásához. Valami ilyesmi lesz.
A láb létrehozása
A forgótányér lábaihoz hengereket fogunk használni. Adjon hozzá egy hengert, majd állítsa át az átmérőjét diam = 1,75 és magassága h = 0,5. Kattintson a Mozog választógomb a felső eszközsoron az alakzat húzható területének megjelenítéséhez. Vigye a hengert az alap alá, helyezze az egyik sarokba. (Lehet, hogy a felső, az oldalsó és az elülső nézetben kell mozgatnia.)
Másolja a hengeret (nyomja meg a gombot Másolat gombot az eszközök körgyűrűjében, vagy nyomja meg a gombot D kulcs) és az új henger áthelyezéséhez az alap másik sarkába. Ismételje meg a folyamatot, amíg mind a négy láb helyesen nem lesz. Ne felejtse el megnevezni a hengereket (például láb-bal-felső, láb-jobb-felső, láb-bal-alsó, láb-bal-felső). Ha ezt megtette, az eredménynek így kell kinéznie.
Most megvizsgáljuk a tál, a korong, a kar tengelyének és gombjának létrehozását. A következő alakzatok létrehozásának folyamata hasonló a lábakéhoz. Itt vannak a különböző hengerekhez használt méretek:
tál: átm = 7; h = 0,5 korong: átm = 6,75; h = 0,25 gomb: átm = 1,5; h = 0,25 kar-tengely-alap: átm = 2,25; h = 0,25 kar-tengely: átm = 1,375; h = 1
A hengerek oldalainak finomításához növelheti az egyes oldalak számát a tulajdonságok ablaktábla oldalsó mezőjének használatával. Ne adjon túl sok oldalt, mert ez negatívan befolyásolhatja a szerkesztő és a végső animáció globális teljesítményét. Ebben az esetben azt tanácsolom, hogy ne használjon 32-nél több oldalt a tálhoz és a lemezhez. Kellene valami ilyesmi.
A kar és a fej
A lemezjátszó karjához és fejéhez cuboidokat fogunk használni. A karhoz hozzon létre egy négyszöget (w = 0,25; h = 0,25; d = 4), majd alkalmazza a -33° a y tengely. A fejhez hozzon létre egy négyszöget (w = 0,5; h = 0,5; d = 1), majd alkalmazza a -33° a y tengely. Igazítsa mindkét alakzatot a kartengelyes hengerhez. Az eredménynek így kell kinéznie.
Színek és textúrák
Már majdnem készen vagyunk a lemezjátszóval. Az utolsó lépés a színek kijelölése és a textúra felvitele a vinilre (a lemez felületét ábrázoló kép). Színek hozzárendeléséhez válasszon ki egy alakzatot, és kattintson a gombra színek mező a tulajdonságok ablaktáblában. A Tridiv lehetővé teszi egyedi színek megadását az alakzatok minden arcához, de ebben a példában az összes mezőt kell használnunk az arcok színének megváltoztatására. Ehhez csak írjon be egy hexadecimális színkódot a mezőbe, majd erősítse meg a megnyomásával Belép.
Itt vannak a példában használt színek:
alap: # 0099FF láb, gomb, tengely, kar és fej: # F2EEE5 lemez: # fa7f7a
A vinil textúrája szempontjából a folyamat hasonló a színek hozzárendeléséhez. Válassza ki a tárcsahengert, majd kattintson a gombra képek mező a tulajdonságok ablaktáblában. A felső mezőbe illessze be a vinylre alkalmazni kívánt kép URL-jét, és nyomja meg a megnyomásával Belép. Használhat saját képet, vagy letöltheti az ebben a példában használt képet.
Most kellene valami, ami így néz ki.
Rendering és exportálás
Most, hogy elkészült a lemezjátszó, az exportálás előtt dolgozni fogunk a renderelés módján. Kattints a Előnézet gombra a tulajdonságok ablaktábla tetején. Állítsa a zoom értékét 200 hogy nagyobb legyen a lemezjátszó. Az alakzatok fekete szegélyeinek eltávolításához lépjen a Határok szakaszát, és állítsa az átlátszatlanságot 0. Az eredménynek ilyennek kell kinéznie.
Azt akarjuk, hogy a lemezjátszó felülről világítson. Ehhez forgassa el a jelenetet úgy, hogy a lemezjátszó teteje felfelé nézzen. Az alapnak tökéletesen téglalap alakúnak kell lennie. A tulajdonságok ablaktábla tridiv.com/d/4k6section világos és sötét értékeinek megváltoztatásával az árnyékok újraképződnek a jeleneten belül. Változtassa meg a fényértéket 0.
A lemezjátszó készen áll az exportálásra!
A logó befejezése
Készen állunk a szöveg hozzáadására a logóhoz és az animáció létrehozására. Kattints a Szerkesztés a CodePen gombra a Előnézet nézetet a kód CodePen-be történő exportálásához. Fontos megjegyezni, hogy a Tridiv által generált CSS-kód nem használ szállítói előtagokat, ezért olyan eszközöket kell használnia, mint a prefixr.com vagy a leaverou.github.io/prefixfree annak érdekében, hogy a kód működőképes legyen minden böngészőben. Kezdje a JavaScript ablaktábla bezárásával, mivel nem fogjuk használni. A HTML ablaktáblában távolítsa el a .színhely div.
Bontsa ki a CSS ablaktáblát, és adja hozzá a következő kódot a végén:
. jelenet {transzformáció: fordításY (-140 képpont) rotateX (-55deg); }
Itt a fordításY (-140px) a lemezjátszót 140px-rel felfelé mozgatja, helyet hagyva az alatta lévő szövegnek. Aztán a rotateX (-55deg) beállítja a forgótányér függőleges dőlését.
A szöveg hozzáadásához hozzá kell adnia a .cím div közvetlenül a nyitás után #tridiv div a HTML ablaktáblában. Belül adj hozzá kettőt átível> (.main-cím és .sub-title), elválasztva óra />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…
Ezután a megfelelő betűtípusokat és stílusokat kell alkalmaznia. A CSS ablaktáblában importálja a logóban használt Open Sans betűtípust, és adja hozzá a szövegelemek alapstílusait.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Szövegblokk központosítás + alapvető betűtípusok * / title {pozíció: abszolút; teteje: 50%; maradt: 50%; margó: 0 0 0 -165px; szélesség: 330 képpont; magasság: 5em; font-family: ’Nyílt Sans’, sans-serif; betű súlya: 300; betűméret: 24 képpont; text-align: center; levélköz: 1,5em; szín: # 0099FF; } title hr {határ: 1px szilárd # fa7f7a; margó: .75em 0; } címtartomány {display: block; } .main-title {font-size: 2.15em; } .subcím {text-behúzás: .25em; }
Voálá! Logója elkészült. Úgy kell kinéznie, mint az alábbi kép. Miután elkészült a 3D-s modellje, használhatja a CSS erejét, hogy stílusokat, animációkat vagy egéreseményeket hozzáadva még jobbá tegye: egyszerűen kezelje a 3D-modellt, mint bármely más HTML-elemet.
Animálja a logót
Itt láthat egy animációt a logóval. Amint a lemezjátszó részei „beesnek”, mindegyik ugyanazzal a kulcsképes animációval rendelkezik, különböző késésekkel. Az alakzatok felső attribútuma a 50%. A zuhanó hatás létrehozásához animáljuk a legfelső attribútumot -400px nak nek 50%:
@ kulcsképek esnek {0% {top: -400px; } / * Elkezdjük az animációt úgy, hogy az alakzatot 400px magasságba állítsuk * / 100% {top: 50%; } / *, majd az eredeti helyzetén véget vessünk * /}
Hozzáadhatja ezt az animációt az összes alakzathoz az alábbiak szerint:
.shape {top: -400px; animáció: az 1-es esés megkönnyíti a 0-asokat előre; }
Állítsa a legfelső attribútumot -400px és adj hozzá egy késleltetést:
.platter {animáció-késleltetés: 1.05s; } .disc {animáció-késleltetés: 1.35s; } .gomb {animációs késleltetés: 1,5 másodperc; } ...
Hozza létre a végső ’visszafordulás’ effektust a forgassaX tulajdonság:
90% {átalakítás: fordításY (-5em) rotateX (780deg) rotateY (0deg); } 95% {transzformáció: fordításY (-4em) rotateX (620deg) rotateY (0deg); } 100% {átalakítás: fordításY (-4,5em) rotateX (660deg) rotateY (0deg); }
Így hoztuk létre ezt a bizonyos verziót, de ne feledje: nincsenek korlátok!
Szavak: Julian Garnier
Ez a cikk eredetileg a net magazin 248. számában jelent meg.
