Javascript Tweenmax js中的回调太多

有没有更好的方法在Tweenmax中编写这种类型的代码

TweenMax.to("#second-scene .layer-one", 0.5, {delay:0.2, top:0, onComplete: function() { 

                    TweenMax.to("#second-scene .layer-two", 0.5, {top:0, onComplete: function() {

                        TweenMax.to("#second-scene .layer-three", 0.5, {left:0, onComplete: function() {

                            TweenMax.to("#second-scene .layer-four", 0.5, {left:0, onComplete: function() {

                                TweenMax.to("#second-scene .layer-five", 0.5, {left:0, onComplete: function() {

                                    TweenMax.to("#second-scene .layer-six", 0.5, {top:0} );

                                }} );
                            }} );
                        }} );
                    }} );
                }} );

我想知道这样写是否会影响性能

---

提前感谢

您可以对类似的tweening对象使用交错动画方法。允许您定义对象数组、每次交错之间的时间、回调等

var objects = [obj1, obj2, obj3];
TweenMax.staggerFromTo(objects, 3, {top:100}, {top:0}, 0);

就性能而言，我不认为会有什么不同。只会使代码更具可读性和可编辑性。

您应该使用：

Timeline按顺序执行动画，因此不需要回调

var tl = new TimelineLite();

tl.to("#second-scene .layer-one", 0.5, {delay:0.2, top:0});
tl.to("#second-scene .layer-two", 0.5, {top:0});
//and so on