如何修改 TimelineLite 计时？答案

【问题标题】：How to modify TimelineLite timing?如何修改 TimelineLite 计时？
【发布时间】：2015-11-25 09:02:24
【问题描述】：

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

在播放时，最后一个盒子有 4 秒的延迟，但相反，我希望动画在没有延迟的情况下一个接一个地播放。有一个函数 lastCompleted() 在最后一个补间运行后触发。如何使用该功能消除黑框和蓝框动画之间的延迟？

谢谢！

【问题讨论】：

标签： javascript jquery gsap

【解决方案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()s 时间线向前。
使用.staggerTo() 方法，而不是在.black 元素之前一一添加三个补间。
此外，margin-left 已被其 JS 等效项 marginLeft 替换，并且由于它接受数字并默认为像素，因此无需将值作为字符串传递。
.black 元素的补间现在有一个 onReverseComplete 回调。

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

【讨论】：