Съдържание
- Приготвяме се да започнем
- Създаване на основата на грамофона
- Създаване на краката
- Ръката и главата
- Цветове и текстури
- Предаване и експортиране
- Завършване на логото
- Анимирайте логото
Има няколко начина за създаване на 3D анимация в мрежата, като повечето от тях изискват добро познаване на JavaScript и WebGL или използването на приставка като Flash. Благодарение на CSS 3D трансформациите е възможно да се създаде 3D, като се използват само HTML и CSS, но не е лесно да се направи това. Tridiv, моето безплатно онлайн приложение, опростява процеса, предлагайки прост и интуитивен WYSIWYG интерфейс, който позволява на потребителите да създават 3D обекти, без да пишат нито един ред код.
В този урок ще създадем и анимираме лого за „Tridiv Records“, измислен лейбъл, използвайки само HTML и CSS. Основната графика за логото ще бъде създадена в 3D с помощта на Tridiv. След това ще добавим типографските елементи, като използваме обикновени HTML и CSS.
Можете да видите крайната анимация и кода, който я генерира тук.
Приготвяме се да започнем
Ще започнем, като създадем грамофона в 3D, използвайки Tridiv. Отидете на tridiv.com и стартирайте приложението. Ще трябва да използвате Chrome, Safari или Opera 15 (или по-нова версия).
Преди да започнете, важно е да разберете интерфейса Tridiv. Основният раздел на редактора се състои от четири изгледа: горе вляво е 3D изгледът, осигуряващ пълен изглед на сцената. Останалите три изгледа го показват отгоре, отстрани и отпред. Използвайки тези три изгледа, можете да създавате, редактирате и премествате 3D фигури.
Хоризонталната лента с инструменти е разделена на две части: лявата част показва информация, свързана с вашия документ; дясната част съдържа инструменти за създаване и редактиране на фигури. The Ход подбор и редактиране бутоните за избор превключват между различните режими за редактиране.
Екранът за свойства (страничната лента) показва настройки на документа, като мащабиране и прилепване към решетката, както и свойствата на избраната форма (размер, позиция, завъртане, цвят и т.н.). Единицата, използвана за размери и позиция, е ems; ъглите на въртене са в градуси.
За да избегнем объркване по-късно в урока, ще използваме следния стенографски текст:
w = ширина h = височина d = диаметър на дълбочината = диаметър x deg = въртене по оста x y y = = завъртане по оста y z deg = завъртане по оста z
Създаване на основата на грамофона
Започнете, като зададете стойността на мащабиране на 200. За да помогнете за изчертаването на фигурите, активирайте настройката за щракване към мрежата в Настройки на документа раздел на страничната лента. Задайте стойността на щракване на 0.125.
Основата на грамофона е съставена от обикновен кубоид, така че щракнете върху Добавете кубовидни в горната лента с инструменти. Трябва да видите, че кубоидът се появява във всичките четири изгледа в редактора.
Преименувайте формата на база използвайки полето за име в панела със свойства (под Свойства на формата). Името на фигурата трябва да е валидно име на клас на CSS, защото ще се използва в кода, генериран от редактора. Ще използваме тези имена на класове по-късно, когато анимираме логото, така че не забравяйте да назовете всяка нова форма, която създавате правилно.
След като кубоидът е наречен, уверете се, че е избран в изгледа отгоре (той трябва да бъде маркиран в синьо, с кръгъл пръстен от инструменти около него), след това щракнете върху редактиране бутон в горната част на пръстена, за да се покажат дръжките за редактиране. Плъзнете контролните дръжки отстрани на кубоида, докато достигнат ширина и дълбочина w = 10 и d = 8 в Свойства на формата.
Кликнете върху фигурата в страничния изглед. Това ще покаже дръжките за редактиране в този изглед, което ни позволява да променим височината му. Регулирайте височината, докато достигне h = 2. Можете също да въведете стойности директно в екрана със свойства. За да закръглите ъглите на кубоида, променете стойностите на ъглите в екрана на свойствата на 1.75, след това натиснете [Въведете] ключ за прилагане на промените. Ще имате нещо подобно.
Създаване на краката
За краката на грамофона ще използваме цилиндри. Добавете цилиндър, след което променете диаметъра му на диаметър = 1,75 и височината му до h = 0,5. Кликнете върху Ход бутон за избор в горната лента с инструменти, за да покажете плъзгащата се област на фигурата. Преместете цилиндъра под основата, като го поставите в един от ъглите. (Може да се наложи да го преместите в изгледите отгоре, отстрани и отпред.)
Дублирайте цилиндъра (натиснете Дубликат в кръглия пръстен на инструменти или натиснете д ключ) и да преместите новия цилиндър в друг ъгъл на основата. Повторете процеса, докато всичките четири крака бъдат правилно позиционирани. Не забравяйте да назовете цилиндрите (например, крака-ляво-горе, крака-дясно-отгоре, крака-ляво-долу, крака-ляво-горе). Когато го направите, резултатът трябва да изглежда така.
Сега ще разгледаме създаването на плоча, диск, ос и бутон. Процесът на създаване на следващите фигури е подобен на този за краката. Ето размерите, използвани за различните цилиндри:
плато: диаметър = 7; h = 0,5 диск: диаметър = 6,75; h = 0,25 бутон: диаметър = 1,5; h = 0,25 основа-ос на рамото: диаметър = 2,25; h = 0,25 ос на рамото: диаметър = 1,375; h = 1
За да прецизирате страните на цилиндрите, можете да увеличите броя на лицата във всеки един, като използвате страничното поле в екрана за свойства. Не добавяйте твърде много страни, тъй като това може да повлияе отрицателно на глобалното представяне на редактора и крайната анимация. В този случай бих ви посъветвал да не използвате повече от 32 страни за плочата и диска. Трябва да имате нещо подобно.
Ръката и главата
За ръката и главата на грамофона ще използваме кубоиди. За ръката създайте кубоид (w = 0,25; h = 0,25; d = 4), след това приложете завъртане на -33° на оста y. За главата създайте кубоид (w = 0,5; h = 0,5; d = 1), след това приложете завъртане на -33° на оста y. Подравнете двете форми с цилиндъра на оста на рамото. Резултатът трябва да изглежда така.
Цветове и текстури
Почти приключихме с грамофона. Последната стъпка е да зададете цветове и да приложите текстура към винила (изображение, представляващо повърхността на записа). За да зададете цветове, изберете форма и кликнете върху цветове поле в екрана за свойства. Tridiv ви позволява да посочите отделни цветове за всяко лице на фигура, но в този пример трябва да използваме цялото поле, за да променим цвета на всички лица. За да направите това, просто въведете шестнадесетичен цветен код в полето, след което потвърдете, като натиснете Въведете.
Ето цветовете, използвани в този пример:
основа: # 0099FF крака, бутон, ос, ръка и глава: # F2EEE5 диск: # fa7f7a
За текстурата на винила процесът е подобен на задаването на цветове. Изберете цилиндъра на диска, след което кликнете върху изображения поле в екрана за свойства. Поставете URL адреса на изображението, което искате да приложите към винила, в горното поле и потвърдете, като натиснете Въведете. Можете да използвате собствено изображение или да изтеглите използваното в този пример.
Сега трябва да имате нещо, което изглежда така.
Предаване и експортиране
Сега, когато грамофонът е готов, ще работим по начина, по който е изобразен, преди да го експортираме. Щракнете върху Преглед в горната част на екрана със свойства. Задайте стойността на мащабиране на 200 за да покажете грамофона по-голям. За да премахнете черните граници на фигурите, отидете на Граници на панела и задайте непрозрачността на 0. Резултатът трябва да изглежда така.
Искаме грамофона да свети отгоре. За да направите това, завъртете сцената по такъв начин, че горната част на грамофона да е обърната към вас. Основата трябва да изглежда идеално правоъгълна. Промяната на светлите и тъмните стойности в раздела tridiv.com/d/4k6 на панела със свойства ще регенерира сенките в сцената. Променете стойността на светлината на 0.
Грамофонът вече е готов за износ!
Завършване на логото
Готови сме да добавим текста към логото и да създадем анимацията на логото. Щракнете върху редактиране на бутона CodePen в долния ляв ъгъл на Преглед изглед за експортиране на кода в CodePen. Важно е да се отбележи, че CSS кодът, генериран от Tridiv, не използва префикси на доставчици, така че ще трябва да използвате инструменти като prefixr.com или leaverou.github.io/prefixfree, за да направите кода функционален във всеки браузър. Започнете със затваряне на прозореца на JavaScript, тъй като няма да го използваме. В HTML панела премахнете стиловия маркер, приложен към .сцена div.
Разгънете CSS панела и добавете следния код в края:
.scene {преобразуване: translateY (-140px) rotateX (-55deg); }
Ето, translateY (-140px) премества грамофона 140px нагоре, оставяйки място за текста под него. Тогава rotateX (-55deg) задава вертикалния наклон на грамофона.
За да добавите текста, трябва да добавите a .заглавие div веднага след отварянето #tridiv div в HTML прозореца. Вътре добавете две обхваща> (.main-title и .sub-title), разделени с hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div> ...
След това трябва да приложите правилните шрифтове и стилове. В прозореца CSS импортирайте шрифта Open Sans, използван в логото, и добавете основните стилове за текстовите елементи.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Центриране на текстови блокове + основни стилове на шрифта * / заглавие {позиция: абсолютно; отгоре: 50%; ляво: 50%; марж: 0 0 0 -165px; ширина: 330px; височина: 5em; семейство шрифтове: ‘Open Sans’, sans-serif; тегло на шрифта: 300; размер на шрифта: 24px; подравняване на текст: център; интервал между букви: 1.5em; цвят: # 0099FF; } заглавие hr {border: 1px solid # fa7f7a; марж: .75em 0; } дял на заглавието {дисплей: блок; } .main-title {размер на шрифта: 2.15em; } .подзаглавие {отстъп на текст: .25em; }
Voilà! Вашето лого е завършено. Тя трябва да изглежда нещо като изображението по-долу. След като вашият 3D модел приключи, можете да използвате силата на CSS, за да го направите още по-добър, като добавите стилове, анимации или събития с мишката: просто третирайте 3D модела като всеки друг HTML елемент.
Анимирайте логото
Вижте анимация с помощта на логото тук. Тъй като частите на грамофона „попадат“, всяка от тях споделя една и съща анимация на ключови кадри с различно закъснение. За фигурите е зададен атрибут top 50%. За да създадем падащия ефект, анимираме атрибута top от -400px да се 50%:
@keyframes падат {0% {top: -400px; } / * Започваме анимацията, позиционирайки фигурата на височина 400px * / 100% {top: 50%; } / * след това го завършваме на първоначалната му позиция * /}
Можете да добавите тази анимация към всички фигури, както следва:
.shape {отгоре: -400px; анимация: падане 1s лекота 0s напред; }
Задайте горния атрибут на -400px и добавете забавяне:
.platter {забавяне на анимацията: 1,05s; } .disc {забавяне на анимацията: 1.35s; } .button {забавяне на анимацията: 1.5s; } ...
Създайте последния ефект на „отскачане“ с помощта на rotateX атрибут:
90% {преобразуване: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {преобразуване: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {преобразуване: translateY (-4.5em) rotateX (660deg) rotateY (0deg); }
Ето как създадохме тази конкретна версия, но не забравяйте: няма ограничения!
Думи: Джулиан Гарние
Тази статия първоначално се появи в брой 248 на нетното списание.
