如何为产品动效选择缓动曲线
两个面板在相同时间内移动相同距离，给人的感觉却可能截然不同。一个到达时，像是被人小心地放到了位置上；另一个却像撞上了一堵看不见的墙。还有一种会飘过目标位置再折回来，把一次普通的界面变化变成一场小表演。
差别往往来自动画缓动：它是将已用时间映射为起始状态到结束状态之间进度的函数。但从一组时髦的预设中挑选缓动，并不是指导产品动效的可靠方法。某条曲线用在装饰卡片上也许很好看，却可能让价格难以读清，或让光标操作与操作结果看起来毫无关联。
更好的起点是明确这次运动承担什么任务。我们是在把信息带入视野、移走某个东西、连接两个状态、跟踪真实数值，还是维持背景运动？想清楚之后，曲线就会成为实用工具，而不只是风格标签。
界面转场还必须处理用户中途打断的情况，而渲染成片的视频遵循固定时间线。可以借鉴交互案例的视觉思路，再结合当前场景的下一个动作判断它是否合适。
理解缓动函数控制的是什么
以一个简单运动为例，可以想象有一个从零开始、到一结束的进度值。对象可能从左边缘移动到中央，从小卡片放大成大面板，或者从透明变成不透明。缓动决定这个进度在不同时刻推进得有多快。
线性变化在相同时间内完成相同份额的变化。缓出（ease-out）一开始运动较快，接近终点时减速。缓入（ease-in）正好相反。缓入缓出（ease-in-out）在两端附近较慢，中段较快。这些描述针对的是进度，而不是某个特定距离或视觉效果。
最后这一点很关键。曲线并没有固定的感知速度。即使采用完全相同的曲线，让面板在半秒内移动六百像素，与在半秒内移动六十像素，给人的印象也不同。同样，用一条曲线改变不透明度，和用它完成大幅位置移动，在感知上并不等价。
MDN 的缓动参考资料解释了时间进度与动画数值之间的关系，其中包括三次贝塞尔函数和阶梯函数。它提供的示例适合用来观察机制，避免仅凭预设名称作判断。MDN 缓动函数参考给出了技术定义。
先决定如何到达，再考虑花样
产品视频里的元素入场，通常是因为观众需要查看它。因此，它到达时的表现，比移动过程是否精彩更重要。
以一个显示新报告的面板为例。缓出入场可以让面板迅速进入视野，再经过一段可控的减速过程停稳。观众可以较早开始定位内容，随后看到稳定的结果。缓入入场则可能让面板在起点附近停留更久，并在即将到达阅读位置时达到最快速度。如果下一条讲解紧接着开始，这样的到达就可能显得突兀。
这两种曲线都没有绝对的对错。关键在于运动是否支持观众接下来要完成的感知任务。如果一个小提示符在操作完成后离场，加速离开可能很合适；如果是一条需要准确阅读的标题入场，就很难为突然停住的处理找到充分理由。
先用最简单、能清楚表达状态变化的入场方式，再检查停稳后的画面。旁白开始依赖这些文字之前，文字是否已经完全可读？面板停下的位置是否保留了它与触发控件之间的关系？位置停止变化后，阴影或模糊是否还在变化？这些次要属性也会推迟真正能够开始阅读的时刻。
动画看起来很精致，也可能没有把注意力顺利交给内容。目标是让到达的那一刻真正有用，而不只是让运动流畅。
把距离、时长和曲线放在一起评估
入场显得过猛时，人们的第一反应往往是延长时间。这也许有效，但也可能让整个场景变得拖沓。至少有三个变量可以调整：元素移动多远、花多长时间，以及进度如何分配。
假设一个标签从画面外很远的地方滑入。这样长的路径可能造成超出标签本身重要性的视觉干扰。缩短移动距离，既能保持场景利落，也能让运动更平静。随后用一条更克制的曲线收尾，就不必额外增加很长的等待。
大型界面放大时，也可能遇到相反的问题：很短的时间配上大幅缩放，迫使观众突然重新定位内容。稍微调整缓动可能还不够。你可能需要降低放大幅度、增加一个保留上下文的中间画面，或延长转场，并在结束后真正停留一段时间。
比较时，每次固定两个变量。先在相同距离和时长下比较曲线，再保留选中的曲线调整时长，最后判断路径本身是否过长。同时改变三个变量，也许会得到更好看的结果，却无法知道到底是什么解决了问题。
你不需要一张适用于一切场景的完美时长表，而需要一种可控的方法，弄清眼前这次运动。好的动效说明不仅描述移动的感觉，也要说明终点在哪里，以及希望观众从什么时候开始阅读。
只有含义允许时才使用过冲
过冲会让运动显得有弹性、活泼或富有能量，但也会额外制造一个事件：对象越过目标位置，然后返回。这个过程会占用注意力，也可能改变运动暗示的行为。
装饰徽章通常可以承受一次弹跳，图表数值、光标位置、进度条或价格却未必适合。如果柱条暂时超过最终数值，观众可能把这个过渡状态误认成数据。如果光标越过一个小控件，录制的操作就可能显得不准确。如果数字在停稳前剧烈缩放，它的单位或限定说明也可能在视觉上与它脱节。
要问清楚：这个对象本身需要过冲，还是仅仅因为时间线显得平淡才加上它？物理隐喻能解释关系时很有帮助；如果所有元素无论用途如何都像同一根弹簧，反而会分散注意力。
还要区分弹簧模拟与输出值会过冲的固定缓动曲线。二者看起来都可能有弹性，但机制不同。弹簧可以用刚度、阻尼等属性描述，具体表现取决于实现；三次贝塞尔曲线则映射一个固定的进度区间。不要假定不同工具中的参数名称可以直接通用。
Material 较新的动效指南为 M3 Expressive 引入了基于物理的系统，但能否使用、如何使用，取决于采用的具体实现。这个例子说明，“Material 缓动”并不是一条永远不变的曲线。查阅参考时，要确认它属于哪一代规范、哪种实现。Material 动效概览说明了当前系统的适用范围。
保留持续运动原本的含义
线性运动常常显得机械，但有时恰恰需要这种机械感。匀速旋转、像传送带一样移动的图案，或时间线指示器，可能都需要稳定推进。如果每次循环都加入缓入缓出，循环接缝处就可能出现明显的迟疑。
给数值添加动画也会遇到同样的问题。如果数字表示经过的时间，装饰性缓动可能让时间看起来忽快忽慢。如果视频只是在演示计数，而不是测量实时经过的时间，这也许可以接受，但应当有意识地区分这两种情况。
数据转场还需要明确中间状态意味着什么。两个数值之间的插值能帮助观众追踪变化，但中间值未必是数据集里的实际观测值。流畅的运动不应暗示底层过程在这些点上都接受了连续测量。
如果镜头跟随光标移动，镜头曲线还会与光标曲线相互影响。两者各自缓动时，光标可能在画面内漂移，目标也可能像在逃离镜头。有时，更好的做法是让镜头在操作发生时保持静止，再移动到操作结果所在的状态。
用缓动表达你真正想要的视觉事件。匀速运动、传递信息的转场和装饰性强调，承担的是不同任务。统一的品牌预设可以保持一致性，但仍需要根据运动的含义设置例外。
把相关元素协调成同一个事件
面板、标题和阴影各自采用好看的曲线，合在一起却可能彼此脱节。标题可能早于承载它的表面到达，阴影也可能滞后太多，让面板看起来突然改变了深度。
把相关属性视为同一个感知事件。先决定观众应该先理解什么、哪些元素应该一起移动。面板携带一句话移动时，保持内部相对关系稳定通常更有利。等主要表面停稳后，再有意错开时间，逐步展示次要内容。
一个常见错误是：仅仅因为工具很容易做到，就给每个子元素都加上独立入场。这样观众必须追踪多条轨迹，而不只是关注一个终点。动画更多，不一定意味着层级更清晰。
产品演示尤其要仔细协调光标动作和界面结果。按下按钮后，如果接着出现一段毫不相关的弹性入场，场景就可能显得人为拼凑。保留因果连接：先有操作，再有响应，最后是稳定的结果。如果原始录屏已经包含界面自身的转场，再添加一个大幅效果，可能会重复甚至抵触原有运动。
以正常速度检查整个事件。慢慢拖动时间线适合找重叠问题，却也容易让过度错开的入场显得优雅，因为你有足够时间检查每个部分。真正的观众只会看一次，而且旁白和其他信息也在争夺注意力。
给 AI 智能体能够执行的指令
“让动画更流畅”留下了太多开放变量。智能体可能延长场景、增加弹跳、缩短距离、改变所有曲线，或者给移动内容加上模糊。其中有些改动可能破坏原来的目标。
更有用的指令会点明事件和预期结果：“让报告面板快速进入阅读位置，在停止前减速，并让文字相对于面板保持固定。保留当前的最终位置和两秒停留。”这样，智能体既知道要修改哪个具体运动，也知道必须保留什么边界。
请求对比方案时，要求各版本采用相同的时长和路径，以便单独判断缓动。在改变序列其他部分之前，先审看这些方案。选定一种运动表现之后，记录它服务于什么事件，而不只是记下曲线名称。
如果项目的动画由源码定义，就把曲线放在靠近时间控制项的命名值中，方便追踪后续修改。代码结构不是创作结果本身，但能避免一次小小的缓动调整不可预测地波及无关场景。
谨慎解读数值比较
来看一个示意运动：在零点六秒内移动四百像素。无论采用哪条缓动曲线，平均速度都约为每秒六百六十七像素。曲线改变的是速度在时间内的分配方式。
对于一个简单的三次缓出函数，其定义是用一减去“一减去归一化时间”的三次方，初始速度是平均速度的三倍，到终点时降至零。线性运动则始终保持平均速度。
这个比较解释了为什么缓出能同时显得迅速、可控：它在前段完成更多位移，再更柔和地靠近终点。也解释了为什么同一条曲线用在长路径上可能过猛：时长不变时，距离越长，起步时的速度冲击就越大。
再看这次四百像素运动进行到一半时的画面。零点三秒后，线性运动已经走了两百像素；三次缓出已经走了三百五十像素，后半段时间只需完成剩下的五十像素。总时长相同，但面板已经更接近终点。
如果需要让观众尽快辨认终点，这种差异很有用。如果观众需要跟随精确路径，或在移动过程中查看信息，它就未必合适。先决定哪个时刻需要稳定，再为那个时刻安排真正的停留。换成缓出曲线本身并不会创造停留，它改变的只是接近终点的过程。
用数字诊断运动，而不是寻找通用的目标速度。如果面板起步时显得猛烈，缩短路径可能比继续延长最后的减速更有效。如果时长已经很短却仍显得拖沓，就检查有多少时间几乎没有发生移动。曲线、路径和终点必须作为同一个事件来判断。
按实际播放尺寸判断最终运动
大尺寸预览可能掩盖过长的移动路径，也可能掩盖最终文字过小的问题。按目标播放器的尺寸观看导出场景，关注自己从什么时候知道该看哪里，而不只是动画何时结束。
然后试一个效果更弱的版本。去掉过冲、缩短路径，或让表面保持静止，只改变高亮。如果这样更容易理解产品，简化版本就值得采用。如果更丰富的运动能够解释重要关系，就保留它，同时给观众足够的时间利用最终结果。
适合动态图形的缓动，应当让事件连贯，并让重要信息随时可供查看。观众能顺着动作理解内容，完全不用考虑曲线本身，曲线就发挥了作用。