滚动停止时Anime.js停止动画答案

【问题标题】：Anime.js stop animation when scrolling stops滚动停止时Anime.js停止动画
【发布时间】：2020-10-29 06:23:35
【问题描述】：

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

var focusDown, focusUp;
  var up = false, down = false, scrollPos = 0, scrollPos1;
  var isScrolling;
  window.addEventListener('scroll', function () {
    window.clearTimeout( isScrolling );
    scrollPos1 = $(window).scrollTop();
    if (scrollPos1 == scrollPos) {} else {
      if (scrollPos1 > scrollPos) {
        up = false;
        down = true;
      } else {
        up = true;
        down = false;
      }
    }
    scrollPos = scrollPos1;

    if (down) {
      focusDown = anime({
        targets: '.focus-text', easing: 'linear', duration: 20000, autoplay: false,
        translateX: function(el) {
          return $('.focus-text').offset().left + 500;
        }
      });
      focusDown.play();
    }
    if (up) {
      focusUp = anime({
        targets: '.focus-text', easing: 'linear', duration: 20000, autoplay: false,
        translateX: function(el) {
          return $('.focus-text').offset().left - 500;
        }
      });
      focusUp.play();
    }
    isScrolling = setTimeout(function() {
      if (focusUp && focusUp !== 'undefined') {focusUp.pause();}
      if (focusDown && focusDown !== 'undefined') {focusDown.pause();}
    }, 200);
  }, false);

jsfiddle link

任何帮助表示赞赏！

【问题讨论】：

标签： javascript animation scroll anime.js

【解决方案1】：

它不起作用，因为您在每个 scroll 事件上调用 window.clearTimeout( isScrolling );。假设浏览器在 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;
    }
  });
}
/*...*/

【讨论】：