Javascript 如何修改TimeLineSite计时？

我对格林斯托克很陌生，我给自己惹了麻烦

我想修改GreenSock TimeLineite的反向计时偏移，以便删除一些延迟（我认为它们称为交错）

以下是一个例子：

在播放时，最后一个框有四秒钟的延迟，但在相反的情况下，我希望动画能够在彼此之后播放，没有延迟。有一个函数lastCompleted（），它是在最后一个tween运行后触发的。如何使用该功能消除黑盒和蓝盒动画之间的延迟

谢谢

看看小提琴

JavaScript:

var red = $('.red');
var green = $('.green');
var blue = $('.blue');
var black = $('.black');

var tl = new TimelineLite({
    paused: true,
    callbackScope: this,
    onReverseComplete: onTlReverseComplete
});
tl.staggerTo([red, green, blue], 0.3, { marginLeft: 100, ease: Power1.easeInOut }, 0.3);
tl.addLabel('MyLabel');
tl.to(black, 0.3, { marginLeft: 100, ease: Power1.easeInOut, onReverseComplete: onBlackBoxReverseComplete, callbackScope: this }, '+=4');

$('#start').click(function () {
    tl.play();
});
$('#reverse').click(function () {
    tl.reverse();
});

function onBlackBoxReverseComplete() {
    tl.reverse('MyLabel');
}

function onTlReverseComplete() {
    tl.stop();
}

您的代码中有很多内容发生了更改。名单如下：

• Tween被添加到

  tl

  实例中，该实例不在

  #start

  按钮的click handler范围内。单击处理程序仅

  .play（）

  向前移动时间线
• 使用

  .staggeto（）

  方法，而不是在

  .black

  元素之前逐个添加3个tween
• 另外，

  marginLeft

  已经被它的JS等价物

  marginLeft

  所取代，因为它接受数字并默认为像素，所以不需要将值作为字符串传递

• .black

  元素的tween现在有一个

  onReverseComplete

  回调

希望这有帮助。如果你有任何问题，请告诉我

var red = $('.red');
var green = $('.green');
var blue = $('.blue');
var black = $('.black');

var tl = new TimelineLite({
    paused: true,
    callbackScope: this,
    onReverseComplete: onTlReverseComplete
});
tl.staggerTo([red, green, blue], 0.3, { marginLeft: 100, ease: Power1.easeInOut }, 0.3);
tl.addLabel('MyLabel');
tl.to(black, 0.3, { marginLeft: 100, ease: Power1.easeInOut, onReverseComplete: onBlackBoxReverseComplete, callbackScope: this }, '+=4');

$('#start').click(function () {
    tl.play();
});
$('#reverse').click(function () {
    tl.reverse();
});

function onBlackBoxReverseComplete() {
    tl.reverse('MyLabel');
}

function onTlReverseComplete() {
    tl.stop();
}