Зміст
- Починаємо
- Створення основи вертушки
- Створення стоп
- Рука і голова
- Кольори та текстури
- Візуалізація та експорт
- Оздоблення логотипу
- Анімуйте логотип
Існує кілька способів створення тривимірної анімації в Інтернеті, більшість з яких вимагають хорошого знання JavaScript та WebGL або використання такого плагіна, як Flash. Завдяки перетворенням CSS 3D можна створити 3D, використовуючи лише HTML та CSS, але зробити це непросто. Tridiv, мій безкоштовний онлайн-додаток, спрощує процес, пропонуючи простий та інтуїтивно зрозумілий інтерфейс WYSIWYG, який дозволяє користувачам створювати тривимірні об’єкти без написання жодного рядка коду.
У цьому підручнику ми збираємося створити та анімувати логотип для „Tridiv Records”, вигаданого звукозапису, використовуючи лише HTML та CSS. Основний візуал для логотипу буде створений у 3D за допомогою Tridiv. Потім ми додамо друкарські елементи, використовуючи звичайні HTML та CSS.
Остаточну анімацію та код, який її генерує, ви можете побачити тут.
Починаємо
Ми почнемо із створення вертушки в 3D за допомогою Tridiv. Зайдіть на сайт tridiv.com і запустіть програму. Вам потрібно буде використовувати Chrome, Safari або Opera 15 (або пізнішу версію).
Перед початком роботи важливо зрозуміти інтерфейс Tridiv. Основний розділ редактора складається з чотирьох видів: вгорі ліворуч знаходиться тривимірний вигляд, що забезпечує повний вигляд сцени. Інші три види показують це зверху, збоку та спереду. Використовуючи ці три подання, ви можете створювати, редагувати та переміщувати тривимірні фігури.
Горизонтальна панель інструментів розділена на дві частини: ліва частина відображає інформацію, що стосується вашого документа; права частина містить інструменти для створення та редагування фігур. Рухайся відбір і Редагувати кнопки вибору перемикаються між різними режимами редагування.
На панелі властивостей (бічна панель) відображаються такі параметри документа, як масштабування та прив’язка до сітки, а також властивості обраної фігури (розмір, положення, обертання, колір тощо). Одиницею виміру та положення є ems; кути повороту в градусах.
Щоб уникнути плутанини в подальшому підручнику, ми будемо використовувати наступну скорочену книгу:
w = ширина h = висота d = діаметр глибини = діаметр x град = обертання по осі x y deg = обертання по осі y z deg = обертання по осі z
Створення основи вертушки
Для початку встановіть значення масштабування на 200. Щоб допомогти малювати фігури, активуйте налаштування прив’язки до сітки в Налаштування документа розділ бічної панелі. Встановіть для значення прив'язки значення 0.125.
Основа вертушки складається з простого кубовида, тому клацніть на Додайте кубоподібний на верхній панелі інструментів. Ви повинні побачити, як кубоїд відображається у всіх чотирьох поданнях у редакторі.
Перейменуйте фігуру на база за допомогою поля імені на панелі властивостей (під Властивості фігури). Ім'я форми має бути дійсним іменем класу CSS, оскільки воно буде використовуватися в коді, згенерованому редактором. Ми будемо використовувати ці назви класів пізніше під час анімації логотипу, тому переконайтеся, що ви правильно називаєте кожну нову фігуру, яку ви створюєте.
Після того, як кубоїд названий, переконайтеся, що він виділений у вигляді зверху (він повинен бути виділений синім кольором, з круглим кільцем інструментів навколо нього), а потім клацніть на Редагувати вгорі кільця, щоб показати ручки редагування. Перетягуйте ручки управління з боків кубоїда, поки не досягнуть ширини та глибини w = 10 і d = 8 в Властивості фігури.
Клацніть на фігуру всередині вигляду збоку. Це покаже ручки редагування в цьому поданні, що дозволить нам змінити його висоту. Регулюйте висоту, поки вона не досягне h = 2. Ви також можете вводити значення безпосередньо в область властивостей. Щоб округлити кути кубоїда, змініть значення кутів на панелі властивостей на 1.75, потім натисніть [Enter] клавішу, щоб застосувати зміни. У вас буде щось подібне.
Створення стоп
Для ніг вертушки ми будемо використовувати циліндри. Додайте циліндр, а потім змініть його діаметр на діам = 1,75 і його висота до h = 0,5. Клацніть на Рухайся кнопку вибору на верхній панелі інструментів, щоб показати область, що перетягується на фігурі. Перемістіть циліндр під основу, розмістивши його в одному з кутів. (Можливо, вам доведеться перемістити його у вигляді зверху, збоку та спереду.)
Дублюйте циліндр (натисніть Дублікат на круговому кільці інструментів або натисніть D і), щоб перемістити новий циліндр в інший кут основи. Повторюйте процес, доки всі чотири ноги не будуть правильно розміщені. Не забудьте назвати циліндри (наприклад, стопи ліворуч-зверху, стопи-право-верх, ноги-ліво-знизу, стопи ліворуч-зверху). Коли ви це зробите, результат повинен виглядати так.
Зараз ми розглянемо створення пластини, диска, осі важеля та кнопки. Процес створення наступних фігур подібний до процесу для ніг. Ось розміри, що використовуються для різних балонів:
блюдо: diam = 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° на вісь у. Для голови створіть кубовидну (w = 0,5; h = 0,5; d = 1), а потім застосуйте обертання на -33° на вісь у. Вирівняйте обидві фігури з циліндром осі важеля. Результат повинен виглядати так.
Кольори та текстури
Ми майже закінчили з вертушкою. Завершальним етапом є призначення кольорів і нанесення текстури на вініл (зображення, що представляє поверхню пластинки). Щоб призначити кольори, виберіть фігуру та клацніть на кольори в області властивостей. Tridiv дозволяє вказати окремі кольори для кожної грані фігури, але в цьому прикладі нам потрібно використовувати поле all, щоб змінити колір усіх граней. Для цього достатньо ввести в поле шістнадцятковий код кольору, а потім підтвердити, натиснувши Введіть.
Ось кольори, використані в цьому прикладі:
основа: # 0099FF фути, кнопка, вісь, рука та голова: # F2EEE5 диск: # fa7f7a
Що стосується текстури вінілу, процес подібний до призначення кольорів. Виберіть циліндр диска, а потім натисніть на зображення в області властивостей. Вставте URL-адресу зображення, яке потрібно застосувати до вінілу, у верхньому полі та підтвердьте, натиснувши Введіть. Ви можете використовувати власне зображення або завантажити зображення, використане в цьому прикладі.
Тепер у вас повинно бути щось подібне до цього.
Візуалізація та експорт
Тепер, коли поворотний стіл готовий, ми будемо працювати над тим, як він відображався, перш ніж експортувати його. Клацніть на Попередній перегляд вгорі панелі властивостей. Встановіть значення масштабування на 200 щоб збільшити показ вертушки. Щоб видалити чорні межі фігур, перейдіть до Межі розділу панелі та встановіть непрозорість на 0. Результат повинен виглядати приблизно так.
Ми хочемо, щоб вертушка світилася зверху. Для цього обертайте сцену таким чином, щоб верхня частина вертушки була звернена до вас. Основа повинна виглядати ідеально прямокутною. Зміна значень світла та темряви у розділі tridiv.com/d/4k6 панелі властивостей призведе до регенерації тіней у кадрі. Змініть значення освітленості на 0.
Програвач тепер готовий до експорту!
Оздоблення логотипу
Ми готові додати текст до логотипу та створити анімацію логотипу. Клацніть на Редагувати на кнопці CodePen внизу ліворуч Попередній перегляд для експорту коду в CodePen. Важливо зазначити, що код CSS, згенерований Tridiv, не використовує префікси постачальників, тому вам доведеться використовувати інструменти, такі як prefixr.com або leaverou.github.io/prefixfree, щоб зробити код функціональним у кожному браузері. Почніть із закриття області JavaScript, оскільки ми не збираємось її використовувати. На панелі HTML видаліть тег стилю, застосований до .сцена див.
Розгорніть область CSS і додайте наступний код в кінці:
.scene {перетворення: translateY (-140px) rotateX (-55deg); }
Ось, перекласти Y (-140 пікс) рухає вертушку на 140 пікселів вгору, залишаючи місце для тексту під ним. Потім, rotateX (-55deg) встановлює вертикальний нахил вертушки.
Щоб додати текст, потрібно додати .title 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); / * Центрування текстового блоку + основні стилі шрифтів * / title {position: absolute; зверху: 50%; ліворуч: 50%; запас: 0 0 0 -165 пікселів; ширина: 330 пікселів; висота: 5em; сімейство шрифтів: ‘Open Sans’, sans-serif; шрифт-вага: 300; розмір шрифту: 24 пікселів; вирівнювання тексту: по центру; інтервал між літерами: 1,5em; колір: # 0099FF; } заголовок hr {border: 1px solid # fa7f7a; маржа: .75em 0; } інтервал заголовка {дисплей: блок; } .main-title {font-size: 2.15em; } .підзаголовок {відступ тексту: .25em; }
Вуаля! Ваш логотип заповнений. Це має виглядати приблизно так, як на малюнку нижче. Після завершення 3D-моделі ви можете використовувати силу CSS, щоб зробити її ще кращою, додавши стилі, анімацію або події миші: просто обробляйте 3D-модель як будь-який інший елемент HTML.
Анімуйте логотип
Дивіться анімацію з використанням логотипу тут. Оскільки частини вертушки «потрапляють», кожна з них має однакову анімацію ключових кадрів із різними затримками. Для фігур встановлено атрибут top 50%. Щоб створити ефект падіння, ми анімуємо атрибут top з -400 пікс до 50%:
@keyframes падають на {0% {top: -400px; } / * Ми починаємо анімацію, розміщуючи фігуру на висоті 400px * / 100% {top: 50%; } / * тоді ми закінчуємо його у вихідному положенні * /}
Ви можете додати цю анімацію до всіх фігур таким чином:
.shape {top: -400px; анімація: падіння на 1 с, легкість на 0 с вперед; }
Встановіть для атрибута top значення -400 пікс і додати затримку:
.platter {затримка анімації: 1,05 с; } .disc {затримка анімації: 1,35 с; } .button {затримка анімації: 1,5 с; } ...
Створіть остаточний ефект відмов за допомогою rotateX атрибут:
90% {перетворення: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {перетворення: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {перетворення: перекластиY (-4,5em) повернутиX (660deg) повернутиY (0deg); }
Ось як ми створили саме цю версію, але пам’ятайте: обмежень немає!
Слова: Джуліан Гарньє
Ця стаття спочатку з’явилась у випуску 248 журналу net.
