设计师做好的、有角色感的矢量小动画：支付/提交成功、空状态插画、新手引导、点赞庆祝、品牌加载图标。
动效 · 素材与工具
Lottie 动画Lottie
把 Lottie 当成要验收的动画数据：挑小体积、无内嵌位图的矢量文件，加载前给占位，播一次停在终态，减少动效时直接显示终帧。
先验收一份 Lottie 交付
同一个「支付成功」对号，设计师给了几种文件。在验收台里换文件、换网络、换播放方式，看手机里的页面怎么变。
设计师交付验收台
设计师给「支付成功页」发来几份对号动画。挑一份文件、选网络，模拟在手机上打开页面； 看首帧要等多久、动画停不停得下来，直到下方清单全部亮起。
点「模拟打开页面」
页面未打开
首帧等待2.0 秒文件体积1.8 MB演示时间按真实时长
- ✕体积 ≤ 100KB不通过 · 当前 1.8 MB
- ✕没有内嵌位图不通过 · JSON 里塞了 3 张 PNG
- ✕播一次停在终态不通过 · 当前无限循环
- ✕加载前有占位不通过 · 加载时一片空白
- …减少动效显示终帧待验 · 待验：打开「减少动效」再看一次
目标：把下方验收清单全部点亮。先选一份文件和网络，点「模拟打开页面」，看手机里首帧要等多久。 还差：体积 ≤ 100KB、没有内嵌位图、播一次停在终态、加载前有占位、减少动效显示终帧。
从刚才的操作里提炼
你在验收台上亲手看到的五件事：
- Lottie 是数据，不是视频：设计师在 AE（After Effects）里做的动画被导出成 JSON 或 .lottie，由播放器在页面上按矢量画出来——所以放大不糊、能暂停、能跳帧。GIF 是一帧帧图片，这些都做不到。
- 体积和内嵌位图决定等多久：首帧等待 ≈ 体积 ÷ 网速。24KB 的矢量文件弱网也不到 1 秒；内嵌 PNG 的 1.8MB 版本要等半分钟。「JSON 就一定小」是误解。
- 播一次停终态 vs 无限循环：表示「完成」的动画要停在最后一帧；一直循环会让人以为还在处理。循环只留给加载中这类持续状态。
- 加载前要有占位：没有占位时那块是空白，加载完还会把下面的文字挤下去；静态对号占位既顶住位置，也提前告诉用户结果。
- 可暂停、尊重减少动效：Lottie 播放器能暂停、能直接显示终帧；用户开了减少动效时就这么做，结果文字照常显示。
什么时候用，什么时候不用
按钮悬停、展开收起这类简单反馈（CSS 过渡就够）；实拍或照片质感的内容（用视频）；你没有设计师、也没有现成素材时。
怎么用：对设计师说什么，对 AI 说什么
- 跟设计师要文件时说
「请导出 Lottie JSON（或 .lottie），不要内嵌图片，把位图换成形状、合并形状、删掉没用的图层；目标 100KB 以内。」
- 交给 AI 接入时说
「用 lottie-web 或 dotLottie 播放器懒加载这份动画；加载前显示静态对号占位并预留同样大小；只播一次停在最后一帧；提供暂停；检测到 prefers-reduced-motion 时直接显示最后一帧。」
- 看 AI 的报告和页面时验收
看文件大小（报告里写的 KB 数，或开发者工具 Network 里那一行）；在浏览器把网络限速到慢速 3G 重新打开，看首帧要等多久、等的时候有没有占位；看动画播完停没停在对号上；打开系统的减少动效再看一次。
正反例：同一个支付成功页
目标相同，差别只在交付文件和播放方式。
弱网 3G 下不到 1 秒出首帧；加载前静态对号先占位，播完对号留在屏幕上；减少动效时直接显示终帧。用户第一眼就知道「付款成功了」。
同一个对号，弱网要等半分钟以上；等的时候那块一片空白，出来后又把文字挤下去；对号一直重播，用户以为还在扣款。改法：让设计师重新导出纯矢量版，再让 AI 加占位、改成播一次。
快速自测
设计师发来 success.json（1.6MB），打开一看里面内嵌了 3 张 PNG。你下一步最该做什么？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。