无需登录 数据私有 本地保存

Lottie动画预览器 - 拖放JSON查看动效

16
0
0
0

粘贴 Lottie JSON

将完整的 Lottie JSON 内容粘贴到下方，然后点击加载

Lottie 动画预览器
背景:

拖放 Lottie JSON 文件到此处

支持 .json 格式的 Lottie/Bodymovin 动画文件

或者
0 / 0
1.0x
常见问题 & 知识

Lottie 是 Airbnb 开源的一种动画格式，基于 JSON 描述矢量动画。设计师在 After Effects 中使用 Bodymovin 插件导出动画为 JSON 文件，开发者使用 Lottie 库（如 lottie-web、Lottie-iOS、Lottie-Android）在应用或网页中原生渲染。Lottie 动画体积小、可缩放、支持交互，广泛应用于移动应用、网页动效、微交互等场景。

体积更小：JSON 矢量数据通常比同等质量的 GIF 或视频小 5-10 倍。
无损缩放：矢量渲染，任意放大不失真，适配各种分辨率屏幕。
可编程控制：支持播放、暂停、调速、跳转帧、监听事件、动态着色等。
透明通道：天然支持透明度，无需像 GIF 那样处理锯齿边缘。
交互性强：可与用户手势、滚动等事件联动，实现丰富的微交互。

最常用的方式是在 Adobe After Effects 中制作动画，然后安装 Bodymovin 插件导出为 JSON。也可以使用 LottieFiles 在线编辑器、Figma 的 LottieFiles 插件、Rive（可导出 Lottie）、Haiku Animator 等工具。导出的 JSON 文件即可在网页、iOS、Android、React Native 等平台使用。

一个标准的 Lottie JSON 包含以下关键字段：v（版本号）、fr（帧率，如30fps）、ip（起始帧）、op（结束帧）、w和h（画布宽高）、layers（图层数组，包含形状、路径、关键帧等）、assets（引用的资源，如图片）。图层是核心，每个图层定义了动画元素及其运动轨迹。

本工具支持：拖放或点击上传 JSON 文件、粘贴 JSON 文本、加载内置示例动画、播放/暂停/停止、拖动进度条跳转帧、0.1x-3x 变速播放、循环/单次/往返三种播放模式、切换背景（棋盘格/白/深/灰）、全屏预览、查看动画元数据（帧率、总帧数、尺寸、版本）、下载 JSON 文件。完全在浏览器本地运行，无需上传服务器。

可能原因：①JSON 文件不是有效的 Lottie 格式（检查是否包含 layers 字段）；②动画使用了表达式或某些 AE 特性，Bodymovin 导出时不支持（如某些第三方插件效果）；③JSON 文件损坏或不完整；④动画依赖外部图片资源但未嵌入（检查 assets 中是否有外部URL）。建议使用最新版 Bodymovin 导出，并选择"嵌入资源"选项。

Lottie-web 使用 SVG 或 Canvas 渲染。SVG 模式适合简单动画（DOM 可控），Canvas 模式性能更好适合复杂动画。动画复杂度（图层数、路径点数、关键帧密度）直接影响性能。建议：控制动画时长在 3-5 秒内，图层不超过 20 个，避免逐帧绘制复杂路径。移动端尤其要注意性能优化，可使用 lottie.loadAnimation 的 renderer: 'canvas' 选项。

推荐资源：LottieFiles（lottiefiles.com）拥有全球最大的免费 Lottie 动画库，数千个高质量动画可供下载；IconScout、Lordicon（动态图标）、Flowbite 等也提供 Lottie 资源。GitHub 上搜索 "lottie-animation" 也能找到许多开源动画集合。使用前请确认授权许可。
🔧 相关工具