lottie 用 svg 渲染 ae 导出的 json 动画，无需手写 svg 动画代码；需引入完整 lottie-web、设置宽高容器、保持默认 svg 渲染器，并通过 api 控制播放、交互与主题切换。
SVG 本身是静态矢量图形格式，不支持时间轴动画逻辑；Lottie 是 Airbnb 开源的动画渲染库，它把 Adobe After Effects 导出的 JSON 动画（通过 Bodymovin 插件）在 Web 端用 SVG/Canvas/HTML 原生能力高效播放。二者结合的关键不是“SVG + Lottie”，而是Lottie 使用 SVG 作为默认渲染器来呈现复杂矢量动画——你无需手动写 SVG 动画代码，Lottie 会自动解析 JSON 并生成、管理对应的 SVG 元素与变换。
确保 Lottie 正确加载并渲染 SVG
Lottie 默认优先使用 SVG 渲染模式（比 Canvas 更清晰、更轻量、支持 CSS 选择器和部分交互）。需确认：
- 引入的是完整版 lottie-web（非精简版），例如通过 CDN：
<script src="https://unpkg.com/lottie-web@latest/dist/lottie.min.js"></script> - 容器元素为空且具有明确宽高（Lottie 不自动撑开父容器），例如：
<div id="anim" style="width: 400px; height: 300px;"></div> - 调用
lottie.loadAnimation()时未显式指定renderer: 'canvas'，保持默认'svg'
在 SVG 容器中实现可控交互（如暂停、跳转、事件响应）
Lottie 提供完整的 JS API 控制 SVG 动画生命周期，无需操作底层 SVG DOM：
-
anim.play()/anim.pause()/anim.stop()控制播放状态 -
anim.goToAndPlay(frame)或anim.setDirection(1/-1)实现帧定位与反向播放 - 监听事件：
anim.addEventListener('complete', () => console.log('动画结束')) - 获取当前状态：
anim.currentFrame、anim.totalFrames、anim.isPaused
注意：Lottie 生成的 SVG 结构是扁平化、无语义的（含大量 <g></g>、<path></path>），不建议直接用 CSS 或 jQuery 操作内部节点——应始终通过 Lottie 实例 API 控制。
优化 SVG 动画性能与兼容性
尽管 SVG 渲染质量高，但复杂动画仍可能卡顿。关键优化点：
- 导出 JSON 时在 Bodymovin 中关闭「Include in project」不必要的图层或蒙版，减小 JSON 体积
- 对长动画启用懒加载：
lottie.loadAnimation({ ..., rendererSettings: { progressiveLoad: true } }) - 避免高频调用
anim.goToAndStop(frame)（尤其在 scroll 或 mousemove 中），可加节流或改用anim.setSpeed(0)配合anim.goToAndPlay() - 旧版 Safari（≤15.4）对 SVG filter 和 clipPath 支持有限，若动画含高级效果，可在
rendererSettings中降级为canvas渲染
替换动画数据或动态切换主题（如深色/浅色 SVG 图标）
Lottie 支持运行时替换 JSON 中的占位资源（如颜色、图片路径），适合主题化场景：
- 导出 JSON 前，在 AE 中将颜色属性设为表达式：
thisLayer.fill(1).color = [r,g,b]，Bodymovin 会将其识别为可替换属性 - 加载后调用
anim.renderer.elementsMap['layerID'].setFill([0.2, 0.6, 1])（需开启rendererSettings.preserveAspectRatio: 'xMidYMid meet'） - 更稳妥的方式是预生成多套 JSON（light.json / dark.json），按需调用
anim.destroy(); lottie.loadAnimation({ ... })
不复杂但容易忽略：所有 SVG 相关行为均由 Lottie 实例统一调度，你只需关注 JSON 内容质量和 API 调用时机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
