Толщина обводки

Толщина обводки (stroke-width) в SVG напрямую влияет на визуальное восприятие анимации, создаваемой библиотекой Vivus, хотя сама логика построения анимации основана не на толщине линии, а на длине пути и управлении свойствами stroke-dasharray и stroke-dashoffset.

В SVG каждая линия задаётся через атрибут stroke-width, который определяет визуальную толщину контура:

<path d="M10 10 L200 10" stroke="black" stroke-width="2" fill="none"/>

При увеличении значения толщина линии растёт симметрично относительно геометрического пути. Это означает, что центр линии остаётся на координатах пути, а расширение происходит наружу и внутрь одновременно.

Для Vivus это критично, поскольку библиотека анимирует не саму геометрию, а процесс «проявления» обводки через маскирование dash-параметров.

Как Vivus использует stroke-dasharray

Vivus переводит каждый SVG path в последовательность длины линии и управляет её отображением через установку:

  • stroke-dasharray = totalLength
  • stroke-dashoffset = totalLength → 0
new Vivus('my-svg', {
  type: 'oneByOne',
  duration: 200,
  animTimingFunction: Vivus.EASE
});

Внутренне происходит эквивалент:

path.style.strokeDasharray = pathLength;
path.style.strokeDashoffset = pathLength;

и затем постепенное уменьшение stroke-dashoffset.

Важно: stroke-width не влияет на pathLength, но влияет на визуальную плотность анимации.

Влияние толщины линии на визуальное восприятие анимации

Хотя математически длина пути не меняется, визуальная интерпретация сильно зависит от толщины:

Тонкие линии

  • подчёркивают точность построения траектории
  • заметны дрожания кривых Безье
  • требуют более высокой точности SVG-экспорта
  • эффект «рисования карандашом»

Толстые линии

  • скрывают неровности сегментов path
  • визуально ускоряют восприятие анимации
  • сглаживают углы и стыки
  • создают эффект маркера или кисти

При использовании Vivus толстые обводки часто дают более «пластичный» результат, особенно в логотипах и иллюстрациях с упрощённой геометрией.

Особенности взаимодействия stroke-width с анимацией dash-offset

При анимации stroke-dashoffset важно учитывать, что:

  • толщина не влияет на скорость анимации
  • но влияет на момент визуального «замыкания» линии
  • при толстых линиях эффект завершения наступает визуально раньше

Это связано с тем, что перекрытие штриха становится заметным до полного достижения stroke-dashoffset = 0.

Caps и joins как часть визуальной толщины

На восприятие анимации через Vivus сильно влияют дополнительные SVG-атрибуты:

<path
  d="..."
  stroke="black"
  stroke-width="8"
  stroke-linecap="round"
  stroke-linejoin="round"
/>

stroke-linecap

  • butt — резкое окончание, подчёркивает «техническую» природу анимации
  • round — создаёт ощущение непрерывного рисования
  • square — визуально удлиняет путь, что может слегка искажать ощущение скорости

stroke-linejoin

  • miter — резкие углы, подходит для геометрических логотипов
  • round — сглаживание соединений, уменьшает визуальные разрывы
  • bevel — компромиссный вариант для стилизованных форм

В Vivus-анимации именно сочетание stroke-width + linecap + linejoin определяет характер «почерка» SVG.

Толщина и сложные кривые Безье

Кривые Безье в SVG при анимации Vivus могут демонстрировать артефакты:

  • при малой толщине заметны сегментации path
  • при большой толщине артефакты сглаживаются
  • на сложных формах визуально теряется точность интерполяции

Это особенно заметно в элементах с высокой кривизной:

  • логотипы с плавными петлями
  • рукописные шрифты
  • декоративные орнаменты

Толщина фактически выступает как визуальный «антиалиасинг второго уровня», компенсирующий неточности raster-to-vector конвертации.

Взаимодействие stroke-width с масштабированием SVG

SVG масштабируется через viewBox, и толщина обводки ведёт себя по-разному в зависимости от настройки:

Без vector-effect

<svg viewBox="0 0 200 200">
  • stroke-width масштабируется вместе с объектом
  • при увеличении SVG линии становятся толще
  • Vivus-анимация выглядит «плавающей» по плотности

С vector-effect

<path vector-effect="non-scaling-stroke"/>
  • толщина фиксирована в экранных пикселях
  • анимация сохраняет одинаковую визуальную плотность
  • предпочтительно для интерфейсных иконок

Для Vivus использование non-scaling-stroke часто делает анимацию более предсказуемой при адаптивных макетах.

Производительность и толщина линий

Хотя stroke-width напрямую не влияет на вычисление dash-параметров, он косвенно влияет на производительность рендеринга:

  • толстые линии увеличивают нагрузку на GPU при антиалиасинге
  • сложные пересечения с round join требуют больше вычислений
  • при большом количестве path заметна разница в FPS

В анимациях Vivus с десятками элементов рекомендуется:

  • упрощать stroke-width
  • избегать чрезмерных значений (>10–15px в веб-интерфейсах)
  • снижать complexity path перед экспортом

Практическая настройка Vivus с учётом толщины

Типичная конфигурация:

new Vivus('logo', {
  type: 'delayed',
  duration: 180,
  start: 'autostart',
  animTimingFunction: Vivus.EASE_OUT
});

SVG:

<svg viewBox="0 0 300 100">
  <path
    d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"
    stroke="black"
    stroke-width="6"
    fill="none"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

При такой конфигурации:

  • Vivus создаёт равномерное проявление кривой
  • толщина скрывает микродефекты кривых
  • round cap усиливает эффект «рисования от руки»

Визуальные паттерны, зависящие от толщины

Толщина обводки формирует разные типы анимационного поведения:

Линейный технический стиль

  • stroke-width: 1–2
  • строгие формы
  • максимальная точность path
  • используется в UI-иконках

Иллюстративный стиль

  • stroke-width: 3–6
  • сглаженные углы
  • мягкая анимация Vivus
  • подходит для декоративных элементов

Каллиграфический стиль

  • stroke-width: 6+
  • round caps обязательны
  • визуально воспринимается как рукописное движение
  • применяется в логотипах и заставках

Ошибки при работе с толщиной в Vivus-анимации

Распространённые проблемы:

  • несоответствие толщины и масштаба SVG приводит к «размытому» эффекту
  • слишком тонкие линии визуально «рвутся» при low FPS
  • чрезмерно толстые линии перекрывают детали при пересечениях path
  • отсутствие uniform stroke-width в многоэлементных SVG нарушает ритм анимации

Связь толщины с длиной пути и восприятием скорости

Хотя Vivus анимирует исключительно длину path, человеческое восприятие интерпретирует толщину как фактор скорости:

  • толстая линия воспринимается как более быстрая и «энергичная»
  • тонкая линия — как медленная и точная
  • одинаковая длительность анимации может казаться разной по темпу

Это связано с тем, что визуальная масса объекта влияет на когнитивное ощущение движения, даже при одинаковом времени выполнения dash-offset интерполяции.

Оглавление