SuperAPI AI 工具集

lottie

设计与创作

查看项目

更新于 10-16 06:18

技能介绍

用途:lottie 通过 lottie-web 把 After Effects 动画以轻量 JSON 形式在网页和移动端原生渲染,适用于矢量动画、加载指示器和较复杂的界面动效。

主要能力:提供 svg、canvas、html 三种渲染器;支持播放、暂停、停止、变速、反向、跳转、分段播放等控制方法,以及 complete、loopComplete、enterFrame 等事件;支持按名称控制全局动画、冻结、调整画质与响应式 resize。

使用方式:安装 npm install lottie-web,通过 lottie.loadAnimation 传入 container,并选择 path 或 animationData 作为动画源。React 可用 lottie-react(npm install lottie-react),Vue 在 onMounted 中加载并在 onUnmounted 中销毁。dotLottie 格式可安装 @dotlottie/player-component 使用 dotlottie-player 组件。

适用场景:加载指示器、交互与滚动触发动画、图标动效等。性能建议:多数情况用 SVG 渲染器,复杂动画或大量实例用 canvas,必要时关闭子帧渲染、启用 progressiveLoad 或不可见时销毁动画。

限制:不支持视频、音频、3D 图层,表达式支持有限,模糊、发光等效果及过于复杂的遮罩不受支持;文本建议转为形状。动画文件来源与 After Effects 导出等细节以官方资料为准,费用与平台信息暂未提供。