用途:为 FrameVideo 嵌入 Lottie / dotLottie 矢量动画,适用于 After Effects 导出(.json 或 .lottie)、Logo 与品牌标记动画、现成 LottieFiles 素材、形状变形与路径动画,以及设计到开发的交接。不适合代码驱动动画、简单变换、3D 场景、大量文字动画和动态内容,这些场景建议改用 gsap、css-animations、three 或 HTML + GSAP。
主要能力:支持 lottie-web 的 SVG 渲染和 @lottiefiles/dotlottie-web 的 canvas 播放器;适配器对 lottie-web 使用 goToAndStop(timeMs, false) 定位,对 dotLottie 依播放器形态使用 frame 或百分比 API,从而把多个动画统一到同一合成时间。
使用方式:资源从本地 assets/ 加载,不要用远程 URL。lottie-web 用 lottie.loadAnimation 并设置 container、renderer: "svg"、loop: false、autoplay: false、path。dotLottie 用 new DotLottie,设置 canvas、src、autoplay: false、loop: false。每个返回的动画或播放器都要推入 window.__fvLottie 数组(先初始化为空数组)。容器尺寸用 CSS 保持稳定,lottie-layer 与 lottie-canvas 通常设为 width/height 100%,canvas 需 display: block。多动画依次 push 即可,FrameVideo 会统一 seek。
限制:渲染时不要依赖远程 path URL;不要用 play() 启动播放;未支持的 After Effects 效果可能在导出后失效,需先在浏览器测试 JSON 或 .lottie;不要在 FrameVideo 校验已检查页面之后才异步加载并注册播放器。编辑后用 npx framevideo lint 和 npx framevideo validate 校验。