Анимация букв и слов

Анимация текста в SVG с Vivus строится вокруг преобразования буквенных форм в векторные контуры и управления параметрами обводки через stroke-dasharray и stroke-dashoffset. Библиотека Vivus ориентирована на поэтапное «прорисовывание» SVG-объектов, поэтому любые текстовые эффекты реализуются через разбиение текста на отдельные пути или группы путей.

SVG-текст в исходном виде (<text>) не содержит геометрии обводки, пригодной для покадровой отрисовки. Vivus работает исключительно с <path>, <line>, <polyline>, <polygon>.

Поэтому базовая трансформация текста выглядит так:

  • текст → векторные контуры
  • контуры → набор <path>
  • каждый путь → элемент анимации Vivus

На практике текст обычно преобразуется заранее в редакторе (Inkscape, Illustrator) или динамически через font-to-path механизмы.

Пример SVG после конвертации:

<svg viewBox="0 0 600 200">
  <path d="M10 80 L50 80 ..." />
  <path d="M60 80 L100 80 ..." />
</svg>

Каждый <path> соответствует части букв или целому символу.

Базовая инициализация Vivus

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

new Vivus('svg-element', {
  duration: 120,
  type: 'delayed',
  animTimingFunction: Vivus.EASE
});

Ключевые параметры:

  • duration — общее количество шагов анимации
  • type — стратегия воспроизведения
  • delayed — последовательная отрисовка путей
  • sync — одновременная анимация всех путей
  • oneByOne — строгая поэлементная последовательность

Подготовка текстовых контуров

Наиболее важный этап — формирование структуры SVG.

Разбиение по буквам

Каждая буква должна быть отдельным path:

<svg id="logo" viewBox="0 0 500 100">
  <g id="letter-a">
    <path d="M10 80 L30 10 L50 80 Z" />
  </g>
  <g id="letter-b">
    <path d="M60 10 L60 80 ..." />
  </g>
</svg>

Такая структура позволяет управлять буквами как независимыми единицами.

Разбиение по словам

Слова группируются через <g>:

<g id="word-hello">
  <path d="..." />
  <path d="..." />
  <path d="..." />
</g>

<g id="word-world">
  <path d="..." />
  <path d="..." />
</g>

Это позволяет применять Vivus на уровне слова или буквы.

Анимация отдельных букв

При анимации букв используется либо несколько экземпляров Vivus, либо один SVG с режимом oneByOne.

Вариант с одним экземпляром

new Vivus('text-svg', {
  type: 'oneByOne',
  duration: 200
});

Каждый path воспринимается как отдельный сегмент. Если буквы разложены на несколько path, анимация автоматически следует их порядку в DOM.

Контроль порядка

Порядок отрисовки определяется порядком узлов:

<path id="a" />
<path id="b" />
<path id="c" />

Изменение порядка DOM изменяет последовательность появления букв.

Анимация слов

Слова требуют группировки и отдельного управления таймингом.

Метод через группы <g>

const words = document.querySelectorAll('svg g');

words.forEach((word, index) => {
  new Vivus(word, {
    duration: 80,
    type: 'delayed'
  });
});

Каждое слово получает собственный экземпляр анимации.

Синхронизация появления слов

Добавление задержек:

words.forEach((word, index) => {
  setTimeout(() => {
    new Vivus(word, {
      duration: 100,
      type: 'oneByOne'
    });
  }, index * 400);
});

Таким образом создаётся эффект «печати» текста по словам.

Управление стилем обводки

Vivus опирается на свойства stroke:

path {
  fill: none;
  stroke: #000;
  stroke-width: 2;
}

Для более выраженного эффекта используется:

  • увеличенная толщина линии
  • отсутствие заливки
  • сглаживание концов линий
path {
  fill: transparent;
  stroke: #111;
  stroke-linecap: round;
  stroke-linejoin: round;
}

Техника stroke-dasharray и stroke-dashoffset

Внутри Vivus реализует управление длиной пути:

  • stroke-dasharray задаёт длину штрихов
  • stroke-dashoffset скрывает/показывает линию

Принцип:

dashoffset = длина пути → линия скрыта
dashoffset = 0 → линия полностью видима

Vivus автоматически вычисляет длину каждого path через getTotalLength().

Сценарии анимации (type: scenario)

Сложные текстовые композиции строятся через сценарии:

new Vivus('svg-text', {
  type: 'scenario',
  duration: 150,
  animTimingFunction: Vivus.LINEAR
});

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

Комбинирование буквенной и словесной анимации

Наиболее гибкая модель строится на вложенной структуре:

<svg id="text">
  <g class="word">
    <path class="letter" />
    <path class="letter" />
  </g>
  <g class="word">
    <path class="letter" />
    <path class="letter" />
  </g>
</svg>

Логика анимации:

  • сначала запускается Vivus по словам
  • затем внутри слова запускается анимация букв
document.querySelectorAll('.word').forEach((word, i) => {
  setTimeout(() => {
    new Vivus(word, { duration: 80, type: 'oneByOne' });
  }, i * 500);
});

Оптимизация сложных текстов

При большом количестве букв возникают проблемы производительности:

Снижение количества path

  • объединение простых форм
  • удаление лишних точек в контуре
  • оптимизация SVG через SVGO

Уменьшение duration

Короткие анимации снижают нагрузку на repaint:

duration: 60

Разделение сцен

Текст делится на блоки, анимация запускается по мере появления блока в зоне видимости.

Эффект «рисования каллиграфии»

Для имитации рукописного текста используются:

  • плавные кривые Безье
  • stroke-linecap: round
  • неравномерный duration по буквам

Пример вариативной скорости:

paths.forEach((p, i) => {
  new Vivus(p, {
    duration: 40 + i * 10,
    type: 'delayed'
  });
});

Сложные текстовые сцены

При создании титров и заставок применяется комбинированная схема:

  • фоновые SVG-слои появляются через sync
  • основные слова через oneByOne
  • акценты через ручные задержки
new Vivus('bg-layer', { type: 'sync', duration: 100 });

setTimeout(() => {
  new Vivus('main-text', { type: 'oneByOne', duration: 180 });
}, 300);

Геометрическая структура букв

Каждая буква векторного текста представляет собой:

  • замкнутые контуры
  • вложенные пути (внутренние пробелы)
  • пересечения кривых

Это влияет на визуальное поведение анимации: сложные буквы (например, «Ж», «М», «Ю») содержат больше sub-path и анимируются дольше.

Поведение при заливке

После завершения stroke-анимации часто применяется заливка:

onReady: function () {
  this.el.classList.add('drawn');
}
.drawn path {
  fill: #000;
  transition: fill 0.4s ease;
}

Итоговые архитектурные схемы анимации текста

  1. Путь = буква

    • максимальный контроль
    • высокая нагрузка при длинных текстах

  2. Путь = слово

    • баланс производительности и гибкости

  3. Путь = строка

    • минимальная детализация
    • быстрый рендер

  4. Гибридная модель

    • слова через Vivus
    • буквы через CSS/JS тайминги

Анимация текста в SVG через Vivus опирается на структурирование графем в векторные пути и управление порядком их отрисовки через DOM-иерархию и параметры воспроизведения библиотеки.

Оглавление