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

Для создания разнообразных примеров прогрессбаров, лоадеров и других анимированных объетов, применение stroke-dashharray, stroke-dashoffset является основным способом.
В статье: Анимация рисования линии используется только изменение атрибута stroke-dashoffset от максимума до нуля.
Но если использовать комбинацию stroke-dasharray и stroke-dashoffset, то можно получить интереснейшие эффекты.

Начнем со стандартной техники реализации прогрессбара

Форма прогрессбара неважна, она может быть любой,- или прямая линия или замкнутая фигура.
Главное это правильно указать максимальную длину контура.
Увеличение заполняющей полосы прогрессбара может быть реализовано двумя способами:

1. Изменение stroke-dashoffset от максимума до нуля

icon Lion-break


Полная длина окружности равна
C = 2 x PI x R или 2 x 3.14 x 50 = 314px
При stroke-dashoffset = “314” линия будет полностью скрыта
При stroke-dashoffset = “0” линия будет полностью видна

Изменяя значение Stroke-dashoffset от максимума до нуля получим эффект заполнения прогрессбара


2 Изменение параметров stroke-dasharray от минимальной длины черты и максимальной длины пробела до максимальной длины черты и минимальной длины пробела: stroke-dasharray(min, max | max, min)


При stroke-dasharray=”0,314″ линия будет полностью скрыта, так как первый параметр, – это длина черты равна нулю, а второй параметр – пробел имеет максимальную длину
При stroke-dasharray=”314,0″ линия будет полностью показана, так как черта имеет максимальную длину, а пробел равен нулю.

Анимация заполнения прогрессбара из одной точки

На мой взгляд это интересная техника. Реализуется за счёт деления всей окружности на две равные части, которые изначально невидны. Как известно stroke-dasharray может иметь, как одну пару параметров: длина черты + длина пробела, так и несколько пар. Будем использовать две пары параметров stroke-dasharray

Если полная длина равна 314, то можно разделить всю окружность на две равные части
stroke-dasharray=”0,157 0,157″
По порядку: 0 – черта равна нулю, 157 – длина пробела. Вот таким образом скрывается одна половина окружности
Далее для второй половины окружности: 0 – черта равна нулю, 157 – длина пробела

При значении stroke-dasarray=”0,0 314,0″ линия покажется полностью, так как значение третьего параметра длины черты равно 314px, что соответствует полной длине окружности.
Анимируя изменение параметров stroke-dasarray, соответствующее невидимости линии до полной видимости values=”0,157 0,157;0,0,314,0″ получим анимацию заполнения прогрессбара из одной точки. Где в формуле values эти два состояния (видимой ; невидимой линии) разделены точкой с запятой.

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

В примере ниже использован октагон (восьмиугольник) Полная длина контура фигуры равна 330px


Также возможно сдвинуть начальную точку заполнения в любую сторону. Например для начальной точки слева сдвигаем на четверть с помощью
stroke-dashoffset=”-82.5″

Заполнение прерывистой линией stroke-dasharray

Заполнение прерывистой линией имеет некоторые нюансы. Так как назначив, допустим stroke-dasharray=”3.14, 3.14″ мы тем самым разбиваем круг на 50 равных частей.


И он оказывается полностью заполненным. Анимация сдвига (заполнения) с помощью stroke-dashoffset=”314;0″ вызовет только вращение.
Для реализации эффекта заполнения необходимо использовать другие техники. Например можно создать иллюзию заполнения круга прерывистой линией с помощью анимации маски.

Использование маски для создания заполнения прерывистой линией

Как сказано выше, предварительно заполняем круг прерывистой линией
stroke-dasharray=”3.14, 3.14″


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

Анимация прерывистой линии из одной точки

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

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