如何从任意网站下载 Lottie 动画（免费、一键完成）

Lottie 动画现在几乎无处不在 — 流畅、轻量、完美适配现代网页设计。但是 — 从线上网站下载它们一直是个老大难问题。直到现在，MiroMiro 终于解决了。

下面就来看看如何用 MiroMiro 从任意网站提取 Lottie 动画的 JSON 文件。

什么是 Lottie 动画？

Lottie 是 Airbnb 推出的基于 JSON 的动画格式，已经成为网页动画的行业标准。你在现代网站上看到的那些流畅的加载动画、动效图标、微交互 — 大多都是 Lottie 文件。

为什么设计师都喜欢 Lottie：

文件极小 — 比 GIF 小 10 到 100 倍
任意缩放 — 在任何分辨率下都清晰锐利
可编辑 — 用代码就能改颜色和属性
跨平台 — 网页、iOS、Android 全部支持

难点：右键也"另存为"不了

你浏览网页时看到一个漂亮的动效图标，想用类似的效果在自己的项目里 — 但要怎么把它下载下来？

使用 Lottie 动画的网站

精彩的 Lottie 动画随处可见，但保存它们并不简单。

和普通图片不同，Lottie 文件以 JSON 数据形式嵌入或通过 JavaScript 加载，没办法右键另存。要想拿到，得翻 DevTools、找网络请求 — 麻烦到大多数人会直接放弃。MiroMiro 让这一切变得即时简单。

解决方案：MiroMiro 的 Lottie 检测器

MiroMiro 自动识别网页上的所有 Lottie 动画，让你一键预览、一键下载。具体怎么用：

第 1 步：安装 MiroMiro

先从 Chrome 应用商店安装 MiroMiro 扩展。安装免费，3 天免费试用解锁无限制 Lottie 下载和全部功能 — 不需要绑定信用卡。

安装 MiroMiro 扩展 →

3 天免费试用包含：

无限制 Lottie 下载
CSS 检查器 — 复制任意网站的样式
SVG 提取器 — 抓取图标和矢量图
字体识别 — 识别页面所用字体
素材下载器 — 下载图片、视频等

所有功能解锁，无需绑定信用卡。

第 2 步：打开任意带 Lottie 的网站

访问任何使用 Lottie 动画的网站。Notion、Stripe 等知名站点，以及成千上万的落地页都在用 Lottie。

第 3 步：打开 Lottie 标签页

点击 MiroMiro 扩展图标，打开 Lottie 标签。扩展会自动检测页面上的所有 Lottie 动画并实时预览 — 不需要悬停或检查元素。

MiroMiro 检测 Lottie 动画

MiroMiro 自动找出页面上的所有 Lottie。

第 4 步：预览动画

点击任意一个检测到的 Lottie，可以看到实时预览。播放、暂停、拖动进度条都可以，确认是不是你想要的。

在 MiroMiro 中预览 Lottie 动画

下载前先预览，精准选到自己需要的动画。

第 5 步：下载为 JSON

点击下载按钮，把 Lottie 动画保存为 JSON 文件。就这么简单 — 你已经拿到了原始动画文件。

立即测试下载的 JSON → 拖入我们免费的 Lottie 预览工具即可播放、逐帧预览、改色、隔离图层、压缩文件，或导出为 GIF/WebM/PNG。无需注册，浏览器内直接运行。

第 6 步：在你的项目中使用 Lottie

把 JSON 导入到你常用的工具中：

LottieFiles.com — 修改颜色、速度，导出多种格式
After Effects — 用 Bodymovin 插件二次编辑
你的网站 — 用 Lottie Web Player 或 React 组件嵌入
Figma / Framer — 作为动画素材导入

将 Lottie JSON 导入 LottieFiles

下载好的 JSON 可以在 LottieFiles 等工具里进一步定制。

不同平台上的 Lottie 提取

MiroMiro 检测的是网页实际加载的 Lottie JSON 文件，所以无论网站用哪个播放器或框架，结果都一样。常见平台上的具体表现如下。

如何从 Framer 网站下载 Lottie

Framer 网站以标准 JSON 文件形式分发 Lottie 动画，MiroMiro 能稳定识别。打开任意已发布的 Framer 站点，点击 MiroMiro 图标，进入 Lottie 标签页 — 每个动画都会带实时预览列出。首屏动画、栏目图标、滚动触发的 Lottie 都能抓到。下载 JSON 之后可以直接在自己的 Framer 项目里通过 Lottie 组件使用。

如何从其他建站工具或框架的网站下载 Lottie

因为 MiroMiro 找的是底层 Lottie JSON 文件而不是某个特定播放器库，所以网站用 Webflow、Wix、Next.js、Nuxt、React、Vue 还是手写技术栈都不影响。只要页面加载了 Lottie JSON 文件，Lottie 标签页就会显示。

如何从 SaaS 落地页下载 Lottie

绝大多数现代 SaaS 落地页（Stripe、Linear、Notion、Vercel、Figma、Raycast）都用标准 Lottie JSON 提供动画。打开页面，进入 Lottie 标签 — 营销页常常一页就有 5 到 20 个 Lottie，可以一次性预览并批量下载。

Lottie 检测不到怎么办

少数网站会把 Lottie 数据直接内联进 JavaScript 包，或者在上线前把动画转成了 SVG/CSS。这种情况下 JSON 没有作为独立文件加载，MiroMiro 自然检测不到。这时可以用 SVG 提取器 或 CSS 检查器 抓取源码。素材本身几乎不会丢失 — 你只是换了一种格式拿到它。

视频教程

想看完整流程的话，可以看下面的演示视频：

常见问题：Lottie 动画下载

用 MiroMiro 下载 Lottie 动画收费吗？

不收费。MiroMiro 提供 3 天免费试用，无需绑定信用卡。试用期内可无限下载 Lottie 动画，并可使用 CSS、SVG、字体和素材等所有提取功能。试用结束后可订阅 Starter 或 Pro 套餐继续使用。

下载的 Lottie 动画可以商用吗？

商用前请务必确认原动画的授权许可。MiroMiro 只是帮助你下载文件，版权归属由用户自行负责。建议作为参考使用，或从授权清晰的免费 Lottie 网站获取素材。

JSON 文件能做什么？

JSON 文件就是 Lottie 动画本身。你可以导入到 LottieFiles 修改颜色和速度，使用 Lottie Web Player 嵌入到自己的网站，也可以通过 Bodymovin 插件在 After Effects 中编辑。

MiroMiro 支持所有网站吗？

MiroMiro 检测的是网页加载的 Lottie JSON 文件，绝大多数网站（包括 Framer 站点和大部分 SaaS 落地页）都采用这种方式。如果网站把动画数据直接打包进 JavaScript 文件，或转换成了 SVG/CSS，则无法检测到 — 这种情况请使用 SVG 提取器或 CSS 检查器。

下载后的 Lottie 可以编辑吗？

完全可以。把 JSON 上传到 LottieFiles.com（免费）即可修改颜色、调整时长、导出 GIF/MP4。如果有源工程文件，也可以在 After Effects 中编辑。