如何实现输入框输入时启停anime.js动画时间线并完成当前循环？

我来帮你搞定这个动画控制的需求～首先咱们得明确核心逻辑：用户开始输入时触发动画，输入过程中持续循环；一旦用户停止输入，要让动画完成当前的循环周期再停下，不能生硬中断。

问题根源分析 #

你原来的代码直接设置loop: true，这会让动画无限循环，但没办法在用户停止输入后优雅地结束当前循环——因为loop: true的动画一旦启动，除非手动暂停，否则会一直跑。另外，可能也没处理输入事件的防抖，导致每输入一个字符就触发一次动画，容易造成动画混乱。

完整解决方案 #

下面是调整后的实现，我会一步步解释关键逻辑：

1. 初始化状态变量 #

先定义几个变量来跟踪动画状态和输入状态：

let basicTimeline; // 存储动画时间线实例
let isInputActive = false; // 标记用户是否正在输入
let inputDebounceTimer; // 防抖定时器，用来判断用户是否停止输入
const STOP_DELAY = 1000; // 用户停止输入1秒后，判定为"停止输入"状态

2. 封装时间线创建函数 #

把创建时间线的逻辑封装成函数，这样每次需要启动/重置动画时都能复用：

function buildAnimationTimeline() {
  // 如果之前有时间线实例，先暂停并重置到开头
  if (basicTimeline) {
    basicTimeline.pause();
    basicTimeline.seek(0);
  }

  // 创建新的时间线，初始不设置loop
  basicTimeline = anime.timeline({
    loop: false,
    // 每次时间线完成一轮后，判断是否需要继续循环
    complete: function() {
      if (isInputActive) {
        this.restart(); // 如果用户还在输入，重新启动时间线实现循环
      }
    }
  })
  // 这里替换成你的动画步骤
  .add({
    targets: '.your-element',
    translateX: [0, 150],
    duration: 800,
    easing: 'easeInOutSine'
  })
  .add({
    targets: '.your-element',
    translateY: [0, 150],
    duration: 800,
    easing: 'easeInOutSine'
  })
  .add({
    targets: '.your-element',
    translateX: [150, 0],
    duration: 800,
    easing: 'easeInOutSine'
  })
  .add({
    targets: '.your-element',
    translateY: [150, 0],
    duration: 800,
    easing: 'easeInOutSine'
  });
}

3. 绑定输入事件并控制动画 #

给输入框绑定input事件，用防抖来处理停止输入的判断：

const inputField = document.querySelector('input');

inputField.addEventListener('input', function() {
  // 每次输入都清除之前的防抖定时器，避免误判停止输入
  clearTimeout(inputDebounceTimer);

  // 如果是第一次输入（动画还没启动），初始化并播放动画
  if (!isInputActive) {
    isInputActive = true;
    buildAnimationTimeline();
    basicTimeline.play();
  }

  // 设置新的防抖定时器，用户停止输入1秒后触发停止逻辑
  inputDebounceTimer = setTimeout(() => {
    isInputActive = false;
    // 这里不用手动暂停动画，时间线完成当前轮次后会自动停止
  }, STOP_DELAY);
});

4. 关键逻辑说明 #

• 循环控制：不直接设置loop: true，而是在时间线完成一轮后，通过complete回调判断用户是否还在输入，如果是就重启时间线，实现循环效果。
• 优雅停止：当用户停止输入后，我们只是把isInputActive设为false，动画会完成当前的循环周期，然后因为isInputActive为false，不会触发重启，自然停止。
• 防抖处理：用定时器延迟判断用户是否停止输入，避免用户输入过程中频繁触发状态变化。

替换成你的动画内容 #

只需要把buildAnimationTimeline里的动画步骤替换成你原来的动画目标和属性就可以了，比如你原来的basicTimeline里的add内容直接挪过来就行。

内容的提问来源于stack exchange，提问作者Andrew Bentley