GSAP / TweenMax 在移动设备上禁用桌面动画，反之亦然，并在调整大小时重置

Question

我正在使用 GSAP / Tweenmax 制作一些动画，我非常接近我想要的动画效果。我有两种不同的时间表 - 一种用于移动设备，一种用于桌面。我怎样才能确保他们每个播放关于 window 宽度，以及如果屏幕调整大小清晰到每个动画的最终状态。我尝试使用一些 window 宽度调整调用，但现在每次浏览器宽度移动时动画都会播放，我明白为什么我调用函数的方式是什么，最好的方法是什么？谢谢！ :)

js:

 $(function () {


    function animations() {
      if ($(window).width() > 768) {
        heroAnimation.play(0);
      }   else {
        heroAnimation.pause(0);
      }
    }

    function animationsMobile() {
      if ($(window).width() <= 767) {
        heroAnimationMobile.play(0);
      }   else {
        heroAnimationMobile.pause(0);
      }
    }

    $(window).resize(animations);
    animations();

    $(window).resize(animationsMobile);
    animationsMobile();

  });

Answer 1

您应该跟踪状态并且仅在状态发生变化时才重新启动动画。也只使用一个功能，不需要两个：

var state = "";
function animations() {
  var newState = state;
  if (innerWidth > 768) {
    newState = "big";
  } else {
    newState = "small";
  }

  if(newState !== state) {
    if(newState === "big") {
      heroAnimation.play(0);
      heroAnimationMobile.pause(0);
    } else {
      heroAnimation.pause(0);
      heroAnimationMobile.play(0);
    }

    state = newState;
  }
}

document.addEventListener("resize", animations);
animations();

顺便说一句，你应该完全使用GSAP 3！它具有更小的文件大小、更时尚的 API 以及一系列新功能！

此外，与 the GreenSock forums 相比，您更有可能获得更快的响应和更多见解。

GSAP / TweenMax 在移动设备上禁用桌面动画，反之亦然，并在调整大小时重置

GSAP / TweenMax disable desktop animation on mobile and vise versa and also reset on resize

javascript

gsap