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

Question

我正在使用GSAP/Tweenmax制作一些动画，我非常接近我想要的动画。我有两个不同的时间表-一个用于移动，一个用于桌面。我如何确保它们每个都与窗口宽度有关，以及如果屏幕大小调整为每个动画的最终状态。我尝试过使用一些窗口宽度调整调用，但现在每次移动浏览器宽度时都会播放动画，我明白为什么我调用函数，最好的方法是什么？谢谢！：(

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();

顺便说一下，你应该完全使用GSAP3！它有一个更小的文件大小，更光滑的API，和一系列新功能！

此外，你更有可能在GreenSock论坛上获得更快的响应和更多的见解。