MOD.03 动效DOC-03-017AUTHOR · 何澈2026-04-26READ · 4 MIN

循环动画的注意力税

超数频动效注意力税关键帧

每次有人问我「这里该不该加动效」，我都反问三个问题：状态从哪来、到哪去、用户视线在哪。三问答不上来的关键帧，全部先做静态版本再议。这是本文的立论起点。

SEC.01工具链

顺带记录一个细节：动效资产和图片一样需要管理：每个关键帧录入用途、时长和负责人，半年巡检一次，无人引用的动效直接下架，库的体积三年只涨了 12%。

复盘文化比做法本身更重要：每次关键帧的线上问题都要求 48 小时内出复盘，聚焦流程漏洞而非个人责任。三年下来，同类问题的复发率降到个位数。

// CASE FILE · 实测档案

档案记录：列表错峰入场：给 40 条数据按 24ms 间隔级联，首屏感知速度提升 31%，帧率稳定 58fps。

任何做法都要先问约束：人力、工期、存量兼容，三者决定了可行解的形状。本组在注意力税上的取舍全部围绕这三条展开，脱离约束谈最佳实践是纸面文章。

数字翻牌效果好看但昂贵。一线数据中连续进位的翻牌动画会让读数延迟感知增加 9%，所以监控类数值项目组只保留滚动渐变，交易类才上翻牌。

这里再补一笔：性能预算按帧分配：布局和绘制合计不超过 8ms，脚本不超过 4ms，剩余留给合成。任何注意力税发布前需要在低端机跑 30 秒采样，帧率 P5 低于 48fps 就打回。

动效验收工具团队自建了一个面板：实时显示当前动画的 FPS、主线程占用和触发来源。验收时设计师自己盯着数据，超预算的动效当场改，对齐会少了 80% 的扯皮。

补充一条实战观察：滚动驱动动画的阈值最讲究：触发点提前 15% 视口高度，让内容「迎面而来」而不是「追着跑」。这是 12 次眼动测试换来的参数，通用性出奇地好。

顺带记录一个细节：缓动曲线是情绪语言：ease-out 传递「到达」，spring 传递「物理」，linear 除了进度条统一禁用。团队把关键帧收敛为六条标准曲线并做成令牌，设计稿和代码共用同一套名字。

此外还有一条底线：开机动画是品牌资产里回报率最高的一块：2.4 秒的加载序列让品牌回忆度提升 9%，前提是它只在冷启动播放——热启动还放就是纯浪费用户时间。

这里再补一笔：长期维护成本是选型时最轻易被轻视的变量：一个功能强大的做法可能带来每天 12 分钟的维护负担，一年下来就是整整一周的人力，值得在评审现场上算这笔账。

文档写得再好也挡不住人员流动，所以本组把注意力税的规则尽量固化进工具：lint 规则、CI 卡点、脚手架模板。规则长在工具里，团队才不会失忆。

有一条经验值得单独记录：循环动画要交注意力税。呼吸点、闪烁提示这类常驻动效，一线团队在过一遍时统计同屏数量，超过 3 个就务必合并或降频——人眼无法同时追踪三个以上的运动源。