Библиотека Anime.js. Разбор на примерах

Anime.js (/ˈæn.ə.meɪ/) - это достаточно легкая библиотека анимации JavaScript с простым, но мощным API.
Она работает со свойствами CSS, SVG, атрибутами DOM и объектами JavaScript.

Решил познакомиться с библиотекой Anime.js. На одном из Youtube-каналов нашел ряд любопытных видео по реализации простейших методов из библиотеки.

На видео с канала, можно посмотреть пошаговую реализацию и итоговый результат.

Я решил пройти по шагам из данного видео и разобрать получившийся код. Готовую реализацию можно посмотреть по ссылке - Background Animation AnimeJS

Разберем код:

• Создадим класс контейнер, куда будем добавлять созданные через JS элементы
• Добавим также текст для отображения поверх анимации

<div class="container">
    <h2>Background Animation<br>AnimeJS</h2>
</div>

• Создадим константу container и свяжем ее в DOM-дереве с классом .container
• Запустим цикл for, в котором на каждой итерации, создадим элемент div с классом .block и добавим созданный блочный элемент в родительский элемент с классом .container

        const container = document.querySelector('.container');
        for (let i = 0; i <= 100; i++) {
            const blocks = document.createElement('div');
            blocks.classList.add('block');
            container.appendChild(blocks);
        }

• На следующем шаге, создаем функцию animateBlocks, в которой будем организовывать обращение к библиотеке anime.js
• Укажем тот селектор, к которому будем обращаться. В данном случае - это класс .block

        function animateBlocks() {
            anime({
                targets: '.block',

• Дальше идет блок CSS преобразований (CSS Transforms)
• Значения translateX (сдвиг по горизонтали), translateY (сдвиг по вертикали), scale (масштаб) меняют первоначальные точки размещения и размеры трансформируемого объекта

                translateX: () => {
                    return anime.random(-700, 700)
                },
                translateY: () => {
                    return anime.random(-500, 500)
                },
                scale: () => {
                    return anime.random(1, 5)
                },

• easing - определяет временную функцию анимации.
• duration - определяет продолжительность анимации в миллисекундах.
• delay - определяет задержку анимации в миллисекундах.

                easing: 'linear',
                duration: 3000,
                delay: anime.stagger(10),

• complete - рекурсивно вызываем эту же функцию после ее завершения.

                complete: animateBlocks,
            })
        }

• Запускаем функцию на выполнение.

        animateBlocks();

С полной документацией, в которой можно найти массу примеров, можно ознакомиться по ссылке - Документация по Anime.js

Более расширенный вариант первого видео с использованием "сердечек", реализованных через CSS, можно посмотреть на этом видео.

Готовую реализацию можно посмотреть по ссылке - Hearts background AnimeJS