Question

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

使用我当前的项目：浏览器始终正确加载动画/横幅，响应式设计以及所有初始加载！但是在实际的窗口risize事件期间，如果动画正在触发;然后横幅内的资产“响应式定位”变得“偏离”

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

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

只是想一些像......开始的Windowresize =暂停;结束Windowresize =履历;

有人有解决方案吗？

我感谢任何帮助！非常感谢！

下面是一个简单的绿色摇滚动画与窗口重新混合的例子。它目前根本不喜欢这个，我不知道如何使用我当前的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') ;
});

Answer 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

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

1 个答案: