Анимация обводки SVG: один маршрут рисования

Анимация обводки SVG может показывать линию, перемещая штрих вдоль ее контура. Используйте stroke-dasharray для задания штриха и промежутка, затем анимируйте stroke-dashoffset, пока обводка не станет видимой. MDN описывает их как свойства рисования обводки.

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

Начните с одной небольшой фигуры перед настройкой времени всего логотипа. Примеры ниже, созданные вручную, разделяют маршрут рисования, графику с заливкой и периметр, чтобы вы выбрали геометрию для своей анимации.

Чтобы переместить весь значок по кривой, используйте процесс траекторий движения SVG, который отделяет маршрут движения от графики.

Начните с открытого контура с обводкой

Этот исходный контур идет вправо, затем вверх. Его fill отключен, поэтому видимый знак целиком создается обводкой:

<div class="playing">
  <svg viewBox="0 0 140 130" role="img" aria-label="Open bent line">
    <path class="reveal route" pathLength="100" d="M30 90H100V30" />
  </svg>
</div>

Используйте этот CSS для появления за две секунды:

.reveal {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
 
.route {
  fill: none;
  stroke: #147d78;
  stroke-width: 16;
  stroke-linecap: butt;
}
 
.playing .reveal {
  animation: draw 2s linear forwards;
}
 
@keyframes draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
 
@media (prefers-reduced-motion: reduce) {
  .playing .reveal {
    animation: none;
    stroke-dashoffset: 0;
  }
}

pathLength="100" калибрует операции, основанные на расстоянии, под заданную длину 100. Справка по pathLength описывает эту нормализацию. Одно значение dash-array повторяется как штрих и промежуток, поэтому 100 дает штрих полной длины, за которым идет такой же длинный промежуток. Смещение этого узора на 100 скрывает обводку в этом примере; перемещение смещения к нулю показывает ее.

Здесь используйте числа без единиц. stroke-dashoffset: 100% не заменяет 100 нормализованных единиц контура. Справка MDN по dash-offset указывает, что процентные значения используют нормализованную диагональ области просмотра SVG, а не полную длину контура.

Пример использует окончание butt, чтобы остановленное начало было проще проверить. Другие стили окончаний могут изменить вид концов штриха. Выберите окончание под графику, затем проверьте начальный и конечный кадры в размере, в котором значок действительно появится. Для декоративных повторений сравните точечные обводки и расстояния окончаний перед выбором длин штрихов и промежутков.

Сравните маршрут с заполненным контуром

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

<path class="reveal filled" pathLength="100"
  d="M30 82H92V30H108V98H30Z" />

При следующем окрашивании изменение смещения штрихов не дает видимого эффекта:

.filled {
  fill: #ef8067;
  stroke: none;
}

Полоса остается заполненной, поскольку нет обводки для штрихования. Спецификация рисования SVG W3C различает окрашивание внутренней области фигуры и ее обводки.

Если вместо этого задать fill: none, добавить обводку и анимировать этот замкнутый контур, обводка следует периметру: вдоль одного края, через конец и обратно по другому краю. Она не становится единым маршрутом через центр полосы.

Это различие также объясняет, почему трассировка может давать двойные линии резки. В анимации нежелательным результатом может стать линия, обходящая внешнюю сторону штриха пера. Если нужному эффекту требуется центральный маршрут, используйте руководство по однолинейному SVG для проверки или подготовки этой геометрии.

Проверьте начало, середину и конец

Для проверки примера на паузе отключите его анимацию и задайте stroke-dashoffset равным 100, 50 и 0. Эти значения соответствуют началу, половине появления и конечному состоянию этого нормализованного контура. Это не проценты, введенные в свойство CSS.

Храните все три версии на небольшой тестовой странице с кнопками этих состояний. Средняя настройка особенно полезна: завершенные фигуры могут выглядеть похоже, а их маршруты рисования становятся очевидными посреди появления.

Мы проверили эти контуры, созданные вручную, в браузере при смещениях 100, 50 и 0 и один раз запустили двухсекундную анимацию. Заполненная полоса оставалась видимой, тогда как маршрут и периметр появлялись по-разному. Эта проверка демонстрирует эти исходные контуры; это не трассировка PerfectVector и не тест всех браузеров.

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

Определите начальную точку и порядок контуров

Первый контур начинается с M30 90, идет горизонтально до x=100, затем вертикально до y=30. Эта последовательность задает направление появления. Если рисование должно начинаться с верхнего конца, подготовьте контур в этом направлении, а не предполагайте, что анимация знает нужное движение пера.

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

Рисунок из нескольких несоединенных подконтуров может потребовать разделения на элементы для удобного управления временем. Отделяйте решения визуального дизайна и маршрута анимации. Соединение несвязанных частей только ради одного контура может создать связь, которой художник не предполагал.

Библиотека анимации может помочь управлять последовательностью, но входным данным все равно нужна правильная геометрия. Документация Motion по анимации SVG предлагает рисование линии через анимированное значение pathLength. Этот элемент управления библиотеки — отдельный API от стандартной калибровки SVG pathLength="100", используемой здесь; не копируйте значения одного примера в другой без проверки API.

Сохраните завершенную графику доступной без движения

Пример CSS по умолчанию задает смещение ноль и меняет его только во время анимации. Его медиазапрос уменьшения движения отключает появление и показывает завершенную линию. Руководство MDN по prefers-reduced-motion объясняет, как запрос определяет предпочтение пользователя.

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

Проверьте начальное, прерванное и завершенное состояния в реальном размещении. Если важный значок остается невидимым, когда анимация не работает, исправьте базовый стиль перед распространением эффекта на весь интерфейс. Успешная отдельная демонстрация не подтверждает поведение во всех браузерах, совместимость со всеми вспомогательными технологиями или показатели производительности.

Подготовьте растровую графику без обещания маршрута пера

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

Векторизация не устанавливает исходный порядок движения пера, не создает временную шкалу и не гарантирует одиночные центральные линии. Если появлению нужен один маршрут через штрих, нарисуйте или подготовьте его намеренно. Сохраните существующий векторный оригинал, если он доступен. SVG, который только встраивает растр, тоже нуждается в проверке встроенного изображения, прежде чем считать видимый знак редактируемой геометрией контуров.

Сначала примите статичную графику, затем последовательность рисования. Руководства блога по редактированию рассматривают очистку исходника перед слоем анимации.

Частые вопросы

Почему SVG остается видимым в начале анимации обводки? Проверьте, не является ли видимая часть заливкой. Настройки dash-array и dash-offset влияют на обводку, поэтому заполненная область может оставаться видимой при скрытой обводке.

Почему анимация рисует по обеим сторонам линии? Контур может описывать замкнутую границу вокруг толстого знака. Его обводка следует периметру. Подготовьте открытый маршрут рисования, если эффекту нужна одна линия через центр.

Можно ли использовать 100% для полной длины контура? Не как общую замену в stroke-dashoffset. Его проценты относятся к нормализованной диагонали области просмотра. Пример использует стандартный pathLength="100" со значениями штрихов без единиц.

Делает ли преобразование PNG в SVG его готовым для анимации рукописного рисования? Векторизация не дает автоматической гарантии порядка движения пера или центральной линии. Проверьте полученную геометрию и отдельно подготовьте контуры рисования и время.

Источники

1. MDN — stroke-dasharray — Определяет чередование длин штрихов и промежутков для обводки.
2. MDN — stroke-dashoffset — Объясняет смещения узора и основу процентных значений.
3. MDN — pathLength — Описывает стандартную калибровку расстояний для контуров и обводок.
4. W3C — SVG painting — Разделяет поведение заливки и обводки.
5. MDN — prefers-reduced-motion — Описывает предпочтение пользователя, используемое для статичного результата.
6. Motion — SVG animation — Описывает отдельный API библиотеки для рисования линии.

Проверьте один маршрут в начале, середине и конце перед последовательностью всей графики. Если исходник — растровый знак, подготовьте пробный редактируемый SVG, проверьте его геометрию и отдельно спланируйте маршрут рисования.