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. Нижче я вбудував свою улюблену, яку анімація всього логотипу з нуля, з реальною бадьорістю.