这个项目能做什么

dotLottie Web 是 LottieFiles 的官方播放器,用于在 Web 应用程序中嵌入 Lottie (.json) 和 dotLottie (.lottie) 动画。它采用来自 dotlottie-rs 的 Rust + WASM 核心,并使用 ThorVG 作为矢量渲染器。该播放器支持 Canvas2D 软件渲染、WebGL2 以及实验性的 WebGPU 后端;通过子路径导入即可切换后端,同时保持相同的 DotLottie 类和 API。项目还记录了对 Node.js 18+ 同构的支持,用于服务器端渲染、缩略图生成或帧提取。 该播放器支持 dotLottie v2 功能,包括包含颜色、标量、位置、矢量、渐变、图像和文本规则的运行时主题;具有类型化事件的交互式状态机;以及与动画时间线同步播放的嵌入式音频。DotLottieWorker 选项可通过 OffscreenCanvas 在 Web Worker 上进行渲染,其方法基于 Promise,因为它们需要跨越 Worker 边界。默认的软件后端具有广泛的兼容性,而 WebGL2 和 WebGPU 则用于需求较高的场景。 该仓库提供了六个官方 SDK 包:用于原生 JavaScript 的 @lottiefiles/dotlottie-web,以及针对 React、Vue 3、Svelte、Solid 和框架无关的 Web Component 的包。所有 SDK 均支持渲染 Lottie JSON 和 dotLottie 文件。运行时控制包括通过 animationId 和 loadAnimation 进行多动画切换、命名标记、帧段、布局适配与对齐、动态数据插槽、播放模式(正向、反向、弹跳和反向弹跳)、帧插值以及画布离开屏幕时的冻结。播放器公开了 20 多个类型化事件,涵盖加载、播放、暂停、帧、完成、循环和状态机转换。 项目包含一个托管查看器(含首页、操场、性能、列表和嵌入页面)、CodePen 示例,以及针对 Web、Node.js、React、Vue、Solid、Web Component 和 Next.js SSR 安全渲染的可运行本地示例。必需的环境特性包括 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 许可证。