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

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

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

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

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

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

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

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

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

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

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