lottie动画预览

📖 工具说明

1. 这是什么

在浏览器里预览 Lottie（.json 格式的矢量动画）：加载文件、选渲染器、控制播放、拖帧、导出 PNG 快照或 GIF。用官方 lottie-web 播放器。

2. 加载

• 上传文件：选一个 Lottie .json，只在本机使用、不上传。
• URL：填 Lottie JSON 地址，需对方允许跨域（CORS），否则加载失败。
• 加载示例：从 LottieFiles CDN 拉一个公开动画。
• 加载后可「下载 JSON」拿回格式化后的原文。

3. 控制

• 渲染器：SVG（清晰、兼容好）/ Canvas（导 GIF 要用它）/ HTML。改渲染器要重新加载动画——渲染器在实例创建时就定了。
• 尺寸：宽 / 高（16–2000px），改完自动 resize；「保持宽高比」改动会重载。
• 播放 / 暂停 / 停止、速度（0.1–3x）、方向（正 / 反）、循环、自动播放。
• 帧滑条：拖动跳到指定帧并暂停；播放时滑条跟着走。

4. 导出

• PNG 快照：Canvas 模式直接导出当前画面；SVG 模式序列化后转 PNG（白底）。
• GIF：只在 Canvas 渲染器下可用。逐帧 goToAndStop 抓 canvas，20fps，最多 200 帧，帧多会慢。用站内的 gif.js（本地 worker）。

5. 说明

• 播放、抓帧、编码都在浏览器本地，不联网（除非你填远程 URL），不上传你的文件。
• 只加载你信任来源的 Lottie 文件——Lottie JSON 可以引用外部图片资源，恶意文件可能带非预期的外链。
• 不做 Lottie 编辑 / 优化 / 转 MP4，也不解析 .lottie（dotLottie）压缩包。

相关：GIF 生成 · 图片格式转换 · CSS 效果生成器 · 白板 · 艺术二维码。

只加载信任来源的 Lottie 文件；导 GIF 要先切 Canvas 渲染器并重载。

📖 相关推荐