Рубрики
Без рубрики

Анимирование головы 3d Creeper в CSS и JS!

Введение в 3D в CSS. Теги с JavaScript, CSS, WebDev, анимацией.

Я в настоящее время кодирую веб-приложение на основе вселенной Minecraft. В моей первой статье на dev.to (это честь), я делюсь с тобой, как я построил эту классную анимацию с головой 3D Creeper без библиотек, только CSS и ванильный JS Отказ

Этот учебник разделен на 2 части:

  • Моделирование головы Creeper
  • Анимирование модели с JavaScript

Для этого учебника я использую переменные синтаксиса ES6 и CSS.

Моделирование головы 3d Creeper

Первый шаг в этой работе состоит в том, чтобы моделировать голову Creeper. В моем случае это довольно легко, похоже на модель куба. Я использовал эти два актива:

  • Лицо Creeper, face.png.png.
  • Сторона его головы, сбоку

Каждая сторона куба представлена IMG тег и вложен в Div Элемент, здесь #creeper Отказ

По умолчанию в CSS вы можете разместить HTML-узлы в 2D-пространстве на основе оси X и Y. Так что все плоское.

В моем случае я хочу моделировать 3D-объект на моей веб-странице. Поэтому нам нужно изменить поведение по умолчанию CSS! Для этого просто укажите в CSS, которые вы хотите разместить свои элементы в 3D-пространстве:

:root {
    --size-creeper: 128px;
}
#creeper {
    width: var(--size-creeper);
    height: var(--size-creeper);
    /* the magic happens here */
    transform-style: preserve-3d;
}

Так что теперь я могу поместить именно каждый дочерний элемент #creeper на основе оси X, Y и Z. Вот пример для размещения верхней стороны куба:

.side {
    position: absolute;
    width: var(--size-creeper);
    height: var(--size-creeper);
}
.top { transform: rotateX(90deg) translateZ(calc(var(--size-creeper) / 2)); }

Следующий изометрический представление может помочь вам понять, как объекты расположены в трехмерном пространстве, и как вы можете играть с вращением, переводом и масштабами:

Я добавляю анимацию на #creeper Элемент, чтобы увидеть, если все правильно позиционируется! Для получения более подробной информации вы можете пройти код:

Анимирование головы Creeper

Вы можете найти несколько удивительных анимаций на CodePen.io. Один из последних творений, которые я видел, это один: https://codepen.io/jhojann/pen/wekbxv?page=3. . Я собираюсь взять вдохновение от этого творения, чтобы оживить мою голову Creeper на основе положения мыши. Давайте напишем какой-нибудь код JavaScript! Я представляю, что подпись моей функции что-то вроде этого:

const animate = (element, options = {}) => {
    ...
}
  • Элемент это элемент HTML, который вы хотите адить
  • Варианты Будет полезно, если вы хотите изменить параметры анимации.

Давайте код этой функции. Первое, что я хочу, – это точное положение центрированной точки происхождения моей головки Creeper. Чтобы получить тессы, я использую GetBoundingClientRect на #creeper :

const characterRect = element.getBoundingClientRect()
const originX = elementRect.left + elementRect.width / 2
const originY = elementRect.top + elementRect.height / 2

Охладите, так что теперь у нас есть точная точка происхождения головы. Следующим шагом является связывание положения курсора с вращением на оси X и Y. Я предполагаю, что когда курсор располагается точно на точке происхождения, вращение на оси X и Y должна быть равна 0DEG Отказ Для слушателя у меня есть что-то подобное:

// define default params 
options = Object.assign({}, { maxAngleX: 30, maxAngleY: 30 }, options)
// Re-maps a number from one range to another.
const map = (value, low1, high1, low2, high2) => low2 + (high2 - low2) * (value - low1) / (high1 - low1)
const follow = e => {
  try {
    const width = document.body.clientWidth
    const height = document.body.clientHeight
    // Support of smartphone/tablet
    const clientX = e.clientX || e.touches[0].clientX
    const clientY = e.clientY || e.touches[0].clientY
    const decY = map(clientY - originY, -height / 2, height / 2 , -options.maxAngleY, options.maxAngleY)
    const decX = map(clientX - originX, -width / 2, width / 2 , -options.maxAngleX, options.maxAngleX)
    element.style.transform = `rotateX(${-decY}deg) rotateY(${decX}deg)`
  } catch(e) {}
}

Так что теперь, давайте связываем мышь и коснитесь событий с этой моей функцией ручка :

document.body.addEventListener('mousemove', handle)
document.body.addEventListener("touchmove", handle, false)

Последний шаг – это позвонить наше анимация Функция, когда страница загружена:

document.addEventListener('DOMContentLoaded', _ => {
    followCursor(document.querySelector('#creeper'))
})

Это последний результат (переместите курсор посмотреть анимацию):

Я надеюсь, что вам понравилось эту статью. Я также открыл внимание любое улучшение. Я не дизайнер, просто парень, который любит кодировать и создавать прохладные вещи!

Оригинал: “https://dev.to/mcdostone/animating-a-3d-creepers-head-in-css-and-js–2j6a”

Читайте ещё по теме: