Подключение через CDN

Lottie Web подключается через CDN как обычная сторонняя JavaScript-библиотека, без сборщиков, npm и конфигураций. Такой способ используется в проектах, где важна минимальная настройка окружения или требуется быстрое внедрение анимаций After Effects через Bodymovin JSON.

CDN-версия Lottie Web представляет собой готовый UMD-бандл, который загружается через <script> и сразу становится доступен в глобальной области видимости через объект lottie.

Основные публичные CDN, через которые подключается библиотека:

  • cdnjs
  • unpkg
  • jsDelivr

Каждый из них предоставляет одинаковый функционал, различается только источник и политика кеширования.

Подключение скрипта

Базовый вариант подключения выполняется добавлением внешнего скрипта в HTML-документ:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>

После загрузки скрипта глобально появляется объект lottie, содержащий основные методы для управления анимациями:

  • lottie.loadAnimation
  • lottie.destroy
  • lottie.setQuality
  • lottie.play
  • lottie.pause

Подключение через jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.12.2/build/player/lottie.min.js"></script>

Подключение через unpkg:

<script src="https://unpkg.com/lottie-web@5.12.2/build/player/lottie.min.js"></script>

Во всех случаях важно использовать стабильную версию, чтобы избежать неожиданных изменений API при обновлениях.

Базовая структура использования после подключения CDN

После загрузки библиотеки создаётся контейнер, в который будет рендериться анимация:

<div id="lottie-container" style="width: 300px; height: 300px;"></div>

Далее инициализируется анимация через lottie.loadAnimation:

<script>
  lottie.loadAnimation({
    container: document.getElementById('lottie-container'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'animation.json'
  });
</script>

Параметр path указывает на JSON-файл, экспортированный из After Effects через Bodymovin-плагин. Этот файл содержит всю структуру анимации: слои, ключевые кадры, маски, эффекты и временную шкалу.

Рендереры и их влияние при CDN-подключении

Lottie Web поддерживает три основных режима рендеринга, которые одинаково доступны при CDN-интеграции:

  • svg — основной режим, обеспечивает масштабируемую векторную графику
  • canvas — используется для оптимизации производительности на слабых устройствах
  • html — редкий режим, основанный на DOM-элементах

Выбор рендерера влияет на производительность и качество отображения, но не требует дополнительных зависимостей при использовании CDN.

Пример смены рендерера:

lottie.loadAnimation({
  container: document.getElementById('lottie-container'),
  renderer: 'canvas',
  loop: true,
  autoplay: true,
  path: 'animation.json'
});

Загрузка JSON с удалённого источника

CDN-подключение библиотеки не ограничивает источник данных. JSON-анимации могут загружаться:

  • с локального сервера
  • с CDN-хранилища
  • с внешнего API
  • с облачных сервисов

Пример загрузки с внешнего URL:

lottie.loadAnimation({
  container: document.getElementById('lottie-container'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'https://example.com/assets/animation.json'
});

При таком подходе важно учитывать CORS-политику сервера, так как JSON-файл должен быть доступен для кросс-доменных запросов.

Контроль жизненного цикла анимации

После инициализации возвращается объект анимации, позволяющий управлять воспроизведением:

const anim = lottie.loadAnimation({
  container: document.getElementById('lottie-container'),
  renderer: 'svg',
  loop: true,
  autoplay: false,
  path: 'animation.json'
});

anim.play();
anim.pause();
anim.stop();

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

Уничтожение экземпляра

При динамической работе интерфейса важно освобождать ресурсы:

anim.destroy();

Метод destroy удаляет DOM-элементы, обработчики событий и очищает внутренние таймеры. Это критично при SPA-архитектуре, где компоненты могут многократно монтироваться и размонтироваться.

Подключение нескольких анимаций через CDN

Одна подключённая через CDN библиотека позволяет создавать неограниченное количество анимаций на одной странице:

<div id="anim1"></div>
<div id="anim2"></div>

<script>
  lottie.loadAnimation({
    container: document.getElementById('anim1'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'a1.json'
  });

  lottie.loadAnimation({
    container: document.getElementById('anim2'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'a2.json'
  });
</script>

Каждый экземпляр изолирован и не влияет на другие, если не используется общий state или внешняя логика управления.

Версионирование CDN и стабильность API

При использовании Lottie Web через CDN важно фиксировать версию в URL. Отсутствие версии приводит к автоматической загрузке последнего релиза, что может вызвать несовместимость API или изменения в рендеринге.

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

https://cdn.jsdelivr.net/npm/lottie-web@5.12.2/build/player/lottie.min.js

Использование диапазонов версий или «latest» снижает предсказуемость поведения и усложняет отладку.

Особенности загрузки в браузере

При подключении через CDN библиотека выполняется в глобальном контексте браузера. Это означает:

  • отсутствие модульной изоляции
  • доступ через window.lottie
  • потенциальные конфликты с другими глобальными библиотеками
  • зависимость от порядка загрузки скриптов

Если скрипт подключён асинхронно, доступ к lottie возможен только после события load или завершения парсинга документа.

Асинхронная инициализация

При загрузке через CDN часто требуется учитывать момент готовности DOM и самой библиотеки:

window.addEventListener('DOMContentLoaded', () => {
  lottie.loadAnimation({
    container: document.getElementById('lottie-container'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'animation.json'
  });
});

В случае подключения скрипта с атрибутом defer необходимость в дополнительной синхронизации часто отпадает, так как порядок выполнения сохраняется относительно DOM.

Совместимость с legacy-проектами

CDN-интеграция Lottie Web особенно часто используется в:

  • классических HTML-сайтах без сборки
  • CMS-системах
  • шаблонных конструкторах
  • рекламных лендингах
  • embedded-виджетах

Причина — отсутствие необходимости настраивать сборку и возможность внедрения одной строкой <script>.

Оптимизация загрузки через CDN

Для уменьшения времени загрузки анимаций применяются следующие практики:

  • использование сжатых JSON-файлов
  • кеширование на стороне CDN
  • предварительная загрузка (preload)
  • размещение JSON рядом с CDN-библиотекой

Пример preload:

<link rel="preload" href="animation.json" as="fetch" crossorigin="anonymous">

Это уменьшает задержку между инициализацией lottie.loadAnimation и началом рендеринга.

Поведение при ошибках загрузки

Если CDN-скрипт не загрузился, глобальный объект lottie не создаётся, и любые вызовы приводят к ошибкам выполнения. Если JSON-файл недоступен, анимация создаётся пустой или остаётся в состоянии ошибки без рендеринга.

Типичные причины:

  • недоступность CDN
  • блокировка ресурсов браузером
  • ошибки CORS
  • некорректный путь к JSON
  • повреждённый экспорт Bodymovin

Каждая из этих ситуаций влияет на инициализацию без участия внутренней логики библиотеки.

Роль CDN в архитектуре загрузки анимаций

Использование CDN для Lottie Web разделяет ответственность между источниками:

  • библиотека доставляется через высокодоступную сеть
  • анимации хранятся отдельно и могут обновляться независимо
  • фронтенд остаётся статическим и лёгким

Такой подход позволяет внедрять сложные визуальные эффекты без изменения основной архитектуры приложения.

Оглавление