Вместе с Даниилом Сарабьевым (разработчик We Wizards) сделаем сервис, позволяющий получить случайный набор закрытых карт таро с возможностью вскрыть выбранные карты.
Разделим наш сервис на два класса:
общий контроллер (назовем его TarotController);
класс единичной карты (TarotCard).
Контроллер будет отвечать за показ и скрытие карт, так же в нем будет крутиться рекурсивная функция, вызываемая с помощью метода requestAnimationFrame. В каждом цикле анимации она будет вызывать метод update у каждого инстанса класса TarotCard(об этом чуть позже).
Создадим базовую разметку, где пока просто подключим индексный файл скрипта с атрибутом type=”module” для поддержки импортов.
Добавим обертку с классом container, внутрь которой положим элемент c классом cards-container для вствки самих карт и кнопку с классом reset для сброса состояния приложения и получения новых карт.
Заранее сделаем темплейт, который будет использоваться внутри класса TarotCard:
/<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animatied tarot</title> </head> <body> <div class="container"> <div class="cards-container"></div> <button class="reset">RESET</button> </div> <template id="card"> <div class="card"></div> </template> <script type="module" src="./js/index.js"></script> </body> </html>
Напишем “на ощупь” код контроллера, пока без отображения, так как логика довольно простая, не запутаемся.
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(); } ... }
Теперь можно добавить соответствующие картинки. Добавим в разметку шаблона элементы для рубашки карты и для изображения:
<template id="card"> <div class="card"> <div class="card__back"></div> <div class="card__front"></div> </div> </template>
И следующие стили:
.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.
Эта статья — не туториал, а скорее просто иллюстрация того, как можно занять себя на пару часов решением интересной и нетривиальной задачи.
Не стесняйтесь использовать наработки, вот ссылочка на гитхаб!
