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

  1. Заполнение строки svg элемента окружностями
  2. Заполнение строки одной, двумя, n окружностями
  3. Заполнение строки шестью окружностями
  4. Анимация спирали со строкой, состоящих из кружков
  5. Анимация изменения формы рамки
  6. Создаем облака с помощью двух строк stroke-linecap/a>
  7. Создаем анимацию краев облака

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

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

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

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

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

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

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

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

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

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

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

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

stroke-dasharray=”0, 157″

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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