如何加快绿色轴承时间表？

Question

HTML

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

CSS

.box{
    width: 50px;
    height: 50px;
    background: rgb(107,127,125);
    border: 1px solid rgb(174,77,61);
    display: block;
 }

JS

var tl = new TimelineMax();
tl.staggerTo($(".box"), 1, {x: "200px"}, 0.4);

我想逐渐提高框动画的速度。 我：

1. 框动画持续时间= 1秒
2. box = 0.8s
3. box = 0.78s等

我知道我可以在框中循环并为每个框指定不同的持续时间，但有更有效的方法吗？

是否可以应用预定义的易用性，如

ease: Bounce.easeOut

到时间轴本身，而不是时间轴中的每个补间？

FIDDLE

Answer 1

您可以使用timeScale()在每次错开后加快时间线。这是an example。

function tweenComplete() {
  scale += 1;
  tl.timeScale(scale);
}