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

Question

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

对于我当前的项目： 浏览器总是加载 animation/banner 正确，响应式设计，并且全部在初始加载时！但是在实际 window risize 事件期间，如果动画正在触发；然后横幅内的资产 "responsive-positioning" 变为 "off-set"

如果我可以简单地在 window-resize 事件开始时暂停我的动画并在 window resize 事件结束时恢复播放。它会解决我的问题。

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

只是想一些简单的事情，比如.. beginning-of-Windowresize=pause;窗口结束调整=恢复；

有人对此有解决方案吗？

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

这是一个混合了 window 重新调整大小的 greensock 动画的简单示例。它目前根本不喜欢这个，我不确定如何用我目前的 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') ;
});

Answer 1

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

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

Pause Greensock animation at beginning of window re-size event, resume animation at end of resize event

javascript

jquery

animation

gsap