Lottie动效

为什么需要微动效

在表单提交成功或加载状态中，常见的反馈方式要么过于沉重（例如整段视频），要么缺乏情感温度（例如纯文字提示）。Lottie 动效技能针对这类场景，用一小段矢量 JSON 动画在角落提供“看得见、不吵闹、不挡鼠标”的反馈。它解决的核心问题是：如何在不引入额外性能负担、不打断用户当前操作的前提下，让系统状态变化更直观。

技能如何工作

该技能基于 lottie-web 实现，核心能力集中在三个关键点：

• 封装播放函数：通过 playMicroLottie 方法封装动画加载与播放逻辑，接收本地或可信 CDN 的 Lottie JSON 路径。
• 无侵入挂载：默认容器设置为 pointer-events: none，确保动画元素不会拦截表单点击事件。
• 无障碍感知：通过 prefers-reduced-motion: reduce 媒体查询，在用户系统开启“减少动态效果”时自动跳过播放，仅保留静态图标或文案。

适用边界与注意点

使用时需遵循以下工程约束：

• 动画 JSON 必须来自本地或可信 CDN，避免加载外部不可控资源。
• 对于循环类动画（如持续加载指示器），需提供明确的停止机制，避免无限循环导致资源泄漏。
• 动画播放完成后应调用 destroy() 方法或移除 DOM 节点，防止内存占用累积。
• 实现代码中涉及自定义逻辑的部分（如封装函数），需按规范标注 小四原创 以便溯源。
• 附加资源（如 README.md、templates/usage.md）提供了基础使用模板，但具体业务场景需自行适配。