在输入时启动/停止 js 动画时间线的最佳方法是什么答案

【问题标题】：What is the best method of starting/ stoping js anime timeline on input在输入时启动/停止 js 动画时间线的最佳方法是什么
【发布时间】：2018-05-08 12:16:33
【问题描述】：

我正在尝试创建一个动画（使用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 等事件侦听器的同时，有没有人能告诉我实现预期效果的最佳方法。

【问题讨论】：

标签： javascript input anime.js

【解决方案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);
};

【讨论】：

【解决方案2】：

这里提出了在当前循环结束时停止动画的问题： on github那里有一些不错的建议。

也许最好的是来自Edrees Jalili

function pausableLoopAnime({loopComplete, ...options}) {
  const instance = anime({
    ...options,
    loop: true,
    loopComplete: function(anim) {
        if(instance.shouldPause) anim.pause();
        if(typeof loopComplete === 'function') loopComplete(anim);
    }
  });
  instance.pauseOnLoopComplete = () => instance.shouldPause = true;
  return instance;
}

const animation= pausableLoopAnime({
  targets: '.polymorph',
  points: [
      { value: '215, 110 0, 110 0, 0 47.7, 0 67, 76' },
      { value: '215, 110 0, 110 0, 0 0, 0 67, 76' }
  ],
  easing: 'easeOutQuad',
  duration: 1200,
});

setTimeout(animation.pauseOnLoopComplete, 100)

【讨论】：