Линейный прогресс бар SVG можно реализовать с помощью изменения или:
1 stroke-dashoffset
от нуля до максимального значения равного полной длине линии.
Этот способ подробно описан в статье: Анимация рисования линии
2. stroke-dasharray
при этом способе в начальной точке роста линии прогресс бара значение
dash – длина черты, равно нулю, а gap – длина пробела максимальна.
stroke-dasharray:0,628;
При совместном использование атрибутов stroke-dasharray и stroke-linecap=”round”, можно получить интересные эффекты визуализации.
У stroke-dasharray. два параметра – stroke-dasharray=”черта, пробел”
для этого необходимо:
Итого:
stroke-dasharray=”0, 35″ stroke-width=”35″
при таких значениях параметров, строка элемента будет заполнена окружностями
|
1 2 3 4 5 |
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400"> <circle cx="200" cy="200" r="150" fill="none" stroke="dodgerblue" stroke-dasharray="0, 35" stroke-width="35" stroke-linecap="round"/> </svg> |
Для создания разнообразных примеров прогрессбаров, лоадеров и других анимированных объетов, применение stroke-dashharray, stroke-dashoffset является основным способом.
В статье: Анимация рисования линии используется только изменение атрибута stroke-dashoffset от максимума до нуля.
Но если использовать комбинацию stroke-dasharray и stroke-dashoffset, то можно получить интереснейшие эффекты.
Форма прогрессбара неважна, она может быть любой,- или прямая линия или замкнутая фигура.
Главное это правильно указать максимальную длину контура.
Увеличение заполняющей полосы прогрессбара может быть реализовано двумя способами:
Полная длина окружности равна
C = 2 x PI x R или 2 x 3.14 x 50 = 314px
При stroke-dashoffset = “314” линия будет полностью скрыта
При stroke-dashoffset = “0” линия будет полностью видна
Изменяя значение Stroke-dashoffset от максимума до нуля получим эффект заполнения прогрессбара
В последнее время набирают популярность анимационные эффекты рисования линий с чистого листа. Магические картинки анимации игровой консоли или дядьки в кресле копируются с сайта на сайт. Конечно это круто выглядит и наверняка у вас появилось желание сделать, что нибудь подобное для своего сайта. Для этого есть несколько плагинов реализации эффекта анимации линий. Но, я не буду перечислять их, объяснять как они работают, как плагины можно “заточить” под себя. При желании всё это можно найти.
Задача данной статьи иная – понять, как реализуется эффект анимации, отчего зависит направление, последовательность и продолжительность рисования линий.
Почему один файл SVG можно заставить отрисовываться, а другой нет.
Далее будет логично заняться более интересными вещами – последовательной и параллельной анимацией нескольких фрагментов изображения, реализацией плавного преобразования одной векторной картинки в другую.
Продолжить чтение