Egret社区
在Bitmap一节中,我们简单介绍过Tween的使用方法,如果要实现一段缓动动画,Tween无疑是最好的选择。除了可以用简洁的语法,实现复杂的动画队列之外,其实Tween还有一个强大的地方,就是可以用各种Ease函数,控制缓动的细节。
Egret库中默认集成了一些Ease实现,要使用它们,只需在参数中传入即可,比如:
  1. var tw = egret.Tween.get(this.logo,{loop:true});
  2. tw.to({x:360,y:600},1000,egret.Ease.sineIn);
复制代码

为了便于您理解各种Ease函数的实现效果,这里有一个Ease效果实时预览:
tween_demo.png
除了可以使用内置的Ease,您也可以自定义Ease函数,在Tween中使用,比如:
  1. /**自定义的Ease*/
  2. private customEase (t:number):number {
  3.     return Math.random()*t;
  4. }
复制代码
这个函数的含义在于,传入时间系数t(0-1),返回一个经过计算的运动系数。如果你直接写return t,那意味着什么?没错,那就是一个匀速运动。 这里我们用随机数相乘一下,得到的结果就是,位置不停的闪动,当然这样写只是举例,可能没什么实际意义。 关于Ease的具体解释,可以参考这里.

上面那个例子的完整代码在这里:


  1. class Demo11 extends egret.DisplayObjectContainer {

  2.     /**测试用的位图*/
  3.     private logo:egret.Bitmap;
  4.     /**Ease组合*/
  5.     private easeArr:any[];
  6.     /**index*/
  7.     private easeIndex:number = 0;
  8.     /**label*/
  9.     private easeLabel:egret.TextField;

  10.     public constructor() {
  11.         super();
  12.         this.addEventListener(egret.Event.ADDED_TO_STAGE,this.startGame,this);
  13.     }

  14.     /**游戏启动后,会自动执行此方法*/
  15.     public startGame():void {
  16.         this.loadResource();
  17.     }
  18.     /**加载所需资源*/
  19.     private loadResource():void {
  20.         //使用资源管理器加载资源
  21.         RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.onResourceLoadComplete,this);
  22.         RES.loadConfig("resource/resource.json","resource/");
  23.         RES.loadGroup("demo2");
  24.     }
  25.     /**加载完毕后即可使用*/
  26.     private onResourceLoadComplete(event:RES.ResourceEvent):void {
  27.         this.logo = new egret.Bitmap();//创建位图
  28.         this.logo.texture = RES.getRes("egretIcon");//设置纹理
  29.         this.addChild(this.logo);//添加到显示列表
  30.         this.logo.scaleX = this.logo.scaleY = 0.4;
  31.         this.logo.x = this.logo.y = 100;
  32.         this.logo.anchorX = 0.5;
  33.         this.logo.anchorY = 0.5;
  34.         var btn:egret.Bitmap = new egret.Bitmap(RES.getRes("btn"));
  35.         btn.x = (480-btn.width)/2;
  36.         btn.y = 10;
  37.         btn.touchEnabled = true;
  38.         btn.addEventListener(egret.TouchEvent.TOUCH_TAP,this.startAnimation,this);
  39.         this.addChild(btn);
  40.         this.easeArr = [];
  41.         this.easeArr.push({name:"sineIn",ease:egret.Ease.sineIn});
  42.         this.easeArr.push({name:"sineOut",ease:egret.Ease.sineOut});
  43.         this.easeArr.push({name:"sineInOut",ease:egret.Ease.sineInOut});
  44.         this.easeArr.push({name:"Custom",ease:this.customEase});
  45.         this.easeArr.push({name:"backIn",ease:egret.Ease.backIn});
  46.         this.easeArr.push({name:"backOut",ease:egret.Ease.backOut});
  47.         this.easeArr.push({name:"backInOut",ease:egret.Ease.backInOut});
  48.         this.easeArr.push({name:"circIn",ease:egret.Ease.circIn});
  49.         this.easeArr.push({name:"circOut",ease:egret.Ease.circOut});
  50.         this.easeArr.push({name:"circInOut",ease:egret.Ease.circInOut});
  51.         this.easeArr.push({name:"bounceIn",ease:egret.Ease.bounceIn});
  52.         this.easeArr.push({name:"bounceOut",ease:egret.Ease.bounceOut});
  53.         this.easeArr.push({name:"bounceInOut",ease:egret.Ease.bounceInOut});
  54.         this.easeArr.push({name:"elasticIn",ease:egret.Ease.elasticIn});
  55.         this.easeArr.push({name:"elasticOut",ease:egret.Ease.elasticOut});
  56.         this.easeArr.push({name:"elasticInOut",ease:egret.Ease.elasticInOut});
  57.         this.easeArr.push({name:"quadIn",ease:egret.Ease.quadIn});
  58.         this.easeArr.push({name:"quadOut",ease:egret.Ease.quadOut});
  59.         this.easeArr.push({name:"quadInOut",ease:egret.Ease.quadInOut});
  60.         this.easeArr.push({name:"cubicIn",ease:egret.Ease.cubicIn});
  61.         this.easeArr.push({name:"cubicOut",ease:egret.Ease.cubicOut});
  62.         this.easeArr.push({name:"cubicInOut",ease:egret.Ease.cubicInOut});
  63.         this.easeArr.push({name:"quartIn",ease:egret.Ease.quartIn});
  64.         this.easeArr.push({name:"quartOut",ease:egret.Ease.quartOut});
  65.         this.easeArr.push({name:"quartInOut",ease:egret.Ease.quartInOut});
  66.         this.easeArr.push({name:"quintIn",ease:egret.Ease.quintIn});
  67.         this.easeArr.push({name:"quintOut",ease:egret.Ease.quintOut});
  68.         this.easeArr.push({name:"quintInOut",ease:egret.Ease.quintInOut});
  69.         this.easeLabel = new egret.TextField();
  70.         this.easeLabel.x = btn.x;
  71.         this.easeLabel.y = btn.y+40;
  72.         this.addChild(this.easeLabel);
  73.     }
  74.     /**自定义的Ease*/
  75.     private customEase (t:number):number {
  76.         return Math.random()*t;
  77.     }
  78.     /**动画*/
  79.     private startAnimation(evt:egret.TouchEvent):void {
  80.         this.logo.x = this.logo.y = 100;
  81.         this.logo.rotation = 0;
  82.         egret.Tween.removeTweens(this.logo);
  83.         var tw = egret.Tween.get(this.logo,{loop:true});
  84.         var easeObj = this.easeArr[this.easeIndex];
  85.         this.easeLabel.text = easeObj.name;
  86.         tw.to({x:360,y:600},1000,easeObj.ease).wait(1000).to({x:100,y:100},1000,easeObj.ease).wait(1000);
  87.         this.easeIndex++;
  88.         if(this.easeIndex>=this.easeArr.length)
  89.             this.easeIndex = 0;
  90.     }
  91. }
复制代码






分享到 :
10 人收藏

27 个回复

倒序浏览
光光当  登堂入室 | 2014-8-9 12:27:35
沙发了先~不过我更习惯用TweenLite
coyote  登堂入室 | 2014-8-10 20:19:28
顶一个,很不错,详细的各种缓动效果
shinji  初学乍练 | 2014-8-10 22:33:39
光光当 发表于 2014-8-9 12:27
沙发了先~不过我更习惯用TweenLite

真巧!同习惯!TweenLite加各种插件超给力的!
pyed  登堂入室 | 2014-8-17 21:22:19
API文档里找不到egret.Ease诶
原来ease是可以用的,多么痛的领悟
zhouhai  初学乍练 | 2014-8-29 15:50:38
shinji 发表于 2014-8-10 22:33
真巧!同习惯!TweenLite加各种插件超给力的!

大神,哪里有TweenLite的资料?
dxs111  初学乍练 | 2014-9-11 10:06:35
zhouhai 发表于 2014-8-29 15:50
大神,哪里有TweenLite的资料?

http://greensock.com/不知道对不对啊
dxs111  初学乍练 | 2014-9-11 10:07:09
这个不错
hquu  登堂入室 | 2014-10-18 17:05:14
这个不错的说
smallk2010  登堂入室 | 2014-11-3 17:07:54
egret.gui.Scroller() 怎么显示滚动条?
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部