Haiku Animator выступает как инструмент визуальной разработки анимаций, ориентированный на генерацию структурированных анимационных описаний, совместимых с Lottie. Его ключевая ценность заключается в преобразовании дизайнерских сцен и таймлайнов в JSON-структуры, которые могут быть воспроизведены в браузере через библиотеку Lottie Web без потери семантики анимации.
Lottie Web в этом контексте выступает рантаймом, а Haiku Animator — авторской средой, формирующей декларативное описание движения, трансформаций и временных зависимостей.
Связка строится вокруг единого принципа: анимация описывается как дерево состояний во времени, а не как императивная последовательность команд.
Haiku Animator формирует промежуточное представление:
После экспорта формируется JSON-структура, близкая по формату к Lottie, но с возможными расширениями или промежуточными сущностями.
Lottie Web выполняет строго определённую роль:
Экспортируемая модель обычно сводится к следующей логической структуре:
Пример упрощённой структуры:
{
"v": "5.7.0",
"fr": 60,
"ip": 0,
"op": 120,
"layers": [
{
"ty": 4,
"nm": "Shape Layer",
"ks": {
"o": { "a": 0, "k": 100 },
"p": {
"a": 1,
"k": [
{ "t": 0, "s": [0, 0, 0] },
{ "t": 60, "s": [200, 0, 0] }
]
}
}
}
]
}В Haiku Animator подобные структуры формируются автоматически на основе визуального таймлайна.
Ключевой концепцией является слой как независимая анимационная единица.
Каждый слой содержит:
Временная шкала задаётся через:
ip — начало анимацииop — конец анимацииfr — частота кадровHaiku Animator интерпретирует таймлайн как непрерывную функцию изменения параметров, что напрямую транслируется в keyframe-модель Lottie.
Основная сложность при переходе от Haiku Animator к Lottie Web заключается в интерполяции.
Используются типы:
В JSON это отражается через контрольные точки:
{
"t": 30,
"s": [100, 100],
"e": [300, 100],
"i": { "x": [0.42], "y": [0] },
"o": { "x": [0.58], "y": [1] }
}Haiku Animator часто визуализирует эти кривые как графическое управление easing-функциями.
Lottie Web подключается как runtime-библиотека, ответственная за воспроизведение экспортированных анимаций.
Базовая модель использования строится вокруг контейнера и конфигурационного объекта.
import lottie from "lottie-web";
const animation = lottie.loadAnimation({
container: document.getElementById("animation"),
renderer: "svg",
loop: true,
autoplay: true,
path: "/animations/haiku-export.json"
});В случае экспорта из Haiku Animator путь path указывает
на сгенерированный JSON.
Lottie Web поддерживает несколько стратегий отрисовки:
Используется для векторных сцен. Обеспечивает:
Ограничение заключается в высокой нагрузке при сложных композициях.
Используется для:
Результат отрисовывается в bitmap-форме, что снижает гибкость пост-стилизации.
Используется редко, в основном для текстовых и DOM-ориентированных анимаций.
Haiku Animator часто формирует отдельный блок assets, который Lottie Web интерпретирует как внешние ресурсы:
Пример:
{
"assets": [
{
"id": "image_0",
"w": 512,
"h": 512,
"u": "images/",
"p": "img_0.png"
}
]
}Связь между слоями и assets осуществляется через идентификаторы.
После загрузки анимации управление осуществляется через объект instance.
Основные операции:
animation.play();
animation.pause();
animation.stop();
animation.goToAndStop(30, true);
animation.setSpeed(1.5);
animation.setDirection(-1);Haiku Animator не управляет этим уровнем напрямую, но экспортирует структуру, которая делает возможной подобную манипуляцию.
Lottie Web предоставляет события жизненного цикла анимации:
animation.addEventListener("complete", () => {});
animation.addEventListener("loopComplete", () => {});
animation.addEventListener("enterFrame", () => {});В контексте Haiku Animator такие события соответствуют логическим границам таймлайна, заданным в редакторе.
Экспорт в Lottie-совместимый формат сопровождается рядом преобразований:
Некоторые расширенные эффекты Haiku Animator могут быть:
Несмотря на близость моделей, не все возможности Haiku Animator напрямую транслируются в Lottie Web:
Lottie Web работает исключительно с заранее описанной декларативной моделью.
При работе с экспортами Haiku Animator важны следующие аспекты:
Lottie Web чувствителен к глубине иерархии композиции, особенно при SVG-рендеринге.
Вся система построена на дискретной временной сетке:
Haiku Animator формирует таймлайн, который затем становится независимым от реального времени объектом, интерпретируемым runtime-движком.
Haiku Animator оперирует декларативным описанием поведения:
Lottie Web превращает это описание в вычисляемый процесс:
Эта архитектурная разделённость обеспечивает переносимость анимаций между средами исполнения без изменения логики движения.