Легкая библиотека JavaScript для эффектной анимации SVG

Vivus представляет из себя легкий класс javascript (без зависимостей), который позволяет анимировать SVG изображения, делая их более привлекательными. В данном классе доступно множество различных вариантов анимации, а также присутствует возможность создания собственного сценария, задающего нужное поведение для изображений.

В основе Vivus лежит 3 главных типа анимации, каждый из которых может быть подвергнут тонкой настройке с помощью простых функций javascript. В эти 3 типа анимации входит:

  1. Delayed (задерживающийся) – каждый элемент проигрывается с задержкой на старте;
  2. Async (асинхронный) – каждая строка движется в асинхронном режиме, но начинает и заканчивает проигрываться одновременно;
  3. OneByOne (по одному) – каждый элемент движется друг за другом.

Анимация каждого элемента или всего SVG изображения целиком может быть переопределена. Это работает подобно функциям синхронизации анимации в CSS. Но вместо того, чтобы использовать громоздкую функцию cubic-bezier, этот класс задействует простую функцию javascript. Он принимает цифру в качестве параметра (в диапазоне от 0 до 1), а затем возвращает соответствующее число.

В дополнение, Vivus обладает очень удобной функцией Scenarize, позволяющей задавать пользовательские сценарии для анимации SVG. Все заданные значения устанавливаются непосредственно в DOM.



Для загрузки файла необходима регистрация

Добавить комментарий

Нам важно знать ваше мнение. Оставьте свой отзыв или ответ

Комментариев 0

Обновления на форуме