Об этом проекте

dotLottie Web — это официальный плеер LottieFiles для встраивания анимаций Lottie (.json) и dotLottie (.lottie) в веб-приложения. Он использует ядро Rust + WASM из dotlottie-rs с векторным рендерером ThorVG. Плеер поддерживает программный рендеринг Canvas2D, WebGL2 и экспериментальные бэкенды WebGPU; переключение бэкендов осуществляется через импорты подпутей при сохранении того же класса DotLottie и API. Проект также документирует изоморфную поддержку Node.js 18+ для серверного рендеринга, генерации миниатюр или извлечения кадров. Плеер поддерживает функции dotLottie v2, включая динамическое изменение тем в реальном времени с правилами для цвета, скаляров, позиций, векторов, градиентов, изображений и текста; интерактивные стейт-машины с типизированными событиями; а также встроенное аудио, воспроизводимое синхронно с временной шкалой анимации. Опция DotLottieWorker позволяет выполнять рендеринг в Web Worker с использованием OffscreenCanvas, при этом его методы основаны на Promise, так как они пересекают границу воркера. Стандартный программный бэкенд работает повсеместно, в то время как WebGL2 и WebGPU подключаются опционально для ресурсоемких случаев. Репозиторий предоставляет шесть официальных SDK-пакетов: @lottiefiles/dotlottie-web для чистого JavaScript, а также пакеты для React, Vue 3, Svelte, Solid и независимый от фреймворка пакет Web Component. Все они поддерживают рендеринг как Lottie JSON, так и файлов dotLottie. Средства управления в реальном времени включают переключение нескольких анимаций с помощью animationId и loadAnimation, именованные маркеры, сегменты кадров, подгонку и выравнивание макета, слоты для динамических данных, режимы воспроизведения (вперед, назад, bounce и reverse-bounce), интерполяцию кадров и заморозку при выходе холста за пределы экрана. Плеер предоставляет более 25 типизированных событий, охватывающих загрузку, воспроизведение, паузу, кадры, завершение, цикл и переходы стейт-машины. Проект включает хостинг-вьюер со страницами home, playground, performance, list и embed; примеры на CodePen; а также запускаемые локальные примеры для web, Node.js, React, Vue, Solid, Web Component и SSR-безопасного рендеринга в Next.js. Необходимые функции среды: WebAssembly, Canvas 2D и Fetch API; дополнительные улучшения включают Web Workers, OffscreenCanvas, WebGL2 и WebGPU. Документированные минимальные требования к браузерам: Chrome 57+, Firefox 52+, Safari 11+, Edge 16+ и iOS Safari 11+, а также Node.js 18+ для использования на стороне сервера. Код распространяется под лицензией MIT.