javascript - 在输入时启动/停止 js 动漫时间轴的最佳方法是什么

Question

我正在尝试创建一个动画(使用 anime.js)，它在用户开始输入时播放一次动画时间轴，并在用户在输入框中输入时循环播放。当用户停止输入时，动画将完成当前循环并停止播放。

这是我目前的进度，您可以观察到动画工作不正常:https://codepen.io/andrewbentley/full/XqMrze

这是我的 anime.js 代码时间表:

var basicTimeline = anime.timeline({
  loop: true,
  autoplay: false,
  duration: 700
});

basicTimeline
  .add({
    targets: '#circ1',
    duration: 100,
    translateY: -10,
    easing: 'easeInQuad' 
  })
  .add({
    targets: '#circ1',
    duration: 100,
    translateY: 0,
    easing: 'easeInQuad'
  })
  .add({
    targets: '#circ2',
    duration: 100,
    translateY: -10,
    easing: 'easeInQuad'
  })
  .add({
    targets: '#circ2',
    duration: 100,
    translateY: 0,
    easing: 'easeInQuad'
  })
  .add({
    targets: '#circ3',
    duration: 100,
    translateY: -10,
    easing: 'easeInQuad'
  })
  .add({
    targets: '#circ3',
    duration: 100,
    translateY: 0,
    easing: 'easeInQuad'
   })
  .add({
    targets: '#circ3',
    delay: 100
});

document.querySelector('#email').onkeypress = basicTimeline.play;
document.querySelector('#email').onkeyup = basicTimeline.pause;

有谁能告诉我在使用 anime.js 时间轴实用程序和使用事件监听器(例如 onkeypress、onkeyup)时达到预期效果的最佳方法> 等等

Answer 1

我认为您需要一个计时器，它可以在一段时间不活动后暂停您的动画。

https://codepen.io/anon/pen/qYoPKQ

var timer = false;
document.querySelector('#email').onkeypress = function () {
  if(basicTimeline.paused) basicTimeline.play();
  if(timer) clearTimeout(timer);
  timer = setTimeout(function() {
    basicTimeline.pause();
    basicTimeline.reset();
  }, 500);
};