javascript - 在窗口调整大小事件开始时暂停Greensock动画，在调整大小事件结束时恢复动画

您好，我正在使用Greensock动画库。我有一个完全响应的复杂动画。我对javascript / jquery非常陌生，但是greensocks似乎很简单，可以制作复杂的动画。

在我当前的项目中：浏览器始终正确加载动画/横幅，响应式设计，并且全部处于初始加载状态！但是，在实际的窗口risize事件中，如果动画正在触发；然后横幅内的资产“响应定位”变为“抵销”

如果我可以简单地在窗口调整大小事件的开始处暂停动画，并在窗口调整大小事件的结束处恢复播放。它将解决我的问题。

我知道您可以通过此link暂停绿色袜子的动画。而且我知道您可以控制调整大小事件的发生，但是我的技能令人惊讶，知道如何设置语法。

只是想一些简单的事情，如：.. window-resize = pause; Window-resize = resume;

有人对此有解决方案吗？

我非常感谢您的帮助！非常感谢！

这是一个绿色袜子动画与窗口调整大小混合的简单示例。目前，它根本不喜欢这种方法，并且我不确定如何使用我当前的JavaScript知识来改进它以暂停/恢复。

        $(window).on('resize', tl.pause() function(){

        var tl1 = new TimelineMax();
        //delay
        tl1.from('#winBigBanner', 0.4, {})
        //drop in animation
        from('#wb_TV', 1.3, {top: -600, rotation:-20, ease: Bounce.easeOut})
        .from('#wb_IMAC', 0.8, {top: -650, rotation:60, ease: Bounce.easeOut}, '-=.68')
        .from('#wb_IPAD', 0.8, {top: -700, rotation:-30, ease: Bounce.easeIn}, '-=.68')
        .from('#wb_IPHONEPLUS', 0.8, {top: -600, rotation:-40, ease: Bounce.easeOut}, '-=.68')
        .from('#wb_IPHONE', 1, {top: -600, rotation:50, ease: Bounce.easeOut}, '-=.68') ;
});

最佳答案

您需要的是去抖动功能。您可以设置一个前导功能来暂停时间线，并可以设置一个尾随功能来恢复时间线。我正在使用的防抖动功​​能是从underscore复制的。

var tl = new TimelineMax();

var wait = 100;

$(window).resize(debounce(resizeLead, wait, true));
$(window).resize(debounce(resizeTrail, wait));

function resizeLead() {
  tl.pause();
}

function resizeTrail() {
  tl.resume();
}

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}

在CodePen上查看