Tarkib
- Ishni boshlash
- Burilish stolining asosini yaratish
- Oyoqlarni yaratish
- Qo'l va bosh
- Ranglar va to'qimalar
- Renderlash va eksport qilish
- Logotipni tugatish
- Logotipni jonlantirish
Internetda 3D-animatsiya yaratishning bir qancha usullari mavjud, ularning aksariyati JavaScript va WebGL-ni yaxshi bilishni yoki Flash kabi plaginlardan foydalanishni talab qiladi. CSS 3D konvertatsiyalari tufayli 3D-ni faqat HTML va CSS-lar yordamida yaratish mumkin, ammo buni amalga oshirish oson emas. Mening bepul onlayn dasturim Tridiv bu jarayonni soddalashtiradi, oddiy va intuitiv WYSIWYG interfeysini taklif etadi, bu foydalanuvchilarga bitta satr kodini yozmasdan 3D moslamalarni yaratishga imkon beradi.
Ushbu o'quv qo'llanmada biz faqat HTML va CSS-lardan foydalangan holda xayoliy yozuvlar yorlig'i bo'lgan 'Tridiv Records' logotipini yaratamiz va jonlantiramiz. Logotip uchun asosiy ingl. Tridiv yordamida 3D formatida yaratiladi. Keyin odatdagi HTML va CSS-dan foydalangan holda tipografik elementlarni qo'shamiz.
Oxirgi animatsiya va uni yaratadigan kodni bu erda ko'rishingiz mumkin.
Ishni boshlash
Tridiv yordamida 3D-da aylanuvchi stol yaratish bilan boshlaymiz. Tridiv.com saytiga o'ting va dasturni ishga tushiring. Siz Chrome, Safari yoki Opera 15 (yoki undan keyingi versiyasi) dan foydalanishingiz kerak.
Ishga kirishishdan oldin Tridiv interfeysini tushunish muhimdir. Muharrirning asosiy qismi to'rtta ko'rinishdan iborat: chap tomondagi yuqori qismda voqea joyining to'liq ko'rinishini ta'minlaydigan 3D ko'rinish mavjud. Qolgan uchta ko'rinish uni yuqoridan, yon tomondan va old tomondan ko'rsatadi. Ushbu uchta ko'rinishdan foydalanib siz 3D shakllarni yaratishingiz, tahrirlashingiz va ko'chirishingiz mumkin.
Gorizontal asboblar paneli ikki qismga bo'linadi: chap qismida sizning hujjatingizga tegishli ma'lumotlar aks etadi; o'ng qismida shakllarni yaratish va tahrirlash vositalari mavjud. The Ko'chirish tanlash va Tahrirlash tanlash tugmachalari turli xil tahrirlash rejimlari o'rtasida almashinadi.
Xususiyatlar panelida (yon panel) hujjat sozlamalari, masalan, kattalashtirish va katakchalarga o'tish va tanlangan shaklning xususiyatlari (hajmi, holati, aylanishi, rangi va boshqalar) ko'rsatiladi. Olchamlari va holati uchun ishlatiladigan birlik ems; burilish burchaklari gradusda.
Keyinchalik o'quv qo'llanmasida chalkashliklarni oldini olish uchun biz quyidagi stenografiyadan foydalanamiz:
w = kenglik h = balandlik d = chuqurlik diam = diametr x deg = x o'qda aylanish y deg = y o'qda aylanish z deg = z o'qda aylanish
Burilish stolining asosini yaratish
Kattalashtirish qiymatini 200 ga sozlang. Shakllarni chizishda yordam berish uchun Hujjat sozlamalari yon panelning qismi. Tezlik qiymatini quyidagicha o'rnating 0.125.
Aylanadigan stolning asosi oddiy kuboiddan tashkil topgan, shuning uchun ni bosing Kuboid qo'shing yuqori asboblar panelidagi tugma. Kuboidni tahrirlovchining to'rtala ko'rinishda ham ko'rinishini ko'rishingiz kerak.
Shaklning nomini o'zgartiring tayanch xususiyatlar panelining nom maydonidan foydalanish (ostida Shakl xususiyatlari). Shakl nomi to'g'ri CSS sinf nomi bo'lishi kerak, chunki u muharrir tomonidan yaratilgan kodda ishlatiladi. Keyinchalik biz logotipni animatsiya qilishda ushbu sinf nomlaridan foydalanamiz, shuning uchun har bir yangi shaklni to'g'ri nomlaganingizga ishonch hosil qiling.
Kuboidga nom berilgandan so'ng, uning yuqori ko'rinishda tanlanganligiga ishonch hosil qiling (u ko'k rang bilan belgilanishi kerak, atrofida dumaloq asboblar halqasi bo'lishi kerak), so'ngra Tahrirlash tahrirlash tutqichlarini ko'rsatish uchun ringning yuqori qismidagi tugma. Kenglik va chuqurlikka etguncha kubikning yon tomonidagi boshqaruv tutqichlarini torting w = 10 va d = 8 ichida Shakl xususiyatlari.
Yon ko'rinish ichidagi shaklni bosing. Bu bizni balandligini o'zgartirishga imkon beradigan ushbu ko'rinishdagi tahrirlash tutqichlarini ko'rsatadi. Balandlikni u yetguncha sozlang h = 2. Siz to'g'ridan-to'g'ri xususiyatlar oynasiga qiymatlarni kiritishingiz mumkin. Kuboidning burchaklarini yumaloq qilish uchun xususiyatlar panelidagi burchak qiymatlarini o'zgartiring 1.75, keyin tugmachasini bosing [Kirish] o'zgarishlarni qo'llash uchun kalit. Sizda shunga o'xshash narsa bo'ladi.
Oyoqlarni yaratish
Burilish stolining oyoqlari uchun biz shilinglardan foydalanamiz. Tsilindrni qo'shing, so'ngra uning diametrini o'zgartiring diam = 1.75 va uning balandligi h = 0,5. Ustiga bosing Ko'chirish Shakldagi sudrab boriladigan maydonni ko'rsatish uchun yuqori asboblar panelidagi tanlash tugmasi. Tsilindrni taglik ostiga o'tkazing, uni burchaklardan biriga joylashtiring. (Siz uni yuqori, yon va oldingi ko'rinishlarda siljitishingiz kerak bo'lishi mumkin.)
Silindrning nusxasini oling (ni bosing Dublikat tugmachasini bosing yoki tugmachasini bosing D. va yangi tsilindrni taglikning boshqa burchagiga o'tkazish uchun. Barcha to'rt oyoq to'g'ri joylashguncha jarayonni takrorlang. Silindrlarni nomlashni unutmang (masalan, oyoqlari chapdan tepaga, oyoqlari o'ngdan tepaga, oyoqlar chapdan pastgacha, oyoqlari chapdan tepaga). Buni qilganingizdan so'ng, natija shunday bo'lishi kerak.
Endi biz plastinka, disk, qo'l o'qi va tugmachani yaratishni ko'rib chiqamiz. Keyingi shakllarni yaratish jarayoni oyoqlarnikiga o'xshashdir. Turli xil silindrlar uchun ishlatiladigan o'lchamlar:
lagan: diam = 7; h = 0,5 disk: diam = 6,75; h = 0,25 tugmasi: diam = 1,5; h = 0,25 qo'l o'qi asosi: diam = 2.25; h = 0,25 qo'l o'qi: diam = 1.375; h = 1
Silindrlarning yon tomonlarini yaxshilash uchun siz xususiyatlar panelidagi yon maydonidan foydalanib, har birida yuzlar sonini ko'paytirishingiz mumkin. Ko'p tomonlarni qo'shmang, chunki bu muharrirning global ishlashi va yakuniy animatsiyaga salbiy ta'sir ko'rsatishi mumkin. Bunday holda, men sizga plastinka va disk uchun 32 tadan ko'proq foydalanmaslikni maslahat beraman. Sizda shunga o'xshash narsa bo'lishi kerak.
Qo'l va bosh
Aylanadigan stolning qo'li va boshi uchun biz kubiklardan foydalanamiz. Qo'l uchun kubik yarating (w = 0,25; h = 0,25; d = 4), keyin ning aylanishini qo'llang -33° ustida y o'qi. Bosh uchun kubik yarating (w = 0,5; h = 0,5; d = 1), keyin ning aylanishini qo'llang -33° ustida y o'qi. Ikkala shaklni qo'l o'qi silindr bilan tekislang. Natija shunday bo'lishi kerak.
Ranglar va to'qimalar
Biz deyarli aylanuvchi stol bilan ishladik. Oxirgi bosqich - ranglarni belgilash va vinilga (yozuv yuzasini ifodalovchi rasm) teksturani qo'llash. Ranglarni belgilash uchun shaklni tanlang va ustiga bosing ranglar xususiyatlar panelidagi maydon. Tridiv sizga shaklning har bir yuzi uchun alohida ranglarni belgilashga imkon beradi, ammo bu misolda barcha yuzlarning rangini o'zgartirish uchun barcha maydonlardan foydalanishimiz kerak. Buni amalga oshirish uchun maydonga olti burchakli kodni kiriting, so'ngra tugmani bosib tasdiqlang Kirish.
Ushbu misolda ishlatiladigan ranglar:
tayanch: # 0099FF oyoq, tugma, o'q, qo'l va bosh: # F2EEE5 disk: # fa7f7a
Vinil to'qimasi uchun jarayon ranglarni belgilashga o'xshaydi. Disk silindrini tanlang, so'ngra ustiga bosing tasvirlar xususiyatlar panelidagi maydon. Qo'llash kerak bo'lgan rasmning URL manzilini yuqori qismdagi vinilga joylashtiring va bosib tasdiqlang Kirish. Siz o'zingizning rasmingizdan foydalanishingiz yoki ushbu misolda ishlatilgan rasmni yuklab olishingiz mumkin.
Endi sizda shunga o'xshash narsa bo'lishi kerak.
Renderlash va eksport qilish
Endi aylanuvchi stol tugagandan so'ng, biz uni eksport qilishdan oldin qanday ishlashimiz kerak. Tugmachasini bosing Oldindan ko'rish xususiyatlar oynasining yuqori qismidagi tugma. Kattalashtirish qiymatini quyidagicha o'rnating 200 aylanadigan stolni kattaroqroq ko'rsatish uchun. Shakllarning qora chegaralarini olib tashlash uchun ga o'ting Chegaralar oynaning qismini va shaffoflikni o'rnating 0. Natija shunga o'xshash ko'rinishi kerak.
Biz aylanuvchi stol yuqoridan yoritilishini xohlaymiz. Buni amalga oshirish uchun sahnani aylanuvchi stolning yuqori qismi siz tomonga qarab turadigan qilib aylantiring. Baza mukammal to'rtburchaklar ko'rinishi kerak. Tridiv.com/d/4k6section xususiyatlar panelidagi yorug'lik va qorong'i qiymatlarni o'zgartirish sahna ichidagi soyalarni qayta tiklaydi. Yorug'lik qiymatini o'zgartiring 0.
Endi aylanuvchi stol eksport qilishga tayyor!
Logotipni tugatish
Biz logotipga matn qo'shishga va logotip animatsiyasini yaratishga tayyormiz. Tugmachasini bosing Tahrirlash ning pastki chap qismidagi CodePen tugmachasida Oldindan ko'rish kodni CodePen-ga eksport qilish uchun ko'rish. Shuni ta'kidlash kerakki, Tridiv tomonidan ishlab chiqarilgan CSS kodida sotuvchi prefikslari ishlatilmaydi, shuning uchun kodni har bir brauzerda ishlashini ta'minlash uchun prefixr.com yoki leaverou.github.io/prefixfree kabi vositalardan foydalanishingiz kerak. JavaScript-ni yopishdan boshlang, chunki biz uni ishlatmaymiz. HTML oynasida, ga qo'llanilgan uslub yorlig'ini olib tashlang sahna div
CSS panelini kengaytiring va oxirida quyidagi kodni qo'shing:
.scene {transform: translateY (-140px) rotateX (-55deg); }
Mana translateY (-140px.)) aylanuvchi stolni 140px yuqoriga siljitadi va uning ostidagi matn uchun joy qoldiradi. Keyin rotateX (-55deg) burilish stolining vertikal moyilligini o'rnatadi.
Matnni qo'shish uchun a qo'shishingiz kerak .title div ochilgandan so'ng #tridiv HTML oynasidagi div. Ichkarida, ikkitasini qo'shing oraliq> (.bosh sarlavha va .sub-sarlavha) bilan ajratilgan soat />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…
Keyinchalik to'g'ri shriftlar va uslublarni qo'llashingiz kerak. CSS oynasida logotipda ishlatiladigan Open Sans shriftini import qiling va matn elementlari uchun asosiy uslublarni qo'shing.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Matnlar blokirovkasini markazlashtirish + shriftning asosiy uslublari * / title {pozitsiyasi: mutlaq; yuqori: 50%; chap: 50%; margin: 0 0 0 -165px; kengligi: 330 piksel; balandligi: 5em; font-family: 'Open Sans', sans-serif; shrift og'irligi: 300; shrift hajmi: 24px; matn bilan tekislash: markaz; harflar oralig'i: 1.5em; rang: # 0099FF; } sarlavha hr {chegara: 1px qattiq # fa7f7a; margin: .75em 0; } sarlavha oralig'i {displey: blok; } .bosh sarlavha {font-size: 2.15em; } .sub-title {text-indent: .25em; }
Voila! Sizning logotipingiz to'liq. Quyidagi rasmga o'xshash bo'lishi kerak. 3D modelingiz tugagandan so'ng, uslublar, animatsiyalar yoki sichqoncha hodisalarini qo'shish orqali uni yanada yaxshilash uchun CSS quvvatidan foydalanishingiz mumkin: shunchaki 3D modelga boshqa HTML elementlari kabi munosabatda bo'ling.
Logotipni jonlantirish
Logotip yordamida animatsiyani bu erda ko'ring. Aylanadigan stolning qismlari tushishi bilan ularning har biri bir xil asosiy kadrlar animatsiyasini turli kechikishlar bilan bo'lishadi. Shakllar yuqori atributga o'rnatilgan 50%. Yiqilish effektini yaratish uchun biz eng yuqori atributini jonlantiramiz -400 piksel ga 50%:
@keyframes tushadi {0% {top: -400px; } / * Biz animatsiyani shaklni 400px balandlikka joylashtira boshlaymiz * / 100% {yuqori: 50%; } / * keyin biz uni asl holatida tugatamiz * /}
Siz ushbu animatsiyani barcha shakllarga quyidagicha qo'shishingiz mumkin:
.shape {top: -400px; animatsiya: qulash 1 soniyani oldinga surish oson; }
Yuqori atributni quyidagiga o'rnating -400 piksel va kechiktirishni qo'shing:
.platter {animatsiyani kechiktirish: 1.05s; } .disc {animatsiyani kechiktirish: 1.35s; } .button {animatsiya-kechikish: 1.5s; } ...
Dan foydalanib, yakuniy 'sakrash' effektini yarating aylantirishX xususiyat:
90% {aylantirish: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {aylantirish: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {aylantirish: translateY (-4.5em) rotateX (660deg) rotateY (0deg); }
Shunday qilib biz ushbu maxsus versiyani yaratdik, lekin esda tuting: cheklovlar yo'q!
So'zlar: Julian Garnier
Dastlab ushbu maqola jurnalning 248-sonli sonida paydo bo'ldi.
