Библиотека для анимаций "Anime.js"
СайтоделПо результатам проведенного голосования, вы выбрали статью на тему создания анимаций при помощи библиотеки "Anime.js". Собственно приступаем к её изучению
"Anime.js" предназначена для добавления динамичной анимации HTML и SVG элементам страницы. Функционал библиотеки весьма обширен с учетом простоты использования. Поэтому приступаем!
Подготовка
Для начала, нам необходимо создать тестовый проект для работы. Он будет включать в себя базовую HTML-страницу, CSS-файл стилей, JavaScript-файл для скриптов и папку для картинок "img".
Если не знаете как сделать лучше по структуре, то повторите все как показано на скриншоте выше.
Помимо этого, в HTML файле необходимо создать базовый шаблон страницы. Это можно сделать быстро про помощи плагина Emmet, как мы рассказывали в одной из наших статей https://telegra.ph/sitodel-01-25
Установка
Для создания шаблона необходимо на сайте https://animejs.com/ нажать на кнопку "Download" и скачать файл "lib/anime.min.js" себе в папку "js". После этого подключить файл скрипта к базовому шаблону через тег <script>.
Далее создайте файл ваших скриптов в папке "js" под названием "sitodel.js" и подключите его в проекте после закрывающегося тега </body>. Там вы будете прописывать свои скрипты по библиотеке.
Помимо этого создайте в папке "css" файл "styles.css". В свою очередь подключите его через тег <link>. Таким образом у вас должна получиться такая структура проекта:
Использование
Первый делом создайте блок под названием "item" в базовом HTML-шаблоне между тегами "body". Его мы будем использовать сейчас для тестирования анимации.
Чтобы элемент был виден в принципе на странице, давайте пропишем ему базовые стили. Например, ширину и высоту в 30 пикселей и серый цвет.
.item {
width: 30px;
height: 30px;
background-color: #2f2f2f;
}
После этого в файле "sitodel.js" пропишем первую простую анимацию при помощи библиотеки "Anime.js".
anime({
targets: 'div',
translateX: 250,
rotate: '1turn',
backgroundColor: '#FFF',
duration: 800
});
Эта функция указывает, что необходимо применить анимацию ко всем элементам "div". А именно: переместить их вправо на 250 пикселей, сделать один оборот, изменить к концу анимации цвет элемента на белый и произвести это все за 800 миллисекунд.
Теперь рассмотрим пример с изменением значений в тексте. Для этого создадим блок с классом "battery-log".
В файле "sitodel.js" удалим предыдущий код и пропишем ниже указанный, сохраним страницу и обновим её в браузере.
В результате значение поля "charged" начнет изменяться со "0%" до "100%", а "cycles" с "0" до "130". Причем это будет происходить красиво при помощи анимации.
Теперь сделаем кое-что интересней. Так сказать резинку закрепленную в двух концах и с круглой прищепкой посередине. Которую можно натягивать и будет происходить соответствующая анимация.
Для начала в HTML-файл пропишите следующий код:
После этого удалите все из файла "sitodel.js" и добавьте в него код:
const svg = document.querySelector('svg');
const curve = document.getElementById('curve');
const controlPoint = document.getElementById('control-point');
const posXLabel = document.querySelector('.posX');
const posYLabel = document.querySelector('.posY');
const svgViewBoxWidth = 190;
let isMouseDown = false;
let point = {
x: 95,
y: 80
};
function updateCurve(x, y) {
let svgRect = svg.getBoundingClientRect();
let scale = svgRect.width / svgViewBoxWidth;
let width = (svgRect.width / scale) - 5;
let height = (svgRect.height / scale) - 6;
// update point coordinates to mouse/touch position when dragging
if (x && y) {
point.x = Math.ceil((x - svgRect.x) / scale);
point.y = Math.ceil((y - svgRect.y) / scale);
}
// clamp the coordinates to the limits of the SVG viewbox
point.x = point.x < 5 ? 5 : point.x;
point.y = point.y < 5 ? 5 : point.y;
point.x = point.x > width ? Math.ceil(width) : point.x;
point.y = point.y > height ? Math.ceil(height) : point.y;
// update coordinate labels
posXLabel.textContent = point.x.toFixed(2);
posYLabel.textContent = point.y.toFixed(2);
// update coordinates for control point and curve
controlPoint.setAttribute('cx', point.x);
controlPoint.setAttribute('cy', point.y);
curve.setAttribute('d', curve.getAttribute('d').replace(/Q (\d+(\.\d+)?) (\d+(\.\d+)?)/, `Q ${point.x} ${point.y}`));
}
function onMouseDown() {
isMouseDown = true;
}
function onMouseMove(ev) {
if (isMouseDown) {
updateCurve(ev.clientX, ev.clientY);
}
}
function onMouseUp() {
isMouseDown = false;
anime({
targets: point,
x: 95, // target X coordinate
y: 80, // target Y coordinate
duration: 1000,
easing: 'easeOutElastic(1.5, 0.2)',
update: function() {
updateCurve();
}
});
}
controlPoint.addEventListener('mousedown', onMouseDown);
controlPoint.addEventListener('touchstart', onMouseDown);
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('touchmove', (ev) => {
updateCurve(ev.touches[0].clientX, ev.touches[0].clientY);
});
document.addEventListener('mouseup', onMouseUp);
document.addEventListener('touchend', onMouseUp);
Для наглядного отображения в файле стилей удалите весь код и пропишите следующий:
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #FFF;
background: rgb(84,92,97);
background: radial-gradient(circle, rgba(84,92,97,1) 0%, rgba(23,41,48,1) 100%);
}
svg {
width: 90vw;
height: auto;
background-color: transparent;
//border: 2px dashed #FFF;
}
#control-point {
cursor: grab;
}
#control-point:active {
cursor: grabbing;
}
.coordinates {
text-align: center;
display: flex;
justify-content: center;
gap: 20px;
display: none;
}
После этого сохраните все файлы, зайдите в браузер и обновите страницу.
У вас появится белая полоска с желтой точкой посередине. Зажмите эту точку и потяните курсор мыши в сторону.
Точка перенесется в сторону, а за ней прогнется и полоска. Следом отпустите курсор мышки. Произойдет анимация натянутой резинки. Полоска вернется в свое положение, как и желтый шарик.
Таким образом можно добавлять различные анимации на своих веб страницах.
Другие наглядные примеры можно посмотреть на сайте "Codepen" в соответствующем разделе: https://codepen.io/collection/XLebem/
Так же рекомендуем изучить непосредственно документацию библиотеки: https://animejs.com/documentation.
Ссылка на канал: https://t.me/sitodel