Анимация SVG с помощью DrawSVGPlugin
Сейчас всё чаше на сайтах встречаются анимированные элементы SVG. Пример ниже:
See the Pen ojXYNo by Alexey (@CreativeSeo33) on CodePen.
Существуют различные плагины для анимации SVG. В данной статье рассмотрим плагин DrawSVG от GreenSock.
Анимацию SVG можно контролировать за счет CSS свойств stroke-dashoffset and stroke-dasharray.
GreenSock DrawSVGPlugin — основные настройки
drawSVG — может быть задан в процентах или абсолютных единицах.
Задать сегмент можно указав два параметра через пробел "40% 60%"
drawSVG:true — контур будет заполнен на 100%.
Пример анимации с DrawSVGPlugin
Давайте посмотрим простое демо с использованием DrawSVGPlugin.
See the Pen All Shape Types by Petr TIchy (@ihatetomatoes) on CodePen.
Первая анимация
| 1 | tl.staggerFromTo(shapes, 1, {drawSVG:"100%"}, {drawSVG:"50% 50%"}, 0.1) |
Здесь анимация происходит от полностью заполненного контура drawSVG:"100%" до центра контура drawSVG:"50% 50%".
Вторая анимация
| 1 2 | .fromTo(shapes, 0.1, {drawSVG:"0%"}, {drawSVG:"10%", immediateRender:false},"+=0.1") .staggerTo(shapes, 1, {drawSVG:"90% 100%"}, 0.5) |
Здесь сначала заполняется 10% контура drawSVG:"10%", затем заполоненная часть контура двигается к началу drawSVG:"90% 100%".
Третья анимация
| 1 | .to(shapes, 1, {rotation:360, scale:0.5, drawSVG:"100%", stroke:"white", strokeWidth:6, transformOrigin:"50% 50%"}) |
Здесь элементы вращаются и увеличиваются одновременно. Затем меняется цвет контура на белый stroke:"white" и ширина strokeWidth:6.
Четвертая анимация
| 1 | .staggerTo(shapes, 0.5, {stroke:"red", scale:1.5, opacity:0}, 0.2) |
В финальной части анимации элементы цвет контура меняется на красный stroke:"red”. Элементы увеличиваются и исчезают scale:1.5, opacity:0.
(1 votes, average: 5,00 out of 5)
Загрузка...
