Question

我对GreenSock很新，我遇到了麻烦...

我想修改GreenSock TimelineLite定时偏移以反转，以便删除一些延迟（我认为它们被称为交错）。

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

var tl = new TimelineLite({onReverseComplete:reverseCompleted});

$('#start').click(function(){
    tl.to(red, 0.3, {ease: Power1.easeInOut, 'margin-left':'100px'});
    tl.to(green, 0.3, {ease: Power1.easeInOut, 'margin-left':'100px'});
    tl.to(blue, 0.3, {ease: Power1.easeInOut, 'margin-left':'100px'});
    tl.to(black, 0.3, {ease: Power1.easeInOut, 'margin-left':'100px', onComplete:lastCompleted, onCompleteParams:[black]}, "+=4");
});

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

function lastCompleted(target) {
    console.log('lastCompleted');    
}

function reverseCompleted(){
    console.log('reverseCompleted');
    tl.clear();
    tl.restart();
}

在比赛中，最后一个方框有四秒钟的延迟，但反过来我想让动画一个接一个地播放，没有延迟。有一个函数lastCompleted（）在最后一个补间运行后触发。如何使用该功能消除黑框和蓝框动画之间的延迟？

谢谢！

Answer 1

看看 this 小提琴。

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

您的代码已经发生了很多变化。这是清单：

将补间添加到tl按钮的点击处理程序范围之外的#start实例中。点击处理程序只有.play()时间轴。
.staggerTo()方法用于代替在.black元素之前逐个添加3个补间。
此外，margin-left已被其等效的marginLeft取代，因为它接受数字和默认值为像素，所以不需要将值作为字符串传递。
.black元素的补间现在有一个onReverseComplete回调。

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

如何修改TimelineLite计时？

1 个答案: