在线预览与多端测试——一秒验证动效渲染

最快的验错方式

写完 AE 导出或 Creator 制作的动画，第一件事就是打开 LottieFiles 预览器。拖进去一秒就能看到渲染效果——这是目前最快的 Lottie 验错方式。

使用方法

方式一：直接拖文件

打开 lottiefiles.com/preview → 把 .json 或 .lottie 文件拖进页面 → 自动开始播放。

方式二：输入 URL

如果动画已经上传到 CDN，直接粘贴 URL 也能预览。

预览器功能

基础控制

• 播放 / 暂停 / 逐帧前进后退
• 循环开关（无限循环 / 指定次数 / 单次）
• 速度控制（0.1x ~ 10x）
• 时间跳转（精确跳到某一帧）
• 画布尺寸调整（预览不同分辨率的渲染效果）

多平台模拟

预览器可以模拟三个平台的渲染效果：

• Web (SVG) —— 用 SVG 渲染，和浏览器里的 lottie-web 表现一致
• Web (Canvas) —— 用 Canvas 渲染引擎，对比两种渲染器的差异
• iOS —— 模拟 iOS 原生渲染引擎（lottie-ios）
• Android —— 模拟 Android 原生渲染引擎（lottie-android）

如果预览器里 iOS 和 Android 模拟渲染效果不一致，说明你的动画用了某个平台不支持的特性——提前发现比上线后才反馈好得多。

颜色和渲染参数

• 背景色：改成和你的 App / 网页背景一样，看真实的视觉效果
• 颜色替换：快速修改整个动画的颜色方案（比如改成你的品牌色）
• 透明度/遮罩预览：检查图层层级是否正确

文件信息

预览器右侧面板显示：

• 文件格式（JSON / dotLottie）
• 文件大小（优化前 vs 优化后）
• 帧率、总时长
• 动画尺寸（合成大小）
• 图层数量
• 字体引用、图片引用（如果是 dotLottie 会展示 manifest 详情）

常见用法

场景 1：验证导出是否正确

AE 导出 JSON → 拖进预览器 → 如果渲染完整正确，发给开发端。

场景 2：快速修改颜色

拿到一段免费市场动画 → 在预览器里改品牌色 → 满意后下载自己的副本。

场景 3：发现跨平台问题

在 Web 预览里 OK → 切 iOS 模拟渲染 → 发现某个图层丢失 → 回到 AE 改掉那个不兼容的特性。