Lottie6.6.8

Lottie 是一款面向设计师与前端开发的动画工具，最初由 Airbnb 推出。它的用途是让设计师在 Adobe After Effects 中制作动画，再通过配套插件导出为轻量的 JSON 文件；前端工程师拿到该文件后，用 Lottie 提供的 SDK 在安卓 App 等平台中直接调用，即可按原样播放动画。这样一来，开发人员不必从零编写大量动画代码，设计效果与最终实现之间的偏差也会减少，整体上降低了设计与开发协作的成本。

主要功能

• 设计开发协作：设计师在 AE 中导出标准 JSON 文件，前端直接调用，双方对可实现效果有统一预期。
• 实时控制动画状态：在代码中可以暂停、播放、跳转到指定帧、修改循环次数，比普通动图灵活。
• 缓存机制：频繁出现的动画在首次加载后存入缓存，后续调用几乎无延迟。
• 保留 AE 高级特性：路径修剪、蒙版、遮盖、形状变换等复杂效果能够保留，动画还原度较高。
• 运行时联动：前端可以动态改变动画颜色、图层可见性，或根据用户交互调整播放进度。
• 跨平台一致性：同一个 JSON 文件在不同平台上的表现基本一致，减少因平台差异导致的返工。
• 体积小巧：中等复杂度动画的 JSON 文件通常只有几十 KB，远小于同长度的视频或动图。

使用场景

Lottie 适合在 App 的开屏、加载动画、点赞、按钮反馈、空状态插画等场景中使用。尤其是点赞、加载转圈这类会反复播放的小动画，开启缓存后再次加载几乎无延迟，也不会明显拖慢 App 速度。对于需要在不同屏幕尺寸上展示的动画，Lottie 支持宽高比例自适应，无需为每种屏幕单独导出文件。

导入与预览

1. 打开你的 Lottie 动画，点击预览功能。
2. 在预览界面选择文件导入方式。
3. 选择需要导入的文件或链接，点击导入并预览。

使用技巧

• 在 AE 中制作动画时，尽量使用 Lottie 支持的图层和效果，避免依赖某些第三方插件；导出前用“预览”插件检查兼容性。
• 前端调用 JSON 文件时，可以开启自动缓存，同一动画多次出现时直接读取缓存，避免重复加载。
• 需要响应式缩放时，启用宽高比例自适应，无需为不同屏幕尺寸导出多份文件。

常见问题

普通人能用 Lottie 做动画吗？

Lottie 本身不直接制作动画，需要配合 AE 等专业软件使用，更适合设计师与开发人员协作。

导出的 JSON 文件怎么用？

前端工程师把 JSON 文件放进项目中，用官方提供的 SDK（iOS、Android、Web 等）调用即可播放动画。

支持哪些平台？

iOS、Android、Flutter、React Native、Web（H5）等主流平台都有官方库。

和 GIF 动图相比有什么优势？

JSON 文件通常比 GIF 小得多，支持透明背景、可交互控制，并且放大后不会失真。

版本更新

v6.6.8 版本主要优化了 AE 动画转换内核，提升复杂蒙版与路径特效的还原精度；升级缓存调度机制，改善高频动画的加载速度并降低资源占用；同时修复部分特殊图层转换异常的问题，兼容更多 AE 版本工程文件。