當滾動停止時，Anime.js 停止動畫

Question

目標是讓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 鏈接

任何幫助表示贊賞！

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;
    }
  });
}
/*...*/