TweenMax.allTo
需要多个MC进行相同的缓动。比如下面这个游戏菜单。三个按钮的缓动是相同的,都缓动到同一个x坐标位置。然后同时有缓动出舞台。
如果有TweenLite实现的话,需要
if (isReverse) {
TweenLite.to(menu1, 0.5, { x: -200 } );
TweenLite.to(menu2, 0.5, { x: -200 } );
TweenLite.to(menu3, 0.5, { x: -200 } );
}else{
TweenLite.to(menu1, 0.5, { x: 200, delay: 0 } );
TweenLite.to(menu2, 0.5, { x: 200, delay: 0.3 } );
TweenLite.to(menu3, 0.5, { x: 200, delay: 0.6 } );
}
isReverse = !isReverse;
TweenLite.to(menu1, 0.5, { x: -200 } );
TweenLite.to(menu2, 0.5, { x: -200 } );
TweenLite.to(menu3, 0.5, { x: -200 } );
}else{
TweenLite.to(menu1, 0.5, { x: 200, delay: 0 } );
TweenLite.to(menu2, 0.5, { x: 200, delay: 0.3 } );
TweenLite.to(menu3, 0.5, { x: 200, delay: 0.6 } );
}
isReverse = !isReverse;
而用TweenMax实现,我们只需要
if (isReverse) {
TweenMax.allTo(buttonList, 0.5, { x: -200});
}else{
TweenMax.allTo(buttonList, 0.5, { x: 200}, 0.3);
}
isReverse = !isReverse;
TweenMax.allTo(buttonList, 0.5, { x: -200});
}else{
TweenMax.allTo(buttonList, 0.5, { x: 200}, 0.3);
}
isReverse = !isReverse;
allTo的第1个参数buttonList是存储所有menu的一个数组,TweenMax会自动遍历数组里的对象,然后应用相同的缓动。第2个和第3个参数分别表示缓动时长和缓动参数,这一点与TweenLite.to方法一样。最后一个参数表示每个对象缓动之间的间隔,默认为0,即所有对象同时开始缓动。本例中的0.3即每个对象缓动间隔0.3秒。
TweenMax是个什么东东?它继承于TweenLite,是TweenLite的一个子类。由继承的特性可以知道,TweenMax即含有父类TweenLite原有的方法(如to,from以及TweenLite的缓动属性),同时又扩展了自己特有的一些方法(如本例中的allTo),是TweenLite的高级版。稍后我们再细细的讨论它与TweenLite的区别,你可以在TweenMax官网了解更多的知识。