跳到主要内容

补间与缓动：让按钮和弹窗有手感

依据：Cocos Creator 3.8 官方文档与时间插值原理。环境：站内浏览器演示；微信真机未验证。

先看一段运动​

按钮按下时缩小，松开后恢复；结算面板先快后慢进入。这些效果通常不需要逐帧画图片，而是让位置、缩放或透明度随时间变化。补间负责计算中间值，缓动负责决定变化的速度分布。美术提供静态面板，程序也能做出完整的入场反馈。

同一段位移在匀速、减速和回弹曲线下的时间分布

打开按钮反馈实验台，先保持起点、终点和时长相同，只切换曲线。观察：最终位置相同，但每一时刻经过的位置不同。回弹曲线会暂时越过目标，它适合强调弹性，却可能让面板越过安全区或与旁边元素相撞。

一条公式拆开看​

先把经过时间除以总时长，得到限制在 0 到 1 的进度 t。将进度送入缓动函数 e(t)，最后算 value = from + (to - from) × e(t)。例如 e(t)=1-(1-t)³ 表示快速出发、逐步减速。它本身不知道什么是按钮，也不知道点击是否有效；输入状态由交互逻辑负责。

展开：Cocos Creator 3.8 的一个补间片段
import { Node, Tween, tween, Vec3 } from 'cc';

export function settleButton(node: Node, pressed: boolean) {
  Tween.stopAllByTarget(node);
  tween(node)
    .to(0.12, { scale: new Vec3(pressed ? 0.94 : 1, pressed ? 0.94 : 1, 1) },
      { easing: 'quadOut' })
    .start();
}

这是针对独立反馈节点的示意片段，时长属于案例设计值。若同一节点还运行其他补间，停止该目标的全部补间会影响它们，应保存并停止自己的动画实例。

让动画服从状态​

正常、按压、释放和取消之间的状态转换，强调中断时恢复

动画结束并不等于业务成功。领取按钮可以在按压时播放缩放，但只有一次合法释放才触发领取；网络等待期间进入不可重复提交状态。用户拖出按钮、切换页面或触摸被系统取消时，也要恢复视觉。弹窗关闭时应停止尚未完成的入场动画，否则旧回调可能把刚隐藏的节点重新显示。

常见失败：越点越小​

如果每次按下都用“当前缩放乘 0.94”作为目标，多次中断后会累积误差。保存基准缩放，所有目标都从基准计算；同一属性由一个状态控制。另一个常见问题是 Widget 每帧重设位置，而补间也修改位置：两个系统同时争夺属性会造成抖动，可将布局放在父节点，把动画放在子节点。

何时换方案​

补间擅长数值连续变化，不擅长表现复杂的手绘形变。需要每帧不同轮廓时考虑序列帧，需要角色部件协同时考虑骨骼动画；固定导演式演出可以使用动画时间轴。先看 动画结构比较，再看 弹窗案例。

浏览器原理演示录制：按钮缩放与缓动反馈浏览器原理演示录制 · 循环 GIF

动图来源：本站浏览器示例录制，用于观察时序，不代表微信真机表现。

官方来源与适用范围​

资料核查日期：2026-10-30。文中的案例参数与图解用于教学；目标项目应按所用版本及平台重新验证。