暂停在 Timeline Lite 中不起作用

Posted 2023-05-07

【中文标题】暂停在 Timeline Lite 中不起作用

【英文标题】：Pause doesn't work in Timeline Lite

【发布时间】：2013-08-01 21:07:59

【问题描述】：

我想一个接一个地滑动 div 中的每个元素，并在每个项目滑动后暂停。下面附上我的代码。 $(函数 ()

$('.tick').each(function ()

var $self = $(this);

var t1 = new TimelineLite();

t1.to($self, .5, x: 100, ease: Cubic.easeInOut );

t1.pause();

t1.resume();

);'

它的作用是：一次滑动所有项目。每个项目滑动后它不会暂停...代码中的问题是什么？

感谢和问候，

兔子

【参考方案1】：

var delayTween = 0.1;   // your pause time in seconds
var tweenArr = [];

// I have put this line outside of each block because it will re insatiate t1 all the time, and we require to initialise it only once
var t1 = new TimelineLite();

$('.tick').each(function () 

    // var $self = $(this);     
    // there is no need to bind this to jquery object because tweenmax works well with "this" (html element)

    tweenArr.push(
        TweenMax.to(this,0.5,x:100,ease:Cubic.easeInOut);
    );

);

t1.add(
    tweenArr,
    '+=0',
    "sequance",
    delayTween
);

【参考方案2】：

发生的事情是你打电话给pause()，然后你打电话给resume()。

您可以做的只是添加另一个to() tween 并传递一个空的target 和vars 对象。然后将其duration 设置为您想要的暂停时间。

// pause timeline for 5 seconds 
t1.to(, 5, );

另见：GreenSock Forum Topic - Inserting a pause delay wait into timeline

希望这会有所帮助！ :)