Question

有没有更好的方法在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} );

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

我想知道以这种方式写作会影响表现。

提前致谢

Answer 1

您可以将Staggered Animation方法用于类似的补间对象。允许您定义对象数组，每次交错之间的时间，回调等。

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

TweenMax.staggerFromTo()

表现明智，我认为不会有任何不同。只需提供更易读和可编辑的代码。

Answer 2

您应该使用TimelineLite/Max：

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

时间轴按顺序执行动画，因此不需要回调

Tweenmax js中的回调太多

2 个答案: