用 motion-anything 处理动效与用户交互的冲突

motion-anything 这类动效工具通常能轻松实现滑入、缩放、抖动等效果，但一旦用户操作变得密集，动画本身反而会阻碍交互。冲突的根源在于动画是异步的：它基于动画开始时的状态计算，而用户的新操作会立刻改变状态，于是动画的目标值已经过期。处理这类问题，不能只把动画当作视觉装饰，而要把它纳入交互状态管理。

处理动效与交互冲突，核心只有一条：交互意图永远优先于动画表现。操作上，每次新事件触发时取消未完成的旧动画，让新状态直接驱动下一帧；动画时长控制在 200ms 以内，并用 cancel 或等效 API 保证可中断；动画完成回调只做展示收尾，不能依赖它更新业务状态。具体接口需要结合 motion-anything 的实际情况确认。

冲突通常出在哪个环节

最常见的冲突发生在快速点击。比如一个发送按钮，点击后触发一个 300ms 的放大动画，但用户在 100ms 时又点了一次。第一次动画还没结束，第二次点击已经改变了按钮的 loading 状态，第一次动画的结束回调如果重置状态，就会把第二次点击的状态冲掉。另一个典型场景是滚动：页面滚动到某个区域时触发元素浮入，用户反向滚动时旧动画仍继续播放，元素位置和滚动位置错位。拖拽中同样会遇到，动画补间和手动位移互相叠加。

这些冲突的共同点是：动画的生命周期没有和事件的生命周期绑定。动画在事件触发时启动，但它不知道后续事件已经发生。

处理原则：交互优先，动画可中断

对于任何动效，都要做到“可中断”。动画执行过程中，如果新的同类型事件到来，旧动画立即失效。实现方式不是等待动画自然结束，而是直接跳到最终态或切换到新动画。对于交互性强的元素，比如按钮、轮播、菜单，动画时长建议控制在 100~180ms，超过 300ms 会明显降低操作感。另外，不要在动画完成回调里更新业务状态。正确做法是：事件处理函数里同步更新状态，动画只负责视觉过渡，回调里最多做视觉清理。

用 motion-anything 实际处理冲突

以点击按钮为例。先给每次点击绑定一个动画对象，新点击发生时，调用 cancel 取消上一次。如果 motion-anything 的接口类似 Web Animations API，可以这样写：

let currentAnim = null;

sendButton.addEventListener('click', (e) => {
  // 新点击优先，取消旧动画
  if (currentAnim && typeof currentAnim.cancel === 'function') {
    currentAnim.cancel();
  }

  // 更新业务状态
  sendButton.classList.add('is-loading');
  api.send().finally(() => {
    sendButton.classList.remove('is-loading');
  });

  // 启动新的动效，假设 animate 是 motion-anything 提供的方法
  currentAnim = animate(sendButton, {
    transform: 'scale(0.96)',
    duration: 120,
    easing: 'ease-out',
    direction: 'alternative'
  });
});

如果 motion-anything 不直接提供 cancel，可以给每次动画加一个递增的 token，在动画的每一帧回调里检查 token 是否仍然是当前值。这样旧动画即使没有被取消，也会发现 token 过期而自动停住。

滚动场景的处理思路不一样。滚动方向的改变不应该用 cancel 暴力打断，而是应该用方向值来决定动画去向。以一个从下方浮入的元素为例：

let lastScrollY = window.scrollY;
let scrollDirection = 0; // 1 向下, -1 向上

window.addEventListener('scroll', () => {
  requestAnimationFrame(() => {
    const y = window.scrollY;
    if (y > lastScrollY) {
      if (scrollDirection !== 1) {
        // 从向下转为向上时，取消上一次入场动画
        currentScrollAnim?.cancel();
        currentScrollAnim = animate(element, { transform: 'translateY(0)' });
        scrollDirection = 1;
      }
    } else if (y < lastScrollY) {
      if (scrollDirection !== -1) {
        currentScrollAnim?.cancel();
        currentScrollAnim = animate(element, { transform: 'translateY(20px)' });
        scrollDirection = -1;
      }
    }
    lastScrollY = y;
  });
});

拖拽场景则建议不要用补间动画，直接把元素 transform 设为指针位置，拖拽结束后再放一个短的弹性动画。如果 motion-anything 提供的是拖拽相关的组件，优先用它的状态回弹，而不是自己叠加动画。

验证方式和边界

用 5 倍速连续点击目标按钮 10 次，检查状态是否一致，有没有动画中间态残留。
在页面滚动区域缓慢来回滚动，观察触发动画的元素是否出现闪烁或位置错位。
在动画进行中执行新的交互，打开控制台确认没有未处理的 Promise 异常。
如果动画时长超过 300ms，先缩短时长，再考虑其他优化。

边界在于：动画取消不能解决所有问题。如果交互本身有不可重入的异步操作，比如发送请求，需要在前端做防重复提交，动画只是视觉层。此时建议在动画取消的同时，用这个动画实例的 finished 状态来判断是否需要跳过回调。

常见问题

动画还没取消完，下一次点击已经触发，怎么办？

这通常说明取消只是代码上调用，但实际没有生效。检查动画实例是否被覆盖，或者 cancel 之后是否还有帧回调。一个稳妥的替代方案是每一帧校验一个 token，token 不匹配就立即停止绘制。

滚动时动画一直在播放，暂停不了

滚动本身是高频事件，监听器里不要直接启动动画。先通过 requestAnimationFrame 合并滚动帧，再在回调里判断方向是否变化。方向没变化就不要重复触发动画，只在方向切换时启动一次。