Анимация с помощью AnimeJS

CSS-анимация помогает веб-сайту выглядеть более профессионально. Но CSS иногда может быть утомительным в использовании. Вот тут-то и приходит на помощь AnimeJS! Это библиотека javascript, которая помогает упростить этот процесс. Хотите знать, как это работает?

Давайте узнаем, как реализовать наш собственный проект в VSCode.

Sнастройка проекта

В этом проекте мы будем использовать Visual Studio Code в качестве нашей IDE. Он содержит несколько расширений, которые нам помогут.

Давайте начнем с создания папки нашей рабочей области ANIMEPROJECT. Мы будем использовать холст HTML и потребуем 3 файла index.html, main.js, и styles.css. AnimeJS доступен в виде пакета npm или тега скрипта CDN. Но мы будем использовать тег script, чтобы упростить проект.

Создайте index.html с шаблонным HTML, а затем скопируйте и вставьте script-tag в элемент body. Добавьте тег ссылки в файл style.css. Затем добавьте тег скрипта с main.js в качестве источника.

Теперь нам нужно скачать расширение VSCode Live Server. Это динамически обновляет нашу веб-страницу всякий раз, когда мы вносим изменения в любой файл.

Делаем простую волновую анимацию

Мы собираемся сделать простую волнообразную анимацию, используя несколько столбцов. Мы будем использовать элемент div для представления столбца. Его можно рассматривать как целевой элемент для объекта anime.

Используя объект аниме, мы можем манипулировать несколькими свойствами CSS элемента div, такими как перевод, поворот, наклон и т. д. Это снижает усилия в процессе анимации. Нам нужно только изменить свойство height.

Мы устанавливаем targets на значение элементов, к которым мы также хотим применить эффекты анимации. В данном случае это элемент div класса container.

В приведенном выше коде мы увеличиваем свойство height до 75 % от исходного значения в течение 400 мс. После этого мы уменьшаем его обратно до 40% от исходного значения в течение 800 мс.

Свойство easing помогает определить скорость, с которой происходит анимация. Скорость может быть линейной, квадратичной или кубической.
"направление" указывает, как продвигается анимация. Это может происходить «нормальным», «обратным» или «альтернативным» образом.
"loop" указывает, должна ли анимация повторяться непрерывно или нет.

Поскольку мы используем несколько элементов div для представления нескольких столбцов, нам потребуется несколько объектов anime. Код в конечном итоге будет выглядеть очень грязно!

Вот где сияет AnimeJS! Мы используем свойство под названием stagger, которое позволяет нам анимировать несколько элементов с помощью одного объекта.

А для простоты давайте добавим кнопку для паузы и воспроизведения анимации.

И вместе с этим мы сделали простую волновую анимацию, которую мы можем воспроизводить и приостанавливать.

Создание простых компонентов пользовательского интерфейса

Благодаря простоте и мощному характеру библиотеки AnimeJS у нее есть много полезных приложений для дизайна UX/UI. Например, если мы хотим реализовать простую кнопку отправить, мы можем использовать AnimeJS, чтобы сделать ее более привлекательной.

SVG-анимация

AnimeJS также имеет специальную функцию, называемую трансформацией SVG. Он позволяет анимировать переходы между двумя фигурами SVG. Для этого нам понадобится редактор векторной графики. Мы будем использовать Inkscape, потому что это бесплатно и с открытым исходным кодом!

Мы собираемся сделать простую анимацию, которая меняется от 3-стороннего многоугольника к 4-стороннему, затем к 6-стороннему, а затем обратно к 3-стороннему.

Способ, которым мы реализуем переход формы, заключается в создании формы с фиксированным количеством опорных точек. Для этого нам потребуется 9 опорных точек, как показано ниже.

Теперь экспортируем его в файл SVG и открываем в нем наш редактор. Если мы перейдем к тегу пути, мы найдем свойство с именем d, которое определяет путь, который нужно нарисовать, и состоит из опорных точек, о которых мы упоминали ранее.

Используя ту же структуру проекта для предыдущих анимаций, мы добавим эти значения в наш файл main.js. Мы создаем массив объектов со значениями d для каждого кадра. Затем передайте их в наш объект AnimeJS.

Этот код перебирает все точки привязки и обеспечивает плавный переход от одного кадра к другому. Когда мы запускаем код, мы получаем готовый продукт.

Заключение

Дизайн пользовательского интерфейса имеет решающее значение для того, чтобы веб-сайт привлекал и удерживал внимание своих пользователей. В то время как проекты, увиденные до сих пор, были простыми. Возможности использования этой библиотеки ограничены только фантазией дизайнера. Обязательно ознакомьтесь с документацией по AnimeJS, а также с потрясающими доступными проектами сообщества. Счастливого обучения!