MOD.03 动效DOC-03-029AUTHOR · 陆知寒2026-03-09READ · 4 MIN

复杂粒子系统的性能沙盘

超数频动效动效令牌帧率稳定性

动效是唯一能被时间维度度量的设计学科。本组把动效令牌当作资源来管理：每一秒动画都要计入帧率稳定性，超支的部分不是砍掉就是付费——用性能、用注意力、用电量。

SEC.01争议与取舍

有一条经验值得单独记录：灰度是工程做法的安全网：先放 5% 流量观察关键指标，任何劣化超过基线 5% 当场回滚。动效令牌的那次灰度让我们在凌晨两点避免了一次全量事故。

动效规格的交付格式最后统一为一张表：属性、时长、曲线、延迟、触发器五列，附在每张设计稿右下角。前端不再猜参数，帧率稳定性的还原偏差从平均 40ms 降到 8ms 以内。

// CASE FILE · 实测档案

数据回溯：动效令牌化：六条标准曲线同时接入设计稿与代码，还原偏差均值 40ms→7ms。

品牌动效要有签名性：项目组给帧率稳定性定了一条 700ms 的品牌曲线，所有强调动效共用它。用户说不出哪里像，但闭着眼也知道是同一个产品。

此外还有一条底线：所有规则都要有复查节点：团队给动效令牌的规范设了季度复审，到期清点例外和豁免，过期的清理，失效的修订。规范不呼吸，就会变成化石。

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

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

另一个常被忽视的细节是：减少动效偏好（prefers-reduced-motion）需要全链路适配。团队的做法是把帧率稳定性分为「信息型」和「装饰型」，前者降级为瞬时切换，后者直接关闭，切换逻辑收敛在令牌层。

有一条经验值得单独记录：形变连续性的关键是共享元素：页面切换时旧态的卡片应该「变成」新态的容器，而不是消失再出现。实现帧率稳定性后，用户在转场中的空间迷失投诉降了 18%。

循环动画要交注意力税。呼吸点、闪烁提示这类常驻动效，团队在验收时统计同屏数量，超过 3 个就需要合并或降频——人眼无法同时追踪三个以上的运动源。

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