动画、Tween 与操作反馈

级别：首作必学。 动画需要同时回答三个问题：开始时规则是什么、过程中能否操作、被打断后怎样恢复。

选对表现工具

工具	适合用途
Tween	位置、缩放、透明度等程序控制的短变化
Animation Clip	需要时间轴编辑和复用的动作
序列帧或骨骼动画	角色、复杂美术动作，按素材和预算选择
粒子	短暂强调成功与奖励，控制数量和生命周期

翻牌项目先用 Tween 缩放，翻至接近零宽时切换牌面，再恢复宽度。它是二维假翻转，不需要先制作 3D 卡牌。阅读视觉时机与缓动可衔接 UI Power。

最小翻牌片段

// Cocos 组件内，导入 tween、Tween、Vec3。
private showFace(changeSprite: () => void) {
  Tween.stopAllByTarget(this.node);
  tween(this.node)
    .to(0.08, {scale: new Vec3(0, 1, 1)})
    .call(changeSprite)
    .to(0.08, {scale: new Vec3(1, 1, 1)})
    .start();
}

示例假定视觉节点初始缩放为 1。实际项目可以把动画放到卡牌的子节点上，避免覆盖布局缩放。停止 Tween 后必须恢复可重建的视觉状态，不能让节点永远停在零宽。

锁输入与结算时机

规则层的 resolving 负责阻止第三张牌。翻牌动画自身也有表现期状态，避免还没显示完第一张就立即覆盖成另一状态。两者要区分：规则决定允许什么，表现协调何时显示完整结果。

不匹配时，保证第二张牌面已显示，再给玩家观察时间。等待时长是可调体验参数，不能当作普遍最优值。匹配成功后可轻微强调，再把牌保留为配对态；最终成功提示要与局结算一致。

中断是正常路径

重开、禁用节点、退出场景和切后台都可能中断动画。为每种情况确定策略：直接恢复最终状态、继续未完成表现，或重绘当前规则状态。避免只有动画自然播完才能释放的锁。

重复播放音效、粒子叠加、结算弹窗重复出现，通常需要在状态转换边界触发一次，而不是每帧或每次 render 都触发。

练习：在动画一半时重开，再启用节点。完成标准：牌的缩放正常、输入可恢复，旧动画不会把新牌面换回去。

参考：Cocos Tween 示例。