MOD.03 动效DOC-03-012AUTHOR · 姜未白2026-05-16READ · 4 MIN

SVG 描边动画的工程化

超数频动效性能预算帧率稳定性

这篇是对 30 个线上动效的验收总结。判断有点反直觉：用户讨厌的不是动效本身，而是无法解释的动效。任何性能预算的存在需要回答「它让谁更快理解了什么」。

SEC.01复查节点

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

复盘中还藏着一条：减少动效偏好（prefers-reduced-motion）需要全链路适配。本组的做法是把帧率稳定性分为「信息型」和「装饰型」，前者降级为瞬时切换，后者直接关闭，切换逻辑收敛在令牌层。

// CASE FILE · 实测档案

档案记录：开机动画实验：2.4s 品牌序列 vs 直接进入，前者品牌联想标准率高出 26%，且不增加跳出。

复盘中还藏着一条：动效验收工具本组自建了一个面板：实时显示当前动画的 FPS、主线程占用和触发来源。验收时设计师自己盯着数据，超预算的动效当场改，评审现场少了 80% 的扯皮。

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

另一个常被忽视的细节是：实施的第一步一贯是摸清现状：把帧率稳定性的存量清点成一张表，标注归属、状态和风险等级。这张表在后续三周里被本组翻旧了，比任何文档都常用。

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

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

此外还有一条底线：降级分三档：满血、简化、静态。弱网、低端机、省电模式分别映射到不同档位，映射关系在启动时确定，运行期不再切换，避免性能预算中途变脸。

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

最后再记一笔：所有规则都要有复查节点：项目组给性能预算的规范设了季度复审，到期清点例外和豁免，过期的清理，失效的修订。规范不呼吸，就会变成化石。

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

此外还有一条底线：任何做法都要先问约束：人力、工期、存量兼容，三者决定了可行解的形状。一线团队在性能预算上的取舍全部围绕这三条展开，脱离约束谈最佳实践是纸面文章。