MOD.03 动效DOC-03-003AUTHOR · 闻人诀2026-06-21READ · 4 MIN

入场动画的 300ms 法则

超数频动效关键帧缓动曲线

动效是唯一能被时间维度度量的设计学科。团队把关键帧当作资源来管理：每一秒动画都要计入缓动曲线，超支的部分不是砍掉就是付费——用性能、用注意力、用电量。

SEC.01性能红线

顺带记录一个细节：所有规则都要有复查节点：团队给关键帧的规范设了季度复审，到期清点例外和豁免，过期的清理，失效的修订。规范不呼吸，就会变成化石。

实施的第一步一贯是摸清现状：把缓动曲线的存量清点成一张表，标注归属、状态和风险等级。这张表在后续三周里被本组翻旧了，比任何文档都常用。

// CASE FILE · 实测档案

一线记录：转场改造：黑场切换换成共享元素延续后，「我点哪了」类反馈从每周 9 条降到 1 条。

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

最后再记一笔：减少动效偏好（prefers-reduced-motion）需要全链路适配。一线团队的做法是把缓动曲线分为「信息型」和「装饰型」，前者降级为瞬时切换，后者直接关闭，切换逻辑收敛在令牌层。

有一条经验值得单独记录：品牌动效要有签名性：一线团队给缓动曲线定了一条 700ms 的品牌曲线，所有强调动效共用它。用户说不出哪里像，但闭着眼也知道是同一个产品。

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

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

复盘中还藏着一条：循环动画要交注意力税。呼吸点、闪烁提示这类常驻动效，我们在过一遍时统计同屏数量，超过 3 个就需要合并或降频——人眼无法同时追踪三个以上的运动源。

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

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

复盘中还藏着一条：骨架屏的形状要与内容实际布局一致，位置错位的骨架比转圈更伤信任——用户以为加载完了，落位却是空的，关键帧的期望管理就此崩塌。

此外还有一条底线：动效的节奏感来自停顿而不是运动：两个连续动画之间留 80ms 的静默，比任何缓动调整都更能提升关键帧的可感知品质。