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

Уеб анимация измина дълъг път. Разработчиците не само могат да направят анимация, използвайки комбо на CSS / SVG / JS, но има и такива десетки безплатни библиотеки за да спестите време в процеса.

Един от любимите ми е Anime.js, напълно свободен, с отворен код JavaScript библиотека за анимации.

Тази библиотека може направи всичко. е построен на JavaScript но също така разчита основно на CSS анимации. Можете да насочвате отделни елементи на страницата чрез DOM или дори можете да се насочите персонализирани SVG.

Цялата документация е самостоятелно хоствано в GitHub, така че може да се наложи да превъртите, за да намерите точно това, което търсите. Но всяка функция за анимация идва с няколко параметъра забавяне, продължителност и облекчаване.

Забележете тази библиотека не идва с много анимационни стилове по подразбиране. Anime.js е направени за разработчици които искат да персонализират своите анимации без да пишеш многословен код.

За жив пример, разгледайте Codepen писалката по-долу. Кодът е изключително прост но получавате истинска анимация с скуош & опъвам плюс очакване, и двете основи на анимацията.

Справедливо предупреждение: библиотеката на Anime.js е плътен. Не е толкова трудно да създадете персонализирана анимация, но трябва да го направите Разбирам някои основи като облекчаване и общ синтаксис на JavaScript за обратните обаждания и опциите.

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

Това е лесно една от най-добрите библиотеки за анимация за уеб разработчици и трябва да е вашето решение всяка сложна уеб анимация.

За да видя куп живи примери, разгледайте тази колекция от аниме.js демонстрации, хоствани на CodePen. По-долу съм вградил любимата си, която анимира цялото лого от нулата, с истинска жизненост.