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

【问题标题】：Pause Greensock animation at beginning of window re-size event, resume animation at end of resize event在窗口调整大小事件开始时暂停 Greensock 动画，在调整大小事件结束时恢复动画
【发布时间】：2016-01-19 11:39:52
【问题描述】：

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

在我当前的项目中： 浏览器总是正确加载动画/横幅，响应式设计和初始加载！但是，在实际的窗口上升事件期间，如果动画正在触发；然后横幅内的资产“响应定位”变为“偏移”

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

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

只是想一些简单的事情，比如.. beginning-of-Windowresize=pause; end-of-Windowresize=resume;

有人对此有解决方案吗？

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

这里是一个简单的绿袜动画与窗口调整大小混合的例子。它目前根本不喜欢这个，我不确定如何用我目前的 javascript 知识将其改进为 pause/resume。

        $(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') ;
});

【问题讨论】：

标签： javascript jquery animation gsap

【解决方案1】：

您正在寻找一个去抖动的函数。您可以设置一个前导函数来暂停时间线，并设置一个尾随函数来恢复时间轴。我使用的去抖动功能是从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

【讨论】：