Vivus представляет из себя легкий класс jаvascript (без зависимостей), который позволяет анимировать SVG изображения, делая их более привлекательными. В данном классе доступно множество различных вариантов анимации, а также присутствует возможность создания собственного сценария, задающего нужное поведение для изображений.
В основе Vivus лежит 3 главных типа анимации, каждый из которых может быть подвергнут тонкой настройке с помощью простых функций jаvascript. В эти 3 типа анимации входит:
- Delayed (задерживающийся) – каждый элемент проигрывается с задержкой на старте;
- Async (асинхронный) – каждая строка движется в асинхронном режиме, но начинает и заканчивает проигрываться одновременно;
- OneByOne (по одному) – каждый элемент движется друг за другом.
Анимация каждого элемента или всего SVG изображения целиком может быть переопределена. Это работает подобно функциям синхронизации анимации в CSS. Но вместо того, чтобы использовать громоздкую функцию cubic-bezier, этот класс задействует простую функцию jаvascript. Он принимает цифру в качестве параметра (в диапазоне от 0 до 1), а затем возвращает соответствующее число.
В дополнение, Vivus обладает очень удобной функцией Scenarize, позволяющей задавать пользовательские сценарии для анимации SVG. Все заданные значения устанавливаются непосредственно в DOM.
Комментариев: 0