Перформантные анимации с использованием KUTE.js: Часть 3, Анимация SVG

В предыдущем уроке из этой серии было показано, как анимировать различные свойства CSS любого элемента с помощью KUTE.js. Однако ядро ​​ядра не позволяет анимировать свойства, характерные для элементов SVG. Точно так же вы не можете анимировать морфинг SVG с различными формами контуров или рисование различных элементов SVG с помощью штрихов. Вам нужно будет использовать плагин KUTE.js SVG для выполнения любой из этих задач.

Прежде чем мы начнем, имейте в виду, что для работы с примерами из этого учебного пособия вам нужно будет включить как ядро ​​KUTE.js, так и плагин SVG.

Morphing SVG Shapes

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

Существует три способа преобразования SVG-форм с помощью этой библиотеки:

1. Вы можете использовать метод fromTo() чтобы указать начальный и конечный путь SVG для вашего элемента.
2. Вы также можете использовать метод to() и не указывать начальный путь. В этом случае начальное значение для морфинга будет определяться на основе значения атрибута d выбранного элемента, который вы хотите изменить.
3. Еще один вариант, который у вас есть, — передать последний путь в виде строки непосредственно анимации движения. Таким образом, вы можете избежать двух разных путей в вашем SVG.

Во время инициализации библиотека выбирает некоторые точки на основе указанных нами путей. Эти точки затем сохраняются в двух разных массивах. Наконец, эти массивы используются для интерполяции. Существует ряд параметров, которые можно настроить для управления поведением морфинга для разных путей.

• morphPrecision : как вы уже догадались, эта опция позволяет вам указать точность или точность морфинга. Он указывается как число, а более низкое значение означает более высокую точность. Имейте в виду, что более высокая точность приведет к большей точности, но это также отрицательно скажется на производительности. Эта опция не применяется, когда вы имеете дело с многоугольными формами или путями, где атрибут d состоит только из h , l и v . В таких случаях исходные пути многоугольника используются вместо выборки новых.
• reverseFirstPath : вы можете установить значение этой опции в true , чтобы полностью изменить путь рисования для вашей первой фигуры. Значением по умолчанию является false .
• reverseSecondPath : вы можете установить значение этой опции в true , чтобы изменить путь рисования для вашей второй фигуры. Его значение по умолчанию также false .
• morphIndex : Иногда, точки на пути могут покрывать большое расстояние во время морфинга. Вы можете контролировать это поведение, используя параметр morphIndex . Если этот параметр указан, он позволяет вращать конечную траекторию таким образом, чтобы все точки проходили наименьшее возможное расстояние.

Давайте использовать то, что мы узнали до сих пор, чтобы превратить значок батареи в значок закладки. Вы должны заметить, что я использовал строчные буквы l , чтобы указать путь в относительных терминах. Это обязательная разметка:

Следующий JavaScript создает объект анимации и запускает анимацию при нажатии кнопки:

Вот демонстрация, которая показывает приведенный выше код в действии. Я также добавил дополнительный элемент, в котором reverseFirstPath анимация устанавливает значение reverseFirstPath в значение true . Это поможет вам понять общее влияние различных параметров конфигурации на изменение. Длительность анимации была установлена ​​на 5 секунд, чтобы вы могли внимательно наблюдать обе анимации и определять различия.

В предыдущем примере основной путь не имел подпутей. Это сделало морфинг очень простым. Тем не менее, это не всегда так.

Давайте добавим дополнительный подпуть к нашей закладке, а также значок батареи. Если вы измените значки сейчас, вы увидите, что анимируется только первый подпуть. Второй подпуть просто исчезает в начале анимации и снова появляется в конце. Единственный способ оживить все подпути в таких случаях — это изменить подпути на отдельные пути. Вот пример:

Анимация SVG-штрихов

Еще один популярный анимационный эффект, связанный с SVG, включает в себя начинать с нуля, а затем рисовать предварительно определенную фигуру с использованием штрихов SVG. Это может быть использовано для анимации рисунка логотипов или других объектов. В этом разделе вы узнаете, как использовать KUTE.js для создания поглаживающей анимации для значка велосипеда Font Awesome .

Есть три способа анимировать SVG-штрихи в KUTE.js. Вы можете анимировать от 0% до 100%, установив значения fromTo в 0% 0% и 0% 100% . Вы также можете нарисовать часть формы SVG, установив значения, например, 0% 5% и 95% 100% . Наконец, вы можете установить конечное значение на 0% 0% , чтобы создать эффект стирания вместо эффекта рисования.

Вот код JavaScript, который я использовал для анимации нашего велосипеда:

Как видно из приведенного ниже примера, вам не нужно беспокоиться о нескольких подпутях внутри пути. KUTE.js анимирует все эти подпути по отдельности без каких-либо проблем. Продолжительность анимации используется для определения времени анимации самого длинного пути. Продолжительность хода для остальных подпутей затем определяется на основе их длины.

Анимация SVG-преобразований

Мы уже узнали, как анимировать значения CSS-преобразования во втором уроке серии. Плагин KUTE.js SVG также позволяет использовать атрибут svgTransform для поворота, перевода, масштабирования или перекоса различных элементов SVG на веб-странице.

Атрибут rotate принимает одно значение, которое определяет угол поворота. По умолчанию вращение происходит вокруг центральной точки элемента, но вы можете указать новый центр вращения, используя атрибут transformOrigin .

Атрибут translate принимает значения в формате translate: [x, y] или translate: x . Когда предоставляется одно значение, значение y предполагается равным нулю.

При наклоне элементов вам придется использовать skewX и skewY . В SVG нет поддержки skew[x, y] . Аналогично, атрибут scale также принимает только одно значение. Одно и то же значение используется для масштабирования элементов в направлениях x и y.

Вот фрагмент кода, который применяет все эти преобразования к прямоугольнику и окружности.

Я установил для параметра yoyo значение true чтобы после воспроизведения анимации в обратном порядке для свойств преобразования было установлено их начальное значение. Таким образом, мы можем воспроизводить анимацию снова и снова, нажимая на кнопки.

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

Последние мысли

Мы начали этот урок с изучения основ SVG-морфинга и анимации инсульта. Вы узнали, как правильно трансформировать сложные пути, имеющие подпути, и как мы можем создать стирающий эффект обводки вместо рисованного путем выбора правильных значений для атрибута draw . После этого мы обсудили, как мы можем использовать атрибут svgTransform для анимации различных преобразований.

В различных уроках мы видели, насколько мощным стал JavaScript. Это не без кривых обучения, и есть множество фреймворков и библиотек, которые также могут вас занять. Если вы ищете дополнительные ресурсы для обучения или использования в своей работе, посмотрите, что у нас есть на Envato Market .

Учебное пособие предназначено, чтобы познакомить вас со всеми функциями плагина SVG KUTE.js и помочь вам быстро начать работу. Вы можете узнать больше о плагине SVG, прочитав документацию .