文件托管与 CDN 分发——让动效走全球加速
为什么需要 CDN 托管
动效 JSON 虽然小(通常 < 50KB),但如果每个页面都要嵌入,还是会累积:
- 打包进 App 安装包:每新增一个动效就会增加 APK / IPA 体积,而且不能在运行时更新。
- 自己服务器托管:需要自己维护存储空间、CDN 加速、缓存策略。
LottieFiles 托管是个轻量方案:上传 → 获得 CDN URL → SDK 远程加载 → 全球边缘节点分发。
上传文件
在 LottieFiles 网站:
- 登录账号。
- 点击右上角 "Upload" 按钮。
- 把
.json或.lottie文件拖进去。 - 填写名称(会成为 URL 的一部分)、标签、分类。
- 可以选择设为 Private(仅自己和团队可见)或 Public(可以分享 URL)。
获得 CDN URL
上传完成后,每段动画都有一个永久 CDN 地址,格式类似:
你的 CDN 托管地址(类似 lottie.host/abc123xyz/loading-spinner.json)
这个 URL 可以直接被各平台的 Lottie SDK 加载:
Web:
lottie.loadAnimation({
container: document.getElementById('lottie'),
path: '你的 CDN 托管地址',
renderer: 'svg',
});
Android:
animationView.setAnimationFromUrl("你的 CDN 托管地址")
iOS:
let url = URL(string: "你的 CDN 托管地址")!
animationView.load(url: url)
托管 vs 本地资源
| 维度 | CDN 托管 | 本地打包 |
|---|---|---|
| 安装包体积 | 不增加 | 每个动效增加几 KB ~ 几十 KB |
| 更新方式 | 换 CDN URL 内容,立即可生效 | 需要重新发版 |
| 加载速度 | 全球边缘节点 | 取决于设备网络 |
| 离线可用 | 否 | 是 |
| 费用 | LottieFiles 订阅包含 CDN 流量 | 免费 |
建议:
- 常驻功能的核心动效(比如品牌 Logo 动画)→ 打包进本地资源,保证首屏不闪。
- 运营活动动效、节日主题动效 → CDN 托管,随时更新。
- 混合策略最常用:核心几个打本地,其他走 CDN。