Anime.js在滚动停止时停止动画

Question

目标是仅在用户滚动时使anime.js动画，并在滚动停止时停止动画。上下滚动的动画不同。 这是当前代码：

dxiv

jsfiddle link

任何帮助表示赞赏！

Answer 1

它不起作用，因为您在每个 window.clearTimeout( isScrolling );事件上都调用scroll。假设浏览器在100毫秒内触发了两个scroll事件，则第一个动画不会暂停，因为第二个事件调用的clearTimeout清除了暂停动画的功能。

最后，您无需暂停即可，只需调整持续时间和翻译值

var duration = 200;
var offset = 50;

/*...*/

if (down) {
  focusDown = anime({
    targets: '.focus-text', easing: 'linear', duration: duration,
    translateX: function(el) {
      return $('.focus-text').offset().left + offset;
    }
  });
}
if (up) {
  focusUp = anime({
    targets: '.focus-text', easing: 'linear', duration: duration,
    translateX: function(el) {
      return $('.focus-text').offset().left - offset;
    }
  });
}
/*...*/