Saturs
- Darba sākšana
- Veidošanas pamatnes izveide
- Pēdu izveidošana
- Roka un galva
- Krāsas un faktūras
- Atveidošana un eksportēšana
- Pabeidz logotipu
- Animējiet logotipu
3D animācijas izveidošanai tīmeklī ir vairāki veidi, no kuriem lielākoties ir nepieciešamas labas JavaScript un WebGL zināšanas vai jāizmanto spraudnis, piemēram, Flash. Pateicoties CSS 3D transformācijām, ir iespējams izveidot 3D, izmantojot tikai HTML un CSS, taču to nav viegli izdarīt. Tridiv, mana bezmaksas tiešsaistes lietotne, vienkāršo procesu, piedāvājot vienkāršu un intuitīvu WYSIWYG saskarni, kas lietotājiem ļauj izveidot 3D objektus, nerakstot vienu koda rindiņu.
Šajā apmācībā mēs izveidosim un animēsim izdomātas ierakstu etiķetes “Tridiv Records” logotipu, izmantojot tikai HTML un CSS. Galvenais logotipa vizuālais materiāls tiks izveidots 3D formātā, izmantojot programmu Tridiv. Tad mēs pievienosim tipogrāfiskos elementus, izmantojot parasto HTML un CSS.
Šeit varat redzēt galīgo animāciju un kodu, kas to ģenerē.
Darba sākšana
Vispirms mēs izveidosim atskaņotāju 3D formātā, izmantojot programmu Tridiv. Dodieties uz vietni tridiv.com un palaidiet lietotni. Jums būs jāizmanto Chrome, Safari vai Opera 15 (vai jaunāka versija).
Pirms sākat, ir svarīgi saprast Tridiv saskarni. Redaktora galveno sadaļu veido četri skati: augšējā kreisajā stūrī ir 3D skats, kas nodrošina pilnīgu ainas skatu. Pārējie trīs skati to parāda no augšas, sāniem un priekšpuses. Izmantojot šos trīs skatus, varat izveidot, rediģēt un pārvietot 3D formas.
Horizontālā rīkjosla ir sadalīta divās daļās: kreisajā daļā tiek parādīta informācija, kas attiecas uz jūsu dokumentu; labajā daļā ir rīki figūru izveidei un rediģēšanai. The Pārvietot atlase un Rediģēt izvēles pogas pārslēdzas starp dažādiem rediģēšanas režīmiem.
Rekvizītu rūtī (sānjoslā) tiek parādīti dokumenta iestatījumi, piemēram, tālummaiņa un pieskāriens režģim, kā arī atlasītās formas īpašības (izmērs, pozīcija, pagriešana, krāsa utt.). Izmēriem un novietojumam izmantotā vienība ir ems; rotācijas leņķi ir grādos.
Lai izvairītos no neskaidrībām vēlāk apmācībā, mēs izmantosim šādu stenogrammu:
w = platums h = augstums d = dziļums diam = diametrs x deg = pagrieziens x asī y deg = pagrieziens y asī z deg = pagrieziens z asī
Veidošanas pamatnes izveide
Sāciet ar tālummaiņas vērtības iestatīšanu uz 200. Lai palīdzētu uzzīmēt formas, aktivizējiet režģa snap iestatījumu Dokumenta iestatījumi sānjoslas sadaļa. Iestatiet snap vērtību 0.125.
Galda pamatne sastāv no vienkārša taisnstūra, tāpēc noklikšķiniet uz Pievienojiet taisnstūri pogu augšējā rīkjoslā. Redaktorā visos četros skatos vajadzētu būt redzamam četrstūrim.
Pārdēvējiet formu uz bāze izmantojot rekvizītu rūts nosaukuma lauku (zem Formas īpašības). Formas nosaukumam ir jābūt derīgam CSS klases nosaukumam, jo tas tiks izmantots redaktora ģenerētajā kodā. Šos klases nosaukumus mēs izmantosim vēlāk, animējot logotipu, tāpēc pārliecinieties, ka nosaucat katru jauno veidolu, kuru izveidojat pareizi.
Kad kvadrats ir nosaukts, pārliecinieties, vai tas ir atlasīts augšējā skatā (tas jāizceļ zilā krāsā ar apļveida instrumentu gredzenu ap to), pēc tam noklikšķiniet uz Rediģēt poga gredzena augšdaļā, lai parādītu rediģēšanas rokturus. Velciet vadības rokturus taisnstūra malās, līdz sasniedz platumu un dziļumu w = 10 un d = 8 iekš Formas īpašības.
Sānskatā noklikšķiniet uz formas. Tas parādīs rediģēšanas rokturus šajā skatā, ļaujot mums mainīt tā augstumu. Noregulējiet augstumu, līdz tas sasniedz h = 2. Varat arī ierakstīt vērtības tieši rekvizītu rūtī. Lai noapaļotu taisnstūra stūrus, rekvizītu rūtī mainiet stūru vērtības uz 1.75, tad nospiediet [Enter] taustiņu, lai piemērotu izmaiņas. Jums būs kaut kas līdzīgs šim.
Pēdu izveidošana
Rotējošā galda kājām mēs izmantosim cilindrus. Pievienojiet cilindru, pēc tam mainiet tā diametru uz diam = 1,75 un tā augstums līdz h = 0,5. Noklikšķiniet uz Pārvietot atlases poga augšējā rīkjoslā, lai parādītu formas velkamo laukumu. Pārvietojiet cilindru zem pamatnes, ievietojot to vienā no stūriem. (Jums var būt nepieciešams to pārvietot augšējā, sānu un priekšējā skatā.)
Dublējiet cilindru (nospiediet Dublikāts pogu apļveida rīku gredzenā vai nospiediet D taustiņu) un pārvietot jauno cilindru uz citu pamatnes stūri. Atkārtojiet procesu, līdz visas četras kājas ir pareizi novietotas. Neaizmirstiet nosaukt cilindrus (piemēram, pēdas-kreisais-augšējais, pēdas-labais-augšējais, pēdas-kreisais-apakšējais, pēdas-kreisais-augšējais). Kad esat to izdarījis, rezultātam vajadzētu izskatīties šādi.
Tagad mēs aplūkosim šķīvja, diska, rokas ass un pogas izveidi. Nākamo formu veidošanas process ir līdzīgs kā pēdām. Šeit ir norādīti dažādu cilindru izmēri:
šķīvis: diam = 7; h = 0,5 disks: diam = 6,75; h = 0,25 poga: diam = 1,5; h = 0,25 rokas ass ass: diam = 2,25; h = 0,25 rokas ass: diam = 1,375; h = 1
Lai uzlabotu cilindru malas, varat palielināt seju skaitu katrā no tām, izmantojot rekvizītu rūts sānu lauku. Nepievienojiet pārāk daudz sānu, jo tas var negatīvi ietekmēt redaktora globālo sniegumu un galīgo animāciju. Šajā gadījumā es iesaku paplātei un diskam neizmantot vairāk par 32 malām. Jums vajadzētu būt kaut kam līdzīgam.
Roka un galva
Plašu atskaņotāja rokai un galvai mēs izmantosim kuboidus. Rokai izveidojiet kuboidu (w = 0,25; h = 0,25; d = 4), pēc tam izmantojiet rotāciju -33° uz y ass. Galvai izveidojiet kuboidu (w = 0,5; h = 0,5; d = 1), pēc tam izmantojiet rotāciju -33° uz y ass. Izlīdziniet abas formas ar rokas ass cilindru. Rezultātam vajadzētu izskatīties šādi.
Krāsas un faktūras
Mēs gandrīz esam pabeiguši atskaņotāju. Pēdējais solis ir krāsu piešķiršana un vinila uzklāšana ar tekstu (attēls, kas attēlo ieraksta virsmu). Lai piešķirtu krāsas, atlasiet formu un noklikšķiniet uz krāsas rekvizītu rūtī. Tridiv ļauj jums norādīt atsevišķas krāsas katrai formas sejai, taču šajā piemērā mums ir jāizmanto viss lauks, lai mainītu visu seju krāsu. Lai to izdarītu, vienkārši ievadiet laukā sešstūra krāsas kodu, pēc tam apstipriniet, nospiežot Enter.
Šajā piemērā tiek izmantotas krāsas:
pamatne: # 0099FF kājas, poga, ass, roka un galva: # F2EEE5 disks: # fa7f7a
Vinila tekstūrai process ir līdzīgs krāsu piešķiršanai. Atlasiet diska cilindru un pēc tam noklikšķiniet uz attēlus rekvizītu rūtī. Augšējā laukā ielīmējiet tā URL URL, kuru vēlaties lietot vinilam, un apstipriniet, nospiežot Enter. Varat izmantot savu attēlu vai lejupielādēt šajā piemērā izmantoto attēlu.
Jums tagad vajadzētu būt kaut kam, kas izskatās šādi.
Atveidošana un eksportēšana
Tagad, kad atskaņotājs ir pabeigts, mēs strādāsim pie tā, kā tas tiek sniegts, pirms tā eksportēšanas. Noklikšķiniet uz Priekšskatījums poga rekvizītu rūts augšdaļā. Iestatiet tālummaiņas vērtību uz 200 lai atskaņotāju parādītu lielāku. Lai noņemtu figūru melnās apmales, dodieties uz Robežas sadaļu un iestatiet necaurredzamību uz 0. Rezultātam vajadzētu izskatīties apmēram šādi.
Mēs vēlamies, lai atskaņotāju apgaismo no augšas. Lai to izdarītu, pagrieziet ainu tā, lai pagrieziena galda augšdaļa būtu vērsta pret jums. Pamatnei vajadzētu izskatīties pilnīgi taisnstūrveida. Gaišo un tumšo vērtību maiņa rekvizītu rūts tridiv.com/d/4k6sekcijā atjaunos ainas sižetā. Mainiet gaismas vērtību uz 0.
Plašu atskaņotājs tagad ir gatavs eksportēšanai!
Pabeidz logotipu
Mēs esam gatavi pievienot tekstu logotipam un izveidot logotipa animāciju. Noklikšķiniet uz Rediģēt uz pogas CodePen ekrāna apakšējā kreisajā stūrī Priekšskatījums eksportēt kodu uz CodePen. Ir svarīgi atzīmēt, ka Tridiv ģenerētajā CSS kodā netiek izmantoti pārdevēja prefiksi, tāpēc jums būs jāizmanto tādi rīki kā prefixr.com vai leaverou.github.io/prefixfree, lai kods būtu funkcionāls katrā pārlūkprogrammā. Vispirms aizveriet JavaScript rūti, jo mēs to neizmantosim. HTML rūtī noņemiet stilam pievienoto tagu . aina div.
Izvērsiet CSS rūti un beigās pievienojiet šādu kodu:
. aina {pārveidot: tulkotY (-140px) rotateX (-55deg); }
Lūk, tulkotY (-140 pikseļi) pārvieto atskaņotāju 140 pikseļus uz augšu, atstājot vietu zem tā esošajam tekstam. Tad, rotateX (-55deg) nosaka pagrieziena galda vertikālo slīpumu.
Lai pievienotu tekstu, jums jāpievieno a .nosaukums div uzreiz pēc atvēršanas #tridiv div HTML rūtī. Iekšpusē pievienojiet divus laidumi> (.main-title un .sub-title), atdalīts ar hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…
Pēc tam jums jāpielieto pareizie fonti un stili. CSS rūtī importējiet logotipā izmantoto fontu Open Sans un pievienojiet teksta elementu pamatstilus.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Teksta bloka centrēšana + fontu stili * / title {pozīcija: absolūts; augšdaļa: 50%; pa kreisi: 50%; starpība: 0 0 0 -165px; platums: 330 pikseļi; augstums: 5em; fontu ģimene: ‘Open Sans’, sans-serif; fonta svars: 300; fonta lielums: 24 pikseļi; text-align: center; burtu atstarpe: 1,5em; krāsa: # 0099FF; } title hr {border: 1px solid # fa7f7a; starpība: .75em 0; } virsraksta laidums {display: block; } .main-title {font-size: 2.15em; } .sadaļa {teksta ievilkums: .25em; }
Voilà! Jūsu logotips ir pabeigts. Tam vajadzētu izskatīties apmēram kā zemāk redzamais attēls. Kad jūsu 3D modelis ir pabeigts, varat izmantot CSS spēku, lai to padarītu vēl labāku, pievienojot stilus, animācijas vai peles notikumus: vienkārši rīkojieties ar 3D modeli tāpat kā pret jebkuru citu HTML elementu.
Animējiet logotipu
Šeit skatiet animāciju, izmantojot logotipu. Kad atskaņotājdaļas daļas iekrīt, katrai no tām ir viena un tā pati kadra animācija ar atšķirīgu kavēšanos. Formām ir iestatīts augšējais atribūts 50%. Lai radītu krītošo efektu, mēs animējam augšējo atribūtu no -400px uz 50%:
@ atslēgkadri samazinās par {0% {top: -400px; } / * Mēs sākam animāciju, pozicionējot formu līdz 400 pikseļu augstumam * / 100% {top: 50%; } / *, tad mēs to izbeidzam sākotnējā pozīcijā * /}
Šo animāciju varat pievienot visām formām šādi:
. forma {top: -400px; animācija: 1. kritiens atvieglo 0s uz priekšu; }
Iestatiet augšējo atribūtu uz -400px un pievienojiet kavēšanos:
.platter {animācijas aizkave: 1,05 s; } .disc {animācijas aizkave: 1,35 s; } .poga {animācijas aizkave: 1,5 s; } ...
Izveidojiet galīgo atlēciena efektu, izmantojot pagrieztX atribūts:
90% {pārveidot: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {pārveidot: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {pārveidot: translateY (-4,5em) rotateX (660deg) rotateY (0deg); }
Tā mēs izveidojām šo konkrēto versiju, taču atcerieties: nav ierobežojumu!
Vārdi: Džulians Garnjē
Šis raksts sākotnēji tika parādīts 248. izdevuma žurnālā.
