Содержание
- Начиная
- Создание основы поворотного стола
- Создание ног
- Рука и голова
- Цвета и текстуры
- Рендеринг и экспорт
- Завершение логотипа
- Анимировать логотип
Существует несколько способов создания 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-фигуры.
Горизонтальная панель инструментов разделена на две части: левая часть отображает информацию, относящуюся к вашему документу; правая часть содержит инструменты для создания и редактирования фигур. В Двигаться выбор и Редактировать Кнопки выбора позволяют переключаться между различными режимами редактирования.
Панель свойств (боковая панель) отображает настройки документа, такие как масштабирование и привязку к сетке, а также свойства выбранной фигуры (размер, положение, поворот, цвет и т. Д.). Единица измерения размеров и положения - ems; углы поворота указаны в градусах.
Чтобы избежать путаницы в дальнейшем в руководстве, мы будем использовать следующее сокращение:
w = ширина h = высота d = глубина diam = диаметр x deg = вращение по оси x y deg = вращение по оси y z deg = вращение по оси z
Создание основы поворотного стола
Начните с установки значения масштабирования на 200. Чтобы рисовать фигуры, активируйте привязку к сетке в Параметры документа раздел боковой панели. Установите значение привязки на 0.125.
Основание поворотного стола состоит из простого куба, поэтому щелкните Добавить кубоид кнопку на верхней панели инструментов. Вы должны увидеть кубоид во всех четырех представлениях редактора.
Переименуйте фигуру в база используя поле имени на панели свойств (под Свойства формы). Имя формы должно быть допустимым именем класса CSS, поскольку оно будет использоваться в коде, созданном редактором. Мы будем использовать эти имена классов позже при анимации логотипа, поэтому убедитесь, что вы правильно называете каждую новую форму, которую создаете.
После того, как кубоид назван, убедитесь, что он выбран на виде сверху (он должен быть выделен синим цветом с круговым кольцом инструментов вокруг него), затем нажмите кнопку Редактировать в верхней части кольца, чтобы отобразить маркеры редактирования. Перетащите ручки управления по бокам кубоида, пока ширина и глубина не достигнут ш = 10 а также d = 8 в Свойства формы.
Щелкните фигуру внутри вида сбоку. Это покажет ручки редактирования в этом представлении, что позволит нам изменить его высоту. Отрегулируйте высоту до h = 2. Вы также можете вводить значения прямо в панель свойств. Чтобы скруглить углы кубоида, измените значения углов на панели свойств на 1.75, затем нажмите [Входить] нажмите кнопку, чтобы применить изменения. У вас будет что-то вроде этого.
Создание ног
В качестве ножек поворотного стола мы будем использовать цилиндры. Добавьте цилиндр, затем измените его диаметр на диаметр = 1,75 и его высота до в = 0,5. Нажми на Двигаться кнопку выбора на верхней панели инструментов, чтобы показать перетаскиваемую область на фигуре. Переместите цилиндр под основание, поместив его в один из углов. (Возможно, вам потребуется переместить его на виде сверху, сбоку и спереди.)
Дублируйте цилиндр (нажмите Дубликат в круглом кольце инструментов или нажмите кнопку D ключ) и переместить новый цилиндр в другой угол основания. Повторяйте процесс до тех пор, пока все четыре ножки не будут правильно расположены. Не забудьте назвать цилиндры (например, ноги-лево-верх, ноги-правый-верх, фут-лево-низ, ноги-лево-верх). Когда вы это сделаете, результат должен выглядеть следующим образом.
Теперь мы рассмотрим создание опорного диска, диска, оси рычага и кнопки. Процесс создания следующих фигур аналогичен процессу создания ступней. Вот размеры, используемые для различных цилиндров:
тарелка: диаметр = 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 позволяет вам указывать индивидуальные цвета для каждой грани формы, но в этом примере нам нужно использовать поле all, чтобы изменить цвет всех граней. Для этого просто введите шестнадцатеричный код цвета в поле и подтвердите нажатием Входить.
Вот цвета, использованные в этом примере:
основание: # 0099FF ножки, кнопка, ось, рычаг и головка: # F2EEE5 диск: # fa7f7a
Для текстуры винила процесс аналогичен назначению цветов. Выберите цилиндр диска, затем нажмите на изображений на панели свойств. Вставьте URL-адрес изображения, которое вы хотите применить к винилу, в верхнее поле и подтвердите, нажав Входить. Вы можете использовать собственное изображение или загрузить изображение, используемое в этом примере.
Теперь у вас должно получиться что-то вроде этого.
Рендеринг и экспорт
Теперь, когда поворотный стол готов, мы собираемся поработать над способом его рендеринга перед его экспортом. Щелкните значок Предварительный просмотр в верхней части панели свойств. Установите значение масштабирования на 200 чтобы увеличить размер поворотного стола. Чтобы удалить черные границы фигур, перейдите к Границы раздел панели и установите непрозрачность на 0. Результат должен выглядеть примерно так.
Мы хотим, чтобы поворотный стол освещался сверху. Для этого поверните сцену так, чтобы верхняя часть поворотного стола была обращена к вам. Основание должно выглядеть идеально прямоугольным. Изменение светлых и темных значений в разделе tridiv.com/d/4k6 на панели свойств будет регенерировать тени внутри сцены. Измените значение освещенности на 0.
Теперь проигрыватель готов к экспорту!
Завершение логотипа
Мы готовы добавить текст к логотипу и создать анимацию логотипа. Щелкните значок Редактировать на кнопке CodePen в левом нижнем углу Предварительный просмотр view, чтобы экспортировать код в CodePen. Важно отметить, что код CSS, сгенерированный Tridiv, не использует префиксы поставщиков, поэтому вам нужно будет использовать такие инструменты, как prefixr.com или leaverou.github.io/prefixfree, чтобы код работал в каждом браузере. Начните с закрытия панели JavaScript, поскольку мы не собираемся ее использовать. На панели HTML удалите тег стиля, примененный к .сцена div.
Разверните панель CSS и добавьте в конец следующий код:
.scene {преобразование: translateY (-140px) rotateX (-55deg); }
Здесь translateY (-140 пикселей) перемещает поворотный стол на 140 пикселей вверх, оставляя место для текста под ним. Затем rotateX (-55 градусов) устанавливает вертикальный наклон поворотной платформы.
Чтобы добавить текст, вам нужно добавить .заглавие div сразу после открытия #tridiv div на панели HTML. Внутри добавьте два пролеты> (.main-title и .sub-title), разделены по час />:
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', без засечек; font-weight: 300; размер шрифта: 24 пикселя; выравнивание текста: центр; межбуквенный интервал: 1,5 em; цвет: # 0099FF; } title hr {border: 1px solid # fa7f7a; маржа: 0,75em 0; } диапазон заголовков {дисплей: блок; }. основной заголовок {размер шрифта: 2.15em; }. подзаголовок {текст-отступ: .25em; }
Вуаля! Ваш логотип готов. Это должно выглядеть примерно так, как на изображении ниже. Когда ваша 3D-модель будет готова, вы можете использовать возможности CSS, чтобы сделать ее еще лучше, добавив стили, анимацию или события мыши: просто обращайтесь с 3D-моделью как с любым другим элементом HTML.
Анимировать логотип
Посмотрите анимацию с использованием логотипа здесь. По мере того, как части проигрывателя «падают» внутрь, каждая из них использует одну и ту же анимацию по ключевым кадрам с разными задержками. У фигур верхний атрибут установлен на 50%. Чтобы создать эффект падения, мы анимируем верхний атрибут из -400 пикселей к 50%:
@keyframes падают на {0% {top: -400px; } / * Мы запускаем анимацию, устанавливая фигуру на высоту 400 пикселей * / 100% {top: 50%; } / * затем мы заканчиваем его на исходной позиции * /}
Вы можете добавить эту анимацию ко всем фигурам следующим образом:
.shape {верх: -400 пикселей; анимация: падение на 1 с ослабляет 0 вперед; }
Установите для верхнего атрибута значение -400 пикселей и добавляем задержку:
.platter {задержка анимации: 1.05s; } .disc {задержка анимации: 1,35 с; } .button {задержка анимации: 1,5 с; } ...
Создайте финальный эффект "отскока", используя rotateX атрибут:
90% {преобразование: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {преобразование: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {преобразование: translateY (-4.5em) rotateX (660deg) rotateY (0deg); }
Именно так мы создали эту конкретную версию, но помните: ограничений нет!
Слова: Джулиан Гарнье
Эта статья впервые появилась в выпуске 248 сетевого журнала.
