tweenlite简单介绍

tweenlite,是webgame开发人员比较常用的一个缓动库。

官方网站:http://www.greensock.com/tweenlite/

  • 先简单介绍它的优点吧。

  1.高效,性能不会差。
  2.体积小,用到项目中,你的文件大小增加了3-4k。
  3.容易使用,常用的函数就那么几个

  • 入门资料

  看官方的《Getting Started Tweening》就够了吧。偶尔再查阅了api就行了。tweenlite的使用非常简单

TweenLite.to(mc, 1.5, {x:100, y:200, alpha:50});

  第一个参数是需要缓动的对象,第二个参数是持续时间,第三个是需要改变的对象属性。任何DisplayObject的属性都可以改变。还有很多可选的参数,比如缓动函数,最后结束时候的回调函数。

  • 说一下缓动函数,包括三种

  easeIn:以零速率开始运动,然后在执行时加快运动速度
  easeOut:以较快的速度开始运动,然后减慢运行速度,直至速率为零
  easeInOut:方法兼有 easeIn() 方法和 easeOut() 方法的运动,开始运动时速率为零,先对运动进行加速,再减速直到速率为零。
  tweenlite提供了各种类型的缓动函数,使用时直接调用即可

  • 当你写了一个tweenlite,想重复利用时,可以调用它的相关函数
复制代码
var myTween:TweenLite = new TweenLite(mc, 1, {x:100, y:100});
//pause
myTween.pause();
//resume (honors direction - reversed or not)
myTween.resume();
//reverse (always goes back towards the beginning)
myTween.reverse();
//play() (always goes forwards)
myTween.play();
//restart
myTween.restart();
//invalidate (clears out any starting values that were 
//recorded and forces the tween to re-initialize on the next render)
myTween.invalidate();
//kill the tween immediately
myTween.kill();
//kill all tweens of the mc object
TweenLite.killTweensOf(mc)
复制代码
  • 如果有多个组合的动作需要播放,可以使用 TimelineLite
var myTimeline:TimelineLite = new TimelineLite();
myTimeline.append( new TweenLite(mc, 1, {x:100}) );
myTimeline.append( new TweenLite(mc, 1, {y:200}) );
myTimeline.append( new TweenMax(mc, 1, {tint:0xFF0000}) );
  • 对于多个组件施加相同的动画效果可以用
TweenMax.allTo([btn1, btn2, btn3], 1, {alpha:0, y:"100"}, 0.1);

更多的使用技巧,可以去看看官方的 《Tips and Tricks》

觉得tweenlite不够用,还可以用tweenmax,它是tweenlite的扩展,提供了更为强大的功能

转自:http://www.iamcoding.com/?p=217

posted @ 2019-11-06 15:59  史密斯崔  阅读(302)  评论(0编辑  收藏  举报