Типы данных

В основе работы Vivus лежит обработка SVG-элементов, а именно путей (<path>), которые описываются строкой в формате path data. Это один из ключевых типов данных, с которыми работает библиотека.

SVG-путь представляет собой строку, содержащую команды построения векторной геометрии:

  • M — перемещение пера
  • L — линия
  • C — кубическая кривая Безье
  • Q — квадратичная кривая
  • Z — замыкание контура

Пример типичного значения:

"M10 10 L100 10 L100 100 L10 100 Z"

В Vivus такие строки используются как основной входной формат для анимации. Библиотека не преобразует геометрию, а оперирует уже готовым описанием пути.

Особенности строкового представления

SVG path data рассматривается как неизменяемая строка. Любое изменение структуры пути приводит к полной переработке анимации.

Ключевые свойства:

  • абсолютные и относительные координаты (M vs m)
  • последовательность команд важнее их количества
  • поддержка сложных составных путей
  • чувствительность к форматированию строки (пробелы, разделители)

Числовые типы данных

Числа используются в конфигурации Vivus для управления поведением анимации. Это всегда JavaScript Number, без дополнительных преобразований.

Основные параметры:

Длительность анимации

duration: 200

Тип: number

Определяет общее время анимации в условных единицах кадров или миллисекунд (в зависимости от реализации таймера внутри Vivus).

Скорость отрисовки

Часто косвенно выражается через параметры задержек, но всегда сводится к числовым значениям:

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

Толщина и визуальные параметры SVG

Хотя Vivus не изменяет стили напрямую, числовые значения могут влиять на восприятие анимации:

stroke-width: 2;

Числа в SVG остаются частью DOM-структуры, а не внутреннего состояния библиотеки.

Логические типы данных

Boolean используется для переключения режимов поведения анимации и оптимизации отрисовки.

Типичные флаги:

selfDestroy: true

или

start: false

Логические значения применяются для:

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

Особенность заключается в том, что boolean не имеет промежуточных состояний — либо включено, либо выключено, что делает их критичными для управления жизненным циклом анимации.

Объектные структуры конфигурации

Основная конфигурация Vivus передаётся в виде объекта. Это центральный тип данных, который объединяет все остальные.

new Vivus('my-svg', {
  type: 'delayed',
  duration: 200,
  start: 'autostart'
});

Основные свойства объекта

Объект конфигурации содержит:

  • строки (тип анимации, идентификаторы)
  • числа (длительность, задержки)
  • логические значения (режимы запуска)
  • функции (callbacks)

Каждое свойство строго типизировано на уровне логики библиотеки, хотя JavaScript не накладывает жёстких ограничений.

Вложенные структуры

В некоторых расширенных реализациях допускаются вложенные объекты:

{
  animTiming: {
    delay: 0,
    duration: 200
  }
}

Хотя базовая версия Vivus чаще использует плоскую структуру, концепция объектных конфигураций остаётся основной.

Строковые перечисления (enum-подобные значения)

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

Тип анимации

type: 'delayed'

Возможные значения:

  • delayed
  • sync
  • oneByOne
  • scenario
  • scenario-sync

Каждое значение изменяет алгоритм построения анимации:

  • delayed — последовательная задержка элементов
  • sync — синхронная отрисовка
  • oneByOne — поэлементная анимация сегментов
  • scenario — управление сценарием отрисовки
  • scenario-sync — комбинированный режим

Строки здесь выступают как псевдоперечисления, заменяя полноценные enum-структуры.

Функциональные типы данных

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

Callback-функции

onReady: function () {
  // логика инициализации
}

или

onComplete: function () {
  // завершение анимации
}

Функции принимают управление в ключевых точках:

  • после инициализации SVG
  • при завершении анимации
  • при каждом шаге отрисовки (в расширенных версиях)

Особенности использования функций

  • передаются как ссылки, а не вызовы
  • выполняются в контексте экземпляра Vivus
  • могут захватывать внешние переменные (closure)

Массивы SVG-элементов

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

Тип данных:

paths: [path1, path2, path3]

Каждый элемент массива — это DOM-узел <path> или его аналог.

Структура массива

  • индекс определяет порядок анимации
  • элементы могут иметь разную длину path data
  • поддерживается иерархическая группировка через <g>

DOM-узлы как тип данных

SVG-элементы передаются в Vivus в виде DOM-объектов.

Пример:

document.querySelector('#my-svg')

или:

element.querySelectorAll('path')

Свойства DOM-узлов

Vivus извлекает из них:

  • getTotalLength()
  • getAttribute('d')
  • стили stroke и fill
  • текущие трансформации

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

Числовые коллекции и вычисляемые массивы

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

Пример логической структуры:

lengths = [120.5, 300.0, 89.3]

Эти данные используются для:

  • расчёта прогресса анимации
  • распределения времени
  • синхронизации сегментов

Типы данных времени и тайминга

Vivus оперирует временными значениями, которые могут быть представлены:

  • числами (миллисекунды или условные единицы)
  • внутренними таймерами браузера
  • requestAnimationFrame интервалами

Основные формы представления

delay: 0
duration: 200

или вычисляемые значения:

step = totalDuration / numberOfSegments

Неопределённые значения и отсутствие данных

JavaScript-значения undefined и null также встречаются в конфигурациях Vivus.

undefined

Используется при отсутствии параметра:

start: undefined

означает применение значения по умолчанию.

null

Используется реже, но может означать:

  • отключение опции
  • явный запрет на использование значения

Приведение типов и неявные преобразования

Vivus не выполняет строгую типизацию, поэтому часто происходит неявное преобразование:

  • строки могут интерпретироваться как идентификаторы
  • числа могут приходить как строки "200"
  • boolean может быть приведён из числовых значений 0 и 1

Пример:

duration: "200"

будет интерпретирован как число.

Комплексные составные типы

В реальных сценариях Vivus использует комбинации типов:

{
  type: 'oneByOne',
  duration: 300,
  start: 'autostart',
  onReady: function () {},
  selfDestroy: true
}

Здесь одновременно присутствуют:

  • string (type, start)
  • number (duration)
  • function (onReady)
  • boolean (selfDestroy)

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

Оглавление