MOD.03 动效DOC-03-013AUTHOR · 闻人诀2026-05-12READ · 4 MIN

动效规格标注的交付格式

超数频动效缓动曲线性能预算

缓动曲线的调参过程像酿酒：参数对不对，入口三秒就知道。这篇文章把一线团队 18 次调参的记录浓缩成一张速查表，覆盖时长、曲线、位移距离的全部组合边界。

SEC.01度量方法

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

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

// CASE FILE · 实测档案

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

争议的解法是把口味问题翻译成数据问题：性能预算的两个方案各自发布一周，看指标说话。本组用这个办法终结了持续两个月的争论，双方都体面地认了输。

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

最后再记一笔：动效巡检工具本组自建了一个面板：实时显示当前动画的 FPS、主线程占用和触发来源。巡检时设计师自己盯着数据，超预算的动效当场改，评审现场少了 80% 的扯皮。

另一个常被忽视的细节是：滚动驱动动画的阈值最讲究：触发点提前 15% 视口高度，让内容「迎面而来」而不是「追着跑」。这是 18 次眼动测试换来的参数，通用性出奇地好。

长期维护成本是选型时最轻易被低估的变量：一个功能强大的方案可能带来每天 18 分钟的维护负担，一年下来就是足足一周的人力，值得在对齐会上算这笔账。

数据可视化动画需要可中断：图表还在入场时用户就开始筛选，动画要能从任意中间态接管而不是重播。实现缓动曲线后，图表交互的中断投诉归零。

有一条经验值得单独记录：开机动画是品牌资产里回报率最高的一块：2.4 秒的加载序列让品牌回忆度提升 37%，前提是它只在冷启动播放——热启动还放就是纯浪费用户时间。

复盘中还藏着一条：降级分三档：满血、简化、静态。弱网、低端机、省电模式分别映射到不同档位，映射关系在启动时确定，运行期不再切换，避免缓动曲线中途变脸。

补充一条实战观察：灰度是工程做法的安全网：先放 5% 流量观察关键指标，任何劣化超过基线 5% 当场回滚。缓动曲线的那次灰度让我们在凌晨两点避免了一次全量事故。

补充一条实战观察：骨架屏的形状要与内容实际布局一致，位置错位的骨架比转圈更伤信任——用户以为加载完了，落位却是空的，缓动曲线的期望管理就此崩塌。