LottieFiles 上手：JSON 动画的检索、在线改色与授权边界

LottieFiles 是一个围绕 Lottie 动画建的素材站与工具站。Lottie 不是视频，是 After Effects 通过 Bodymovin 插件导出的一份 JSON，由播放器在页面上实时渲染。这篇讲清它怎么找、怎么改、导出成什么，以及授权上那条容易踩的线。

它是什么：一份 JSON，而不是一段视频

名字来自 Airbnb 开源的那套播放器。lottie-web 仓库写得很直白：它解析 After Effects 经 Bodymovin 导出的 JSON，然后在 Web、Android、iOS 与 React Native 上渲染。动画的载体是一组关键帧与路径数据，不是像素。

播放器有三种渲染方式：svg、canvas 与 html。svg 适合图标与插画，节点多、粒子多的场景可以换 canvas。同一份 JSON 换一种渲染器就能跑，这是它比 GIF 灵活的地方。

dotLottie 是后来加的一层封装。扩展名 .lottie，本质是把一份或多份 JSON 打包压缩，额外带主题、状态机与动效令牌。官方文档在多处把 dotLottie 列为新项目的默认导出格式。

体积上的说法要分开看。官网首页给的对比是 dotLottie 比 GIF 小约 90%，Lottie JSON 比 GIF 小约 60%；功能页另一处写的是 dotLottie 相对原始 Lottie 再压缩约 80%。基准不同，别混着引用。

检索：免费库、付费库与分类

站点把动画分成两个池子。免费库对所有人开放，付费库要订阅后才能保存与下载。两个库在首页和各分类页都有入口，切换之后搜索范围跟着变。

免费库的入口是 /free-animations 与其分类子页。以图标类为例，图标动画页标着 5925 个免费图标动画，每条注明作者与下载量，可选 JSON、dotLottie、GIF、MP4 四种文件。

筛选维度不算多。主要是库（免费或付费）、排序（Featured、Latest、Popular）与分类（Business、Festive、Health、Finance、Gaming 等）。合集以 Pack 的形式成组提供，一组十几个到几十个，风格统一，适合一次凑齐一套。

搜索词怎么写很影响结果。官方文档建议按界面状态描述，而不是按物体描述：loading、empty state、upload、error、success 这类词比 animation 有效。找按下与悬停的反馈，就搜 press、hover、toggle。

编辑器里能改的四类东西

站内编辑器不用装 After Effects。官方教程把可改项分成四组：图层、颜色、文字与图片、时间参数。

• 图层：调整前后顺序、隐藏或删除多余图层，还有 X-ray 模式用于选中嵌套较深的元素。
• 颜色：改元素填色或背景色，可换成纯色、描边或渐变；调色板会列出这份动画用到的全部色值。
• 文字与图片：修改文本图层的文案，替换 PNG 图层。
• 时间参数：时长、帧率与播放速度都能调，改完存成新版本或覆盖原文件。

免费账户也能做基础编辑。官方 FAQ 的措辞是基础编辑免费、进阶功能可能需要付费计划。这句要和后面讲的商用授权分开理解，付费与否和能否商用不是同一个问题。

两个已知限制。文字改不动，多半是导出时字体做了子集化，可用字形被裁掉了。调色板只作用于矢量填色，内嵌位图与复杂渐变要回到 Lottie Creator 里处理。

导出：dotLottie、JSON、GIF、MP4 的取舍

导出格式决定后面怎么用。官方格式说明给了一张判断表，可以照用途直接对照。

一句话概括这四行。JSON 与 dotLottie 是活的，能改色、能响应点击；GIF 与视频是死的，导出去那一刻颜色与尺寸就定住了。要交给前端接进项目，选前两者；要发在不能跑脚本的地方，才轮到后两者。

还有一个细节容易漏。官方文档提醒，在预览里临时改的调色板不会写进 Animated SVG 导出，因为那条路径用的是原始动画源文件。

授权：素材许可与平台计划是两套规则

这里有两套规则同时在生效，混起来就会误判。

一套管素材。免费公开动画走 Lottie Simple License：可以下载、修改、商用、随产品分发，不强制署名，但鼓励署名且署名要对最终用户可见。约束有两条，衍生作品必须沿用同一许可，不能给别人的使用加额外限制；不能把站内动画收集拼装成一个同类或竞品服务。

付费动画走另一套。订阅期间下载的素材可以商用，也无需署名；取消订阅后，已经发布的项目继续用不受影响，只是不能再下新的。帮助中心把这几种情况列成了问答。

另一套管的是「你用这个平台做出来的东西」。商用说明页写得很明确：Starter（免费）与 Individual 计划只能用于非商用，Team 与 Enterprise 才允许商用。也就是说，即便免费素材本身允许商用，用免费账户在站内编辑器里改一遍再交付，也已经越线。

价格与额度供参考。定价页上 Individual 为每人每月 19.99 美元、Team 为 24.99 美元，都按年计费；CDN 额度分别是 10GB 与 50GB，素材库存储 2GB 与 5GB。付费库在定价页标注 60 万条以上，下载不设条数上限，只受公平使用政策约束，禁止批量与脚本抓取。

边界与上手顺序

三个边界要先想清楚。

体积不等于简单。JSON 里存的是路径与关键帧，节点越多、遮罩与表达式越多，文件越大，播放时的计算也越重。dotLottie 解决的是传输压缩，不会让渲染变轻。

它仍然依赖 After Effects 那条上游。Bodymovin 导不出的效果，Lottie 里就没有；文字图层还要处理字体授权与子集化，否则换台机器可能变字形，甚至改不动字。

付费素材的授权按条目算。同一个站里，免费库一套许可、付费库另一套许可、用平台编辑又受账户计划约束，三个判断入口不同，交付前要分别核对。

适合的人比较清楚：前端要一个可换色的加载动画、App 要一组状态反馈、运营要一段能塞进邮件的动图。不适合的也清楚：需要逐帧精修的视频、需要三维镜头的项目、品牌规范禁止第三方署名又不想买付费库的团队。

上手顺序可以按这个走。

1. 先用界面状态词在免费库搜一轮，锁定两三个候选，看作者与下载量。
2. 进编辑器改色与尺寸，导出前确认文字能否编辑、位图要不要替换。
3. 按目标环境选格式：现代前端拿 dotLottie，老播放器拿 JSON。
4. 把素材页地址、许可类型、下载日期记进项目档案，商用项目再核对账户计划。

想先补齐静态图标那一层，站内写过SVG Repo 的检索与授权；要成套统一画风的游戏符号，可以看Game-icons 的换色导出；需要实拍视频与音效时，Mixkit 的六种许可是另一条线。

相关地址

以下为文中项目的官方入口，许可条款、价格与导出说明以这些页面为准。

• LottieFiles（官网）：https://lottiefiles.com/
• LottieFiles（定价页）：https://lottiefiles.com/pricing
• LottieFiles（Lottie Simple License）：https://lottiefiles.com/page/license
• LottieFiles（商用说明）：https://help.lottiefiles.com/commercial-use-guide
• LottieFiles（导出格式文档）：https://docs.lottiefiles.com/en/integrations/figma/05_export-and-handoff/choosing-an-output-format
• lottie-web（GitHub 仓库）：https://github.com/airbnb/lottie-web