Obsah
- Začínáme
- Vytvoření základny točny
- Vytváření nohou
- Paže a hlava
- Barvy a textury
- Rendrování a export
- Dokončení loga
- Animujte logo
Existuje několik způsobů, jak vytvořit 3D animaci na webu, přičemž většina z nich vyžaduje dobrou znalost JavaScriptu a WebGL nebo použití zásuvného modulu jako Flash. Díky transformacím CSS 3D je možné vytvářet 3D pouze pomocí HTML a CSS, ale není to snadné. Tridiv, moje bezplatná online aplikace, zjednodušuje proces a nabízí jednoduché a intuitivní rozhraní WYSIWYG, které umožňuje uživatelům vytvářet 3D objekty bez psaní jediného řádku kódu.
V tomto tutoriálu se chystáme vytvořit a animovat logo fiktivní nahrávací společnosti Tridiv Records pouze pomocí HTML a CSS. Hlavní vizuál loga bude vytvořen ve 3D pomocí Tridivu. Potom přidáme typografické prvky pomocí běžných HTML a CSS.
Zde můžete vidět finální animaci a kód, který ji generuje.
Začínáme
Začneme vytvořením gramofonu ve 3D pomocí Tridivu. Přejděte na tridiv.com a spusťte aplikaci. Budete muset používat Chrome, Safari nebo Opera 15 (nebo novější).
Než začnete, je důležité porozumět rozhraní Tridiv. Hlavní část editoru se skládá ze čtyř pohledů: vlevo nahoře je 3D pohled, který poskytuje kompletní pohled na scénu. Ostatní tři pohledy to ukazují shora, ze strany a zepředu. Pomocí těchto tří pohledů můžete vytvářet, upravovat a přesouvat 3D tvary.
Vodorovný panel nástrojů je rozdělen na dvě části: levá část zobrazuje informace týkající se vašeho dokumentu; pravá část obsahuje nástroje pro vytváření a úpravy tvarů. The Hýbat se výběr a Upravit tlačítka výběru přepínají mezi různými režimy úprav.
Podokno vlastností (postranní panel) zobrazuje nastavení dokumentu, jako je přiblížení a přichycení k mřížce, a vlastnosti vybraného tvaru (velikost, poloha, rotace, barva atd.). Jednotkou používanou pro rozměry a polohu je ems; úhly otočení jsou ve stupních.
Abychom se později v tutoriálu vyhnuli nejasnostem, použijeme následující zkratku:
w = šířka h = výška d = hloubka průměr = průměr x deg = otáčení v ose x y deg = otáčení v ose y z deg = otáčení v ose z
Vytvoření základny točny
Začněte nastavením hodnoty přiblížení na 200. Chcete-li kreslit tvary, aktivujte nastavení Přichytit k mřížce v Nastavení dokumentu část postranního panelu. Nastavte hodnotu uchopení na 0.125.
Základna točny se skládá z jednoduchého kvádru, takže klikněte na Přidejte kvádr na horním panelu nástrojů. Měli byste vidět kvádr objevit se ve všech čtyřech pohledech v editoru.
Přejmenujte tvar na základna pomocí pole názvu v podokně vlastností (pod Vlastnosti tvaru). Název tvaru musí být platný název třídy CSS, protože bude použit v kódu generovaném editorem. Tyto názvy tříd použijeme později při animaci loga, takže nezapomeňte správně pojmenovat každý nový tvar, který vytvoříte.
Jakmile je kvádr pojmenován, ujistěte se, že je vybrán v pohledu shora (měl by být zvýrazněn modře, kolem něj kruhový kruh nástrojů), poté klikněte na Upravit tlačítko v horní části kruhu pro zobrazení úchytů pro úpravy. Přetáhněte ovládací úchyty po stranách kvádru, dokud nedosáhnou šířky a hloubky w = 10 a d = 8 v Vlastnosti tvaru.
Klikněte na tvar uvnitř bočního pohledu. Zobrazí se úchyty pro úpravy v tomto zobrazení, což nám umožní změnit jeho výšku. Upravte výšku, dokud nedosáhne h = 2. Můžete také zadat hodnoty přímo do podokna vlastností. Chcete-li zaoblit rohy kvádru, změňte hodnoty rohů v podokně vlastností na 1.75, poté stiskněte [Enter] klíč k provedení změn. Něco takového budete mít.
Vytváření nohou
Pro nohy točny použijeme válce. Přidejte válec a poté změňte jeho průměr na průměr = 1,75 a jeho výška do h = 0,5. Klikněte na Hýbat se tlačítko pro výběr na horním panelu nástrojů pro zobrazení přetahovatelné oblasti ve tvaru. Přesuňte válec pod základnu a umístěte jej do jednoho z rohů. (Možná jej budete muset přesunout v horním, bočním a čelním pohledu.)
Duplikujte válec (stiskněte Duplikát na kruhovém prstenci nástrojů nebo stiskněte tlačítko D ) a přesunout nový válec do jiného rohu základny. Opakujte postup, dokud nejsou všechny čtyři nohy správně umístěny. Nezapomeňte pojmenovat válce (například nohy vlevo nahoře, nohy vpravo nahoře, nohy vlevo dole, nohy vlevo nahoře). Po dokončení by měl výsledek vypadat takto.
Nyní se podíváme na vytvoření talíře, disku, osy ramene a tlačítka. Proces vytváření dalších tvarů je podobný jako u nohou. Zde jsou rozměry použité pro různé válce:
talíř: průměr = 7; h = 0,5 disk: průměr = 6,75; h = 0,25 tlačítko: průměr = 1,5; h = 0,25 základna osy paže: průměr = 2,25; h = 0,25 osa paže: průměr = 1,375; h = 1
Chcete-li upřesnit strany válců, můžete zvýšit počet ploch v každé z nich pomocí pole Strany v podokně vlastností. Nepřidávejte příliš mnoho stran, protože to může negativně ovlivnit globální výkon editoru a konečnou animaci. V takovém případě vám doporučuji nepoužívat více než 32 stran pro talíř a disk. Něco takového byste měli mít.
Paže a hlava
Pro paži a hlavu točny použijeme kvádry. Pro paži vytvořte kvádr (w = 0,25; h = 0,25; d = 4), poté použijte otočení o -33° na osa y. Pro hlavu vytvořte kvádr (w = 0,5; h = 0,5; d = 1), poté použijte otočení o -33° na osa y. Zarovnejte oba tvary s válcem osy paže. Výsledek by měl vypadat takto.
Barvy a textury
S gramofonem jsme téměř hotoví. Posledním krokem je přiřazení barev a nanesení textury na vinyl (obrázek představující povrch záznamu). Chcete-li přiřadit barvy, vyberte tvar a klikněte na ikonu barvy pole v podokně vlastností. Tridiv umožňuje určit jednotlivé barvy pro každou plochu tvaru, ale v tomto příkladu musíme ke změně barvy všech ploch použít pole vše. Chcete-li to provést, zadejte do pole hexadecimální barevný kód a potvrďte stisknutím Enter.
Zde jsou barvy použité v tomto příkladu:
základna: # 0099FF nohy, tlačítko, osa, paže a hlava: # disk F2EEE5: # fa7f7a
U textury vinylu je proces podobný přiřazování barev. Vyberte válec disku a klikněte na snímky pole v podokně vlastností. Vložte adresu URL obrázku, který chcete použít na vinyl, do horního pole a potvrďte stisknutím Enter. Můžete použít vlastní obrázek nebo si stáhnout obrázek použitý v tomto příkladu.
Nyní byste měli mít něco, co vypadá takto.
Rendrování a export
Nyní, když je gramofon hotový, budeme před exportováním pracovat na způsobu, jakým je vykreslen. Klikněte na ikonu Náhled tlačítko v horní části podokna vlastností. Nastavte hodnotu zvětšení na 200 pro větší zobrazení gramofonu. Chcete-li odstranit černé ohraničení tvarů, přejděte na ikonu Hranice části podokna a nastavte neprůhlednost na 0. Výsledek by měl vypadat asi takto.
Chceme, aby byl gramofon osvětlen shora. Chcete-li to provést, otočte scénu tak, aby horní část gramofonu směřovala k vám. Základna by měla vypadat dokonale obdélníková. Změna hodnot světla a tmy v sekci tridiv.com/d/4k6 v podokně vlastností obnoví stíny ve scéně. Změňte hodnotu světla na 0.
Točna je nyní připravena k exportu!
Dokončení loga
Jsme připraveni přidat text k logu a vytvořit animaci loga. Klikněte na ikonu Upravit na tlačítku CodePen vlevo dole na Náhled pohled na export kódu do CodePen. Je důležité si uvědomit, že kód CSS generovaný společností Tridiv nepoužívá předpony dodavatelů, takže k zajištění funkčnosti kódu v každém prohlížeči budete muset použít nástroje jako prefixr.com nebo leaverou.github.io/prefixfree. Začněte tím, že zavřete podokno JavaScript, protože ho nebudeme používat. V podokně HTML odeberte značku stylu použitou pro .scéna div.
Rozbalte podokno CSS a na konci přidejte následující kód:
.scene {transformace: translateY (-140px) rotateX (-55deg); }
Tady přeložitY (-140px) posune gramofon o 140 pixelů nahoru a ponechá prostor pro text pod ním. Poté rotateX (-55deg) nastavuje svislý sklon točny.
Chcete-li přidat text, musíte přidat a .titul div hned po otevření #tridiv div v podokně HTML. Uvnitř přidejte dva rozpětí> (.hlavní název a .podtitul), oddělené hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…
Poté musíte použít správná písma a styly. V podokně CSS importujte písmo Open Sans použité v logu a přidejte základní styly pro textové prvky.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Centrování textového bloku + základní styly písma * / nadpis {pozice: absolutní; horní část: 50%; vlevo: 50%; okraj: 0 0 0 -165px; šířka: 330px; výška: 5em; rodina fontů: „Open Sans“, sans-serif; váha písma: 300; velikost písma: 24px; zarovnání textu: na střed; řádkování: 1,5em; barva: # 0099FF; } název hr {border: 1px solid # fa7f7a; rozpětí: 0,75 em 0; } rozsah názvu {display: block; } .main-title {font-size: 2.15em; } .sub-title {text-indent: .25em; }
Voilà! Vaše logo je kompletní. Mělo by to vypadat asi jako na obrázku níže. Jakmile je váš 3D model hotový, můžete využít sílu CSS a vylepšit ho přidáním stylů, animací nebo událostí myši: jednoduše zacházejte s 3D modelem jako s jakýmkoli jiným prvkem HTML.
Animujte logo
Zde si můžete prohlédnout animaci pomocí loga. Jak části gramofonu „zapadají“, každá z nich sdílí stejnou animaci klíčových snímků s různým zpožděním. Tvary mají nastaven nejvyšší atribut na 50%. Abychom vytvořili klesající efekt, animujeme horní atribut z -400px na 50%:
@keyframes spadají {0% {top: -400px; } / * Spustíme animaci, která umístí tvar do výšky 400px * / 100% {nahoře: 50%; } / * pak to skončíme na původní pozici * /}
Tuto animaci můžete přidat ke všem tvarům následujícím způsobem:
.shape {top: -400px; animace: pokles 1 s ulehčí 0 s vpřed; }
Nastavit horní atribut na -400px a přidat zpoždění:
.platter {zpoždění animace: 1,05 s; }. disk {zpoždění animace: 1,35 s; }. tlačítko {zpoždění animace: 1,5 s; } ...
Vytvořte konečný efekt „odrazu“ pomocí rotateX atribut:
90% {transformace: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {transformace: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {transformace: translateY (-4,5em) rotateX (660deg) rotateY (0deg); }
Takto jsme vytvořili tuto konkrétní verzi, ale pamatujte: neexistují žádná omezení!
Slova: Julian Garnier
Tento článek se původně objevil v čísle časopisu 248.
