Необычные эффекты stroke-dasharray

Создаем анимацию краев облака

При совместном использование атрибутов stroke-dasharray и stroke-linecap=”round”, можно получить интересные эффекты визуализации.
У stroke-dasharray. два параметра – stroke-dasharray=”черта, пробел”

1. Заполнение строки svg элемента окружностями

для этого необходимо:

длину черты установить равную нулю – stroke-dasharray=”0, пробел”
а пробел установить равным ширине строки stroke-width

Итого:
stroke-dasharray=”0, 35″ stroke-width=”35″

при таких значениях параметров, строка элемента будет заполнена окружностями

xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400">

</svg>

2. Заполнение строки одной, двумя, n окружностями

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

Для вывода одной окружности на большой окружности, нужно брать полную длину строки большой окружности
perimeter = 2*Math.PI*R , где
PI – число ПИ
R – радиус окружности, на которой будут размещены маленькие окружности

xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400">

</svg>

3. Заполнение строки шестью окружностями

Код точно такой же, как и в примере с одной окружностью, но нужно поделить длину большой окружности на шесть равных частей

perimeter = 2*Math.PI*R / 6 = 157

stroke-dasharray=”0, 157″

xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400">

</svg>

Для других (некруглых) фигур, чтобы узнать полную длину пути, можно использовать метод Javascript getTotalLength()

4. Анимация спирали со строкой, состоящих из кружков

Идея состоит в том, что строку спирали с кружками, изначально закрывает маска, которая будет постепенно открывать строку с кружками.
Для реализации анимации строки маски, используется прием изменения атрибутов “stroke-dashoffset от максимального значения – “6265px” до нуля, реализуя тем самым постепенный рост видимой линии от нуля до максимума.

<style>

#path1 {

fill:none;

stroke:white;

stroke-width:25;

stroke-dasharray:6265;

stroke-dashoffset:6265;

}

#path2 {

fill:none;

stroke:white;

stroke-width:25;

stroke-linecap:round;

stroke-dasharray:0,25;

}

</style>

<defs>

<animate id="an"

attributeName="stroke-dashoffset"

values="6265;0;0;6265"

begin="svg1.click"

dur="18s"

fill="freeze"

repeatCount="2"

restart="whenNotActive" />

</path>

</mask>

</defs>

<text x="12" y="225" font-size="32px" fill="white" >Click me </text>

</svg>

Анимация спирали начнется после клика

5. Анимация изменения формы рамки

Морфинг формы рамки из окружности в треугольник и затем в прямоугольник, основан на анимации атрибута “d” path

Пути всех фигур рисуются в векторном редакторе. Чтобы анимация была гладкой, без рывков, необходимо выполнить два условия при создании path:

Количество узловых точек должно быть одинаковым во всех фигурах
Тип узловых точек с одинаковым расположением от начала, должен быть одинаковым во всех фигурах

xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" viewBox="0 0 400 400" >

<path

style="stroke:white; fill:none;stroke-width:18; stroke-linecap:round; stroke-dasharray:0,15"

d="m 350,200 c 0,27.23032 -7.25588,52.76593 -19.93968,74.77889 C 304.15623,319.7359 255.6124,350 200,350 144.67416,350 96.344223,320.04698 70.34191,275.47268 57.409394,253.30319 50,227.51687 50,200 50,117.15729 117.15729,50 200,50 c 82.84271,0 150,67.15729 150,150 z">

<animate

attributeName="d"

begin="svg1.click"

dur="3s"

fill="freeze"

repeatCount="3"

restart="whenNotActive"

values="

m 350,200 c 0,27.23032 -7.25588,52.76593 -19.93968,74.77889 C 304.15623,319.7359 255.6124,350 200,350 144.67416,350 96.344223,320.04698 70.34191,275.47268 57.409394,253.30319 50,227.51687 50,200 50,117.15729 117.15729,50 200,50 c 82.84271,0 150,67.15729 150,150 z;

m 285,200 c 15,25 55,90 65,110 -45,0 -94.3876,0 -150,0 -55.32584,0 -85,0 -150,-0.0962 C 64.378221,285 99.019238,225 113.45299,200 153.86751,130 170,100 200,50 c 45,79.01924 48.45299,85 85,150 z;

m 350,50 c 0,40 0,240 0,260 -45,0 -94.3876,0 -150,0 -55.32584,0 -85,0 -150,-0.0962 C 50,285 50,85 50,50 c 70,0 105,0 150,0 80,0 100,0 150,0 z;

</path>

</svg>

Анимация морфинга начнется после клика

6. Создаем облака с помощью двух строк stroke-linecap

Идея состоит в том, чтобы использовать два эллипса с очень широкими строками, у которых stroke-dasharray имеет первый параметр (черта) равный нулю и использовать атрибут stroke-linecap=”round”

<defs>

</linearGradient>

</defs>

</ellipse>

</ellipse>

</svg>

Чтобы увидеть, как располагаются эти широкие строки, они закрашены в разные цвета.

Далее делаем все цвета белыми, две строки сливаются, образуя неровные края облака

<defs>

</linearGradient>

</defs>

</ellipse>

</ellipse>

</svg>

7. Создаем анимацию краев облака

Для реализации анимации используем изменение размеров rx эллипса

<defs>

</linearGradient>

</defs>

</ellipse>

</ellipse>

<text x="12" y="145" font-size="32px" fill="silver" >Click me </text>

</svg>

⇚ Анимация рисования линии Анимации с использованием stroke-dasharray и stroke-dashoffset ⇛

Описание и примеры стандартных функций SVG

Маски, градиенты, фильтры, анимация, вертикальный и горизонтальный parallax

1. Заполнение строки svg элемента окружностями

2. Заполнение строки одной, двумя, n окружностями

3. Заполнение строки шестью окружностями

4. Анимация спирали со строкой, состоящих из кружков

5. Анимация изменения формы рамки

6. Создаем облака с помощью двух строк stroke-linecap

7. Создаем анимацию краев облака

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