Легкая библиотека 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.



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

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

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

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent

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

Новые обсуждения на Форуме