Anime.js - легкая библиотека анимации JavaScript

Веб-анимация прошла долгий путь. Мало того, что разработчики могут создавать любую анимацию, используя комбинацию CSS / SVG / JS, но есть десятки бесплатных библиотек, чтобы сэкономить время в процессе.

Один из моих любимых Anime.js, полностью бесплатная библиотека анимации JavaScript с открытым исходным кодом.

Эта библиотека может сделать все это. Он построен на JavaScript, но также сильно зависит от CSS-анимации. Вы можете настроить таргетинг на отдельные элементы страницы через DOM или даже на собственные SVG.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Читайте также: 8 библиотек JavaScript для анимации SVG

Вся документация размещается самостоятельно на GitHub, поэтому вам может понадобиться прокрутить, чтобы найти именно то, что вы ищете. Но каждая функция анимации имеет несколько параметров, таких как задержка, длительность и замедление.

Обратите внимание, что в этой библиотеке нет многих стилей анимации по умолчанию. Anime.js создан для разработчиков, которые хотят настроить анимацию без написания подробного кода.

Для живого примера, проверьте Кодовая ручка ниже, Код чрезвычайно прост, но вы получите правдоподобную анимацию с сквошом и растяжкой плюс ожидание – оба основных принципа анимации.

Увидеть перо Несколько значений времени – anime.js Джулиан Гарнье (@juliangarnier) на CodePen,

Справедливое предупреждение: библиотека Anime.js плотная. Не так сложно создать собственную анимацию, но вам нужно понимать некоторые основы, такие как упрощение и общий синтаксис JavaScript для обратных вызовов и опций.

Но вся необходимая информация находится на страница репо, в том числе множество примеров кода и подробных таблиц документации. И вы можете просматривать открытые отчеты об ошибках или проверить поддержку браузера, которая в настоящее время включает все основные браузеры и IE 10+.

Это, безусловно, одна из лучших библиотек анимации для веб-разработчиков, и она должна стать подходящим решением для любой сложной веб-анимации.

Чтобы увидеть кучу живых примеров, проверьте эта коллекция демоверсий Anime.js, размещенных на CodePen. Ниже я встроил мое любимое который оживляет весь логотип с нуля, с реальной живостью.

Увидеть перо анимация логотипа anime.js Джулиан Гарнье (@juliangarnier) на CodePen,

Читайте также: 10 CSS3 инструментов анимации, которые вы должны добавить в закладки