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

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

本文关键字：调整 动画 小事件 恢复 大小事 结束 Greensock 窗口大小 事件 开始时 暂停      更新时间：2023-09-26

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

对于我当前的项目：浏览器始终正确加载动画/横幅，响应式设计，并且全部在初始加载时！但是，在实际窗口转换事件期间，如果动画正在触发;然后横幅内的资产"响应定位"，成为"偏移"

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

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

只是想一些简单的事情，比如.. 窗口开始调整大小=暂停; 窗口结束调整大小=恢复;

有人对此有解决方案吗？

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

下面是一个将绿袜动画与窗口大小调整混合的简单示例。它目前根本不喜欢这个，我不确定如何改进它以暂停/恢复我当前的 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') ;
});

去抖动函数就是你要找的。您可以设置一个前导函数来暂停时间线，并设置一个尾随函数来恢复时间线。我正在使用的去抖动功能是从下划线复制的。

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

在代码笔上查看

相关文章：