AI-Wiki

定义

Interruptible Animation（可打断动画）是一条交互动效原则：当用户在动画尚未结束时再次改变意图，界面不应卡住、重播或硬切，而应从当前中间状态继续，平滑地切换方向或过渡到新的目标状态。

它关注的不是“动画是否好看”，而是“动画是否跟得上用户意图”。当用户操作速度快于动画播放速度时，这条原则会直接影响界面是否显得顺手。

在本文档中的语境

在 Jakub Krehel 的 make-interfaces-feel-better 这套规则里，Interruptible Animation 被视为界面“感觉顺不顺”的关键细节之一。它对应的不是展示型动画，而是交互状态变化时的反馈动画。

文中明确点名的适用场景包括：

hover 状态变化
toggle 切换
开关抽屉等显隐状态变化

这类场景的共同点是：用户可能在极短时间内反复切换状态，因此动画必须允许中途改变方向，而不能假设用户一定会等待完整时间线播放结束。

为什么优先使用 CSS transition

文中推荐在这类交互状态变化中优先使用 CSS transition，核心原因是它天然围绕“状态变化”工作，而不是围绕“预先写死的时间线”工作。

当元素的目标样式发生变化时，transition 可以：

在播放中途被打断
从当前进度继续过渡
平滑反向
平滑转入另一个目标状态

这正适合 hover、开关、抽屉这类“状态先变，动画再跟上”的界面行为。用户鼠标刚移入又移出、开关刚打开又关闭、抽屉刚展开又收起时，transition 通常可以从当前视觉状态自然回退，而不会显得生硬。

文中还提到，iOS 大量使用这种可打断动画；相比之下，桌面端和 Web 端经常忽略这个细节。

为什么不推荐 keyframe 作为默认方案

文中并不是说 keyframe 动画完全不能用，而是强调它不适合作为这类交互状态切换的默认实现。边界在于：keyframe 依赖固定时间线。

固定时间线带来的典型问题是：

动画被打断时容易从头播放
状态快速反转时容易出现硬切
视觉上像是在执行脚本，而不是响应用户当前意图

因此，在 hover、toggle、抽屉开关这类高频、可逆、可能反复触发的交互里，keyframe 往往不如 transition 自然。它更适合一次性、展示性、叙事性较强的动效，而不是需要随时听命于用户输入的状态反馈。

进入与退出的节奏细节

Interruptible Animation 在文中的含义不只是不“卡”，还包括进入与退出节奏要符合用户注意力。

进入：可以分块错开

元素进场时，不建议整个容器作为一个大块一起飞入。更好的做法是把内容拆成多个独立部分，例如：

标题
描述
按钮

这些部分可以按顺序错开出现，文中给出的 delay 建议是 80–100ms。

这样做的目的不是炫技，而是让界面层级更清楚，用户更容易跟随内容进入。

退出：更轻、更短

退出动画的处理原则与进入不同。文中强调：退出时应更轻、更短，因为这时用户的注意力通常已经转向下一个目标。

推荐的退出方式是使用较轻的组合，例如：

小幅 translateY
opacity 下降
blur 增加

同时要避免“整块滑出屏幕”这类存在感过强的退出方式。文中的态度很明确：退出不应抢戏，也不应拖慢用户节奏。

此外，退出动画时长应短于进入动画。进入可以稍微展开，退出则应尽快让路。

与图标切换动画的关系

文中还给出了一个非常具体的图标切换参数示例，这可以看作 Interruptible Animation 在微交互中的典型应用。

图标出现或切换时，不要直接做显示/隐藏切换，而应组合以下三个属性：

scale: 0.25 → 1
opacity: 0 → 1
blur: 4px → 0

这类动画如果被用于状态切换，同样应尽量保持可中断、可反向，而不是做成僵硬的一次性播片。

如果项目使用 framer-motion，文中给出的额外限制是：

使用 spring 动画
bounce 必须为 0

bounce: 0 的含义是避免回弹带来的多余弹性，让状态切换更克制、更直接，也更符合这套“顺手感优先”的动效风格。

如果没有使用 motion 库，文中建议把两个图标都保留在 DOM 中，通过：

绝对定位
CSS 交叉淡入淡出

来实现切换。这样通常也比简单地移除/插入节点更稳定，更容易得到平滑过渡。

关键机制总结

从机制上看，Interruptible Animation 的核心不是某一个 API，而是以下几个判断标准：

动画是否由“状态变化”驱动，而不是由固定时间线驱动
用户在中途反向操作时，动画能否自然掉头
退出是否比进入更短、更轻
动效是否服务交互，而不是压过交互

只要一个动画在用户改变意图时还能保持连续、轻量、可逆，它通常就更接近这条原则。

细节与边界

更适合的场景

这条规则尤其适合以下界面行为：

鼠标移入、移出时的 hover 反馈
开关组件的 on/off 切换
抽屉、面板、popover 等显隐切换
图标替换、按钮状态变化等微交互

这些场景都有一个共同边界：状态可能在短时间内来回变动。

不要把所有动画都理解为“可打断动画”

文中讨论的是交互状态变化，不是所有类型的动画。像品牌片头、引导过场、一次性的故事型展示动画，并不一定以可打断为首要目标。

因此，Interruptible Animation 不是“全站禁用 keyframe”，而是说：当动画承担的是交互反馈职责时，应优先保证可打断性。

退出不要做成大动作

这是文中特别明确的边界条件：退出时不要让整个模块整块滑出屏幕。

原因不是技术做不到，而是这种退出方式通常过重，会让用户已经完成的操作还要再承受一遍“收场表演”，从而影响流畅感。

Interruptible Animation

定义