Предсказание от We Wizards: сегодня вас ждут успех в делах и новые скиллы
Вместе с Даниилом Сарабьевым (разработчик We Wizards) сделаем сервис, позволяющий получить случайный набор закрытых карт таро с возможностью вскрыть выбранные карты.
Разделим наш сервис на два класса:
Контроллер будет отвечать за показ и скрытие карт, так же в нем будет крутиться рекурсивная функция, вызываемая с помощью метода requestAnimationFrame. В каждом цикле анимации она будет вызывать метод update у каждого инстанса класса TarotCard(об этом чуть позже).
Создадим базовую разметку, где пока просто подключим индексный файл скрипта с атрибутом type=”module” для поддержки импортов.
Добавим обертку с классом container, внутрь которой положим элемент c классом cards-container для вствки самих карт и кнопку с классом reset для сброса состояния приложения и получения новых карт.
Заранее сделаем темплейт, который будет использоваться внутри класса TarotCard:
/
Animatied tarot
Напишем «на ощупь» код контроллера, пока без отображения, так как логика довольно простая, не запутаемся.
import Card from "./TarotCard.js";
import cardsData from '../data.js';
export default class TarotController {
/**
* Контейнер для вставки резметки карт
* @type {HTMLElement}
*/
container;
/**
* Массив с текущими картами
* @type {TarotCard[]}
*/
cards = [];
constructor() {
this.container = document.querySelector('.cards-container');
this.setCards();
this.loop();
}
/**
* Установить случайный набор карт
* в указанном количестве
*
* @param {number} amount - Количество карт
*/
async setCards(amount = 5) {
this.reset().then(() => {
const shuffledCards = this.getShuffledCards();
for (let i = 0; i < amount; i ++) {
if (!shuffledCards[i]) {
return;
}
this.cards.push(new TarotCard(shuffledCards[i], i, amount, this));
}
});
}
/**
* Метод для обновления всех существующих карт
*/
loop() {
this.cards.forEach(card => card.update());
requestAnimationFrame(this.loop.bind(this));
}
/**
* Спрятать существующие карты и очистить контейнер
* с разметкой
*/
reset() {
return new Promise((resolve) => {
if (!this.cards.length) {
resolve(true);
return;
}
this.cards.forEach(card => card.fadeOut());
setTimeout(() => {
this.cards = [];
this.container.innerHTML = '';
resolve(true);
}, 800);
});
}
/**
* Получить перемешанный массив с картами
* @return {Object} Перемешанный массив с картами
*/
getShuffledCards() {
return cardsData
.map(val => ({ val, sort: Math.random() }))
.sort((a, b) => a.sort > b.sort ? 1 : -1)
.map(({ val }) => val);
}
}Стоит обратить внимание, что перед тем как задать набор карт в методе TarotController.setCards мы вызываем другой метод этого же класса, который сбрасывает текущее состояние приложения. Метод TarotController.reset возвращает промис, который резолвится сразу, если массив с картами TarotController.сards пустой, в ином случае мы прячем текущие карты, ждем окончания анимации и чистим разметку и массив TarotController.сards.
В методе TarotController.setCards после резолва промиса reset первым делом мы перемешиваем исходный массив с картами, который импортировали на 2 строке файла (import cardsData from '../data.js';). Затем с помощью обычного цикла for итерируемся указанное в параметре количество раз и создаем экземпляр класса TarotCard, куда передаем данные текущей карты (пока без разницы, что это будут за данные), текущий индекс карты, общее кол-во карт и сам инстанс нашего контроллера, чтобы у карты был к нему доступ.
Приступаем к самому интересному — пишем код класса TarotCard и реализуем все задуманные анимации, а именно:
анимация появления карточки (выплывание из верхней части странички);
анимация скрытия карточки (скрытие карты за нижнюю границу страницы);
анимация по наведению на карту (перемещение по оси Z, ближе к пользователю);
анимация появления («разворота») карты по клику.
Все перемещения будем реализовывать с помощью базовой функции инерции:
position += (targetPosition - position) * coeff;.
Получается, что переменная position каждый цикл анимации будет приближаться к целевой позиции на расстояние, равное разнице целевой и текущей позиции умноженной на коэффициент, который будет отвечать за скорость анимации.
Пришло время создать класс TarotCard. Заочно мы уже определили какие будут параметры конструктора и некоторые методы:
import TarotController from "./TarotController.js";
export default class TarotCard {
/**
* @type {TarotController}
*/
controller;
/**
*
* @param {*} data
* @param {number} index - Индекс текущей карты
* @param {number} amount - Общее кол-во карт
* @param {TarotController} controller
*/
constructor(data, index, amount, controller) {
this.controller = controller;
}
fadeOut() {}
fadeIn() {}
update() {}
}Метод fadeOut будет скрывать нашу карту в методе reset у класса TarotController. Заодно сделаем метод fadeIn для появления карты.
Метод update будет вызываться каждый цикл анимации в TarotController, тут будем расчитывать позицию и повороты карты.
Определим какие могут быть состояния у каждой карты и создадим соответствующие поля в классе TarotCard:
export default class TarotCard {
/**
* @type {TarotController}
*/
controller;
isFadeIn = false;
isFadeOut = false;
isHovered = false;
isRevealed = false;
...
}Сразу же добавим изменения состояний в наших созданных методах:
fadeOut() {
this.isFadeIn = false;
this.isFadeOut = true;
}
fadeIn() {
this.isFadeIn = true;
this.isFadeOut = false;
}Далее предлагаю сделать HTML-элемент, чтобы уже работать наглядно. Создаем метод TarotCard.createElement, который будем вызывать в конструкторе. В нем мы возьмем наш template #card, скопируем его и вставим в контейнер контроллера, пока без данных:
createElement() {
const clone = document.querySelector('#card').content.cloneNode(true);
this.element = clone.querySelector('.card');
this.controller.container.appendChild(this.element);
/**
* TODO: заполнить карточку данными
*/
}Теперь при создании экземпляра TarotCard у нас будет создаваться элемент внутри контейнера.
Напишем базовые стили и посмотрим что у нас получается:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.cards-container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
perspective: 1000px;
overflow: hidden;
}
.card {
min-width: 10rem;
aspect-ratio: 9/16;
background-color: red;
border-radius: 4px;
will-change: transform;
position: relative;
}
.reset {
z-index: 2;
cursor: pointer;
position: absolute;
left: 50%;
bottom: 2rem;
transform: translateX(-50%);
padding: 1rem 2rem;
}Пока ничего не произошло, нужно создать экземпляр класса TarotController. Сразу же повесим слушатель события — click-кнопку:
import TarotController from "./modules/TarotController.js";
const initTarot = () => {
const tarot = new TarotController();
const btn = document.querySelector('.reset');
btn.addEventListener('click', () => {
tarot.setCards();
});
};
initTarot();Получаем такой результат:
Отлично! Теперь приступим реализации анимаций.
Первым делом определим, какие свойства будем анимировать. По задумке карта должна иметь возможность перемещаться в трех направлениях и вращаться вокруг двух осей: — X и Y. Соответственно, будем использовать translate3d для перемещения и rotateX и rotateY для поворотов.
Обозначим следующие поля:
стартовую (дефолтную) позицию как
pos = {x: 0, y: 0, z: 0}целевую позицию, которую и будем изменять
targetPos = {x: 0, y: 0, z: 0}стартовое значения вращения как
rotate = {x: 0, y: 0}целевое значение вращения, которое и будем изменять
targetRotate = {x: 0, y: 0, z: 0}
rotate = {
x: 0,
y: 0,
};
pos = {
x: 0,
y: 0,
z: 0,
};
targetRotate = {
x: 0,
y: 0,
};
targetPos = {
x: 0,
y: 0,
z: 0,
};Далее расчитаем стартовую позицию, которая зависит от индекса карты и общего количества карт. По задумке карты должны вставать полукругом, а для этого нам нужны крайние значения поворота по оси Y и позиции по оси Z.
Допустим, угол будет изменяться от 30° до −30°, а позиция по оси Z от 6 до 0 и обратно.
Тут нам поможет функция линейной интерполяции, выделим ее в отдельный метод:
interpolation(value, min, max, newMin, newMax) {
let newValue = ( (value-min) / (max-min) ) * (newMax-newMin) + newMin;
return newValue;
}Эта функция принимает на входе число, изменяемое в интервале от min до max, и возвращает интерполированное значение в интервале от newMin до newMax.
Расчитаем значение на основе индекса карты и общего кол-ва карт, которое изменяется от -1 до 1.
Интерполировать будем index карты между значениями 0 и кол-во карт — 1 (это будет index последнего элемента). Полученное значение обозначим как basicCoeff:
const basicCoeff = interpolation(index, 0, amount -1, -1, 1);Соответственно, если нам нужно изменить угол от 30° до -30°, то полученное значение (от -1 до 1) умножим на -30, а позицию просто умножим на 6, получив тем самым изменение от -8 до 8 и просто возьмем модуль этого значения.
Можно попробовать расположить карты полукругом, в этом нам поможет функция косинуса:
Нам нужен отрезок от -PI/2 до PI/2. И так как у нас уже есть коеффициент изменения (от −1 до 1), то косинус будем искать от Math.PI * 0.5 * basicCoeff. Но пока-что значение нам не подходит, так как косинус от 0 равен 1. Вычтем из результата едницу и инвертируем значение, чтобы получить значение, которое изменяется от 1 до 0 и обратно к 1.
const cosCoeff = -(Math.cos(basicCoeff * Math.PI * 0.5) - 1).toFixed(2);Реализуем метод, назовем его TarotCard.calculateProps и сразу учтем возможное начальное состояние TarotCard.isFadeIn (карты будут появляться сверху, так что просто изменим начальную позицию Y):
/**
*
* @param {number} index
* @param {number} amount
*/
calculateProps(index, amount) {
const basicCoeff = this.interpolation(index, 0, amount - 1, -1, 1);
const cosCoeff = -(Math.cos(basicCoeff * Math.PI * 0.5) - 1).toFixed(2);
// Calculate rotation on Y-axis
this.rotate.y = -(basicCoeff * 30).toFixed(2);
// Calculate position on Z-axis
this.pos.z = cosCoeff * 8;
if (this.isFadeIn) {
this.pos.y = -50;
this.targetPos.y = -50;
}
}Вызовем этот метод в конструкторе и посмотрим что у нас получилось:
/**
*
* @param {*} data
* @param {number} index
* @param {number} amount
* @param {TarotController} controller
*/
constructor(data, index, amount, controller) {
this.controller = controller;
this.fadeIn();
this.calculateProps(index, amount);
this.createElement();
console.log('position', this.pos);
console.log('rotation', this.rotate);
}Сразу обозначим начальное состояние TarotCard.fadeIn, и создадим элемент уже реализованным методом. В консоли получим следующие сообщения:
Это означает, что у нас все сработало!
ополним метод TarotCard.fadeIn непосредственно самим появлением, а именно, после небольшой задержки просто изменим изначальное положение координаты Y на 0:
fadeIn() {
this.isFadeIn = true;
this.isFadeOut = false;
setTimeout(() => {
this.isFadeIn = false;
this.pos.y = 0;
}, 50);
}Теперь нужно плавно изменять поля targetPos и targetRotate в зависимости от состояния. При дефолтном состоянии эти поля должны всегда стремиться в сторону дефолтных значений.
Реализуем метод, который рассчитывает координаты в зависимости от текущего состояния карты. По каждому этапу оставлю комментарии в коде:
calculateTargetPosition() {
// Скопируем дефолтные значения. Будем использовать как основные
const output = { ...this.pos };
// В состоянии появления сдвинем карту наверх и немного назад,
// чтобы все карты появлялись из одной плоскости
if (this.isFadeIn) {
output.y = -50;
output.z = 0;
}
// В состоянии скрытия спрячем карту вниз и так же отодвинем
// в одну плоскость
if (this.isFadeOut) {
output.y = 50;
output.z = 0;
}
// Если навели курсор на карту, то подвинем ее немного ближе к нам
if (this.isHovered) {
output.z = 10;
}
// Вернем новые координаты
return output;
}По аналогии сделаем метод, расчитывающий вращение карты:
calculateTargetRotate() {
// Скопируем дефолтные значения. Будем использовать как основные
const output = { ...this.rotate };
// Если навели курсор на карту и она еще скрыта,
// то повернем ее перпендикулярно экрану
if (this.isHovered && !this.isRevealed) {
output.y = 0;
}
// Если навели курсор на карту и она раскрыта,
// то повернем ее обратно перпендикулярно экрану
if (this.isRevealed && this.isHovered) {
output.y = 180;
}
// Если карта просто раскрыта, то развернем ее на 180 градусов
if (this.isRevealed && !this.isHovered) {
output.y = this.rotate.y + 180;
}
// Добавим небольшой наклон по оси X и сбросим поворот по оси Y
// когда карта появляется или исчезает
if (this.isFadeIn || this.isFadeOut) {
output.y = 0;
output.x = this.isFadeIn ? 15 : -15;
}
// Вернем новые значения
return output;
}Теперь наконец-то реализуем изменение targetRotate и targetPos в сторону новых рассчитанных координат. Концепцию этой анимации я уже описал выше, примерно так это должно выглядеть:
const rotate = this.calculateTargetRotate();
// 0.1 - коеффициент изменения, проще говоря - скорость анимации
this.targetRotate.y += (rotate.y - this.targetRotate.y) * 0.1;Обобщим изменение полей, будем изменять значения в цикле по ключам объектов и немного нормализуем их, оставив по 2 цифры после запятой:
update() {
const rotate = this.calculateTargetRotate();
const pos = this.calculateTargetPosition();
Object.keys(pos).forEach(key => {
this.targetPos[key] += (pos[key] - this.targetPos[key]) * 0.1;
this.targetPos[key] = +(this.targetPos[key].toFixed(2));
});
Object.keys(rotate).forEach(key => {
this.targetRotate[key] += (rotate[key] - this.targetRotate[key]) * 0.1;
this.targetRotate[key] = +(this.targetRotate[key].toFixed(2));
});
}Еще немного и будем смотреть анимации, а пока создадим изменения состояний isHovered и isRevealed. Повесим слушатели событий на созданный элемент в отдельном методе и вызовем его после создания самого элемента:
addListeners() {
this.element.addEventListener('mousemove', () => {
this.isHovered = true;
});
this.element.addEventListener('mouseleave', () => {
this.isHovered = false;
});
// Будем показывать и скрывать карту по клику на нее
this.element.addEventListener('click', () => {
this.isRevealed = !this.isRevealed;
});
}/**
*
* @param {*} data
* @param {number} index
* @param {number} amount
* @param {TarotController} controller
*/
constructor(data, index, amount, controller) {
this.controller = controller;
this.fadeIn();
this.calculateProps(index, amount);
this.createElement();
this.addListeners();
}Все приготовления завершены, осталось связать наши координаты со стилями элемента. Для этого создадим метод TarotCard.setStyles, который будем вызывать в методе update после расчета координат:
setStyles() {
if (!this.element) {
return;
}
this.element.style.transform = `translate3d(${this.targetPos.x}rem, ${this.targetPos.y}rem, ${this.targetPos.z}rem)
rotateX(${this.targetRotate.x}deg) rotateY(${this.targetRotate.y}deg)`;
}Затем просто добавляем стили нашим картам и смотрим результат:
Все работает, осталось подставить нужные данные и навести CSS-мишуры.
До сих пор мы использовали в качестве данных массив с пустыми объектами. Теперь заполним его актуальными данными. В этом массиве будут лежать объекты с полями title и img, в первом будем хранить название карты, а во втором — путь до изображения карты.
Мы уже передаем эти данные в конструктор TarotCard, давайте сохраним их:
export default class TarotCard {
...
title = '';
img = '';
...
/**
*
* @param {*} data
* @param {number} index
* @param {number} amount
* @param {TarotController} controller
*/
constructor(data, index, amount, controller) {
this.controller = controller;
this.title = data?.title;
this.img = data?.img;
this.fadeIn();
this.calculateProps(index, amount);
this.createElement();
this.addListeners();
}
...
}Теперь можно добавить соответствующие картинки. Добавим в разметку шаблона элементы для рубашки карты и для изображения:
И следующие стили:
.card {
min-width: 10rem;
aspect-ratio: 9/16;
border-radius: 4px;
will-change: transform;
position: relative;
transform-style: preserve-3d;
}
.card__back,
.card__front {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 4px;
backface-visibility: hidden;
}
.card__back {
background-image: url('./img/back.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.card__front {
transform: rotateY(-180deg) translateZ(1px);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}Скачаем изображения таро и заполним массив с данными:
export default [
{
title: 'шут',
img: './img/cards/1.jpg',
},
{
title: 'маг',
img: './img/cards/2.jpg',
},
{
title: 'жрица',
img: './img/cards/3.jpg',
},
{
title: 'императрица',
img: './img/cards/4.jpg',
},
// и тд
]В методе, где создается элемент, реализуем подставление картинки в карту:
createElement() {
const clone = document.querySelector('#card').content.cloneNode(true);
this.element = clone.querySelector('.card');
this.controller.container.appendChild(this.element);
const cardFront = this.element.querySelector('.card__front');
cardFront.style.backgroundImage = `url(${this.img})`;
}Смотрим что получилось:
Мне захотелось еще добавить анимацию на mousemove, чтобы карта реагировала на движение мыши небольшими поворотами. Для этого создадим новое поле в классе Card для записи координат мыши и назовем его mousePos, по дефолту сделаем значения нулевыми {x: 0, y: 0}.
В существующий обработчик события mousemove добавим следующий код:
const rect = this.element.getBoundingClientRect();
this.mousePos.x = this.interpolation(e.clientX - rect.left, 0, rect.width, -1, 1);
this.mousePos.y = this.interpolation(e.clientY - rect.top, 0, rect.height, -1, 1);Тут мы интерполируем текущую позицию мыши в диапазоне от −1 до 1 и записываем в поле mousePos.
В уже созданный метод TarotCard.calculateTargetRotate добавим изменение поворота по двум осям, если текущее состояние isHovered.
Теперь метод выглядит так:
calculateTargetRotate() {
const output = { ...this.rotate };
if (this.isHovered && !this.isRevealed) {
output.y = this.mousePos.x * 10;
output.x = -this.mousePos.y * 10;
}
if (this.isRevealed && this.isHovered) {
output.y = this.mousePos.x * 10 + 180;
output.x = -this.mousePos.y * 10;
}
if (this.isRevealed && !this.isHovered) {
output.y = this.rotate.y + 180;
}
if (this.isFadeIn || this.isFadeOut) {
output.y = 0;
output.x = this.isFadeIn ? 15 : -15;
}
return output;
}После добавления побочных стилей для красоты, проект принимает законченный вид.
Тут нет жесткой привязки к отображению, и при желании ту же анимацию можно реализовать и путем WebGL.
Эта статья — не туториал, а скорее просто иллюстрация того, как можно занять себя на пару часов решением интересной и нетривиальной задачи.
Не стесняйтесь использовать наработки, вот ссылочка на гитхаб!
