Сделайте ваш сайт интерактивным и увлекательным с Velocity.js (без jQuery)

SVG Animation

Velocity может анимировать любое свойство с одним числовым значением, включая свойства CSS, применяемые к SVG, и специфичные для SVG свойства, например, fill , stroke , stroke-width stroke-color , rx , ry и т. Д.

Полный список свойств SVG, которые может анимировать Velocity.js, можно найти в документах Velocity по анимации SVG .

Демонстрация ниже показывает изображение улыбающейся рыбы в формате SVG. Пузыри исчезают и исчезают из виду, и их глаз мигает каждые несколько секунд. Если вы нажмете кнопку « Воспроизвести» , рыба переместится влево от своего контейнера, исчезнет, ​​вернется и обернется.

Предупреждение об ошибке: к сожалению, браузеры IE / Edge не поддерживают CSS-преобразования, и Velocity не предоставляет исправления совместимости для этой ошибки. Таким образом, демонстрация не работает так, как ожидалось в этих браузерах.

Подготовьте SVG-изображение к анимации

Прежде чем писать какой-либо код, убедитесь, что ваше SVG-изображение готово для анимации с помощью Velocity.js.

• Добавьте атрибуты класса или ID к частям SVG, которые вы планируете анимировать. Это облегчит вам нацеливание этих частей в JavaScript
• Если вы хотите анимировать некоторые элементы целиком, оберните эти элементы внутри тегов <g></g> и добавьте атрибут класса или атрибут ID для легкой манипуляции в вашем коде JavaScript
• Упростите и оптимизируйте свою графику.

Код JavaScript с Velocity.js

Еще раз упакуйте большую часть вашего кода в функции для большей гибкости и меньшего количества повторений.

Например, вот функция, которая перемещает рыбу:

 const moveFish = (elem, moveBy, initialPos, btn, bool = false) => { Velocity(elem, { translateX: [moveBy, initialPos] }, { duration: 5000, easing: 'linear', complete: () => { if(bool) { btn.disabled = false; } } }); }; 

Синтаксис SVG-анимации не отличается от анимации HTML-элементов. Вот что код выше делает более подробно:

• Код выполняет вызов Velocity для элемента и использует принудительную подачу для установки значения свойства translateX , которое определяет как конечную, так и начальную позиции для элемента. Когда вы позже вызовете эту функцию, аргумент, который вы предоставите для параметра элемента, будет ссылкой на рыбу SVG.
• Он использует встроенный метод complete () Velocity.js, чтобы активировать кнопку Play только после окончания всей анимации. Это предотвращает повторное нажатие кнопки во время анимации, которая создаст очередь анимации.
• После завершения анимации и повторного нажатия кнопки « Воспроизведение» пользователи могут выбрать воспроизведение анимации, если они того пожелают. Эта функциональность работает через параметр bool . Если значение bool равно true, когда moveFish() функция moveFish() , собственный метод Velocity.js complete () внутри moveFish() запускается в конце анимации и повторно активирует кнопку
• Наконец, обратите внимание на другую особенность ES6 — параметры по умолчанию . Вы устанавливаете значение по умолчанию, в этом случае это bool = false , и когда вы вызываете moveFish() вы можете пропустить соответствующий аргумент, потому что то, что вы установили в качестве значения по умолчанию, будет применено автоматически . Кроме того, вы можете изменить значение по умолчанию, явно введя аргумент. Чтобы увидеть это в действии, обратите внимание на следующий бит кода, который содержит вызов функции выше.

Чтобы добиться разных движущихся анимаций, вызывайте moveFish() несколько раз, используя разные аргументы внутри главной функции, например:

 const play = () => { moveFish(fish, '-1000', 0, btnPlay); moveFish(fish, 0, '-1000', btnPlay, true); //more functions here }; 

Обратите внимание на различные способы вызова moveFish() : первый раз без пятого аргумента и второй раз с пятым аргументом со значением true . В первом случае значение для пятого аргумента является параметром по умолчанию, который вы moveFish() при написании функции moveFish() .

 btnPlay.addEventListener('click', function() { this.disabled = true; play(); }); 

 Velocity(formEl,'transition.bounceUpOut', 500);