先说结论：乐蒂不是丢文件就完事
我第一次在项目里用乐蒂时，以为设计师给一个 JSON，前端装个 lottie-web 就能收工。后来发现最耗时间的是前置沟通：尺寸要不要适配，是否循环，加载失败显示什么，深色模式是否要换颜色。
所以乐蒂怎么用，正确顺序不是先写代码，而是先把动画当成一个产品组件来定义。它有入口、有触发、有状态、有降级，这样后面才不会返工。
乐蒂怎么用？一次跑通流程
乐蒂怎么用，别一上来就找酷炫模板。真正能落地的流程是：先确认场景，再准备 AE 动画，导出 JSON，放到项目里播放，最后做性能和异常检查。我按实际接入顺序讲，适合第一次把 Lottie 用进产品的人。
第一步：把使用场景钉死
先问四个问题：动画出现在哪个页面？播放几次？用户能不能跳过？失败时显示什么？比如支付成功页，通常播放一次后停在尾帧；加载页可能循环播放；新手引导则要考虑跳过按钮。
这个阶段最好让设计、开发、产品一起看一遍草稿。别等 AE 做完才发现时长太长。移动端反馈动效一般 1 到 3 秒够用，超过 5 秒就要谨慎，用户不是来欣赏片头的。
第二步：设计侧按可导出规则制作
AE 里不是所有效果都能被乐蒂完整支持。更稳的做法是用形状图层、基础位移、透明度、缩放、旋转、简单路径动画。少用复杂表达式、3D 图层、模糊插件和大量位图。
如果必须用图片，提前压缩并控制数量。很多体积异常大的 Lottie，不是动画复杂，而是塞了未压缩 PNG。设计师导出前清理隐藏图层，也能明显减小文件。
第三步：开发侧接入并封装
Web 端常见做法是用 lottie-web，指定 container、renderer、loop、autoplay、path 或 animationData。App 端则用对应平台的 Lottie 库。项目里别到处散写初始化代码，最好封装成统一组件。
组件至少暴露这几个参数：资源地址、是否循环、是否自动播放、播放完成回调、宽高比例。这样后面运营换动画、产品改触发条件，不需要每次动底层代码。
最后检查：体积、首帧、降级
上线前我会固定看三项：文件体积是否合理，首帧是否空白，弱网下是否有替代图。首帧空白很常见，用户会看到闪一下，解决办法是让设计保留可见首帧，或前端先展示静态占位。
乐蒂用得好，会让产品显得精细；用得粗，会变成性能包袱。流程跑顺后，它是一种高效率动效资产，而不是一次性的漂亮素材。
常见问题
乐蒂怎么导出 JSON？
通常在 After Effects 安装 Bodymovin 插件，选择合成后导出 JSON。导出前要确认图层和效果在 Lottie 支持范围内。
乐蒂可以在 Vue 或 React 用吗？
可以。底层多用 lottie-web，也可以用社区封装组件。建议再包一层公司内部组件，统一加载和销毁逻辑。
乐蒂动画不显示怎么办？
先查资源路径和跨域，再看 JSON 是否损坏，最后用 LottieFiles 预览工具验证导出文件本身是否正常。