Skip to content

Commit 4707929

Browse files
author
Guoshaorui
committed
tween
1 parent 5754168 commit 4707929

File tree

2 files changed

+111
-0
lines changed

2 files changed

+111
-0
lines changed

‎egret/10-tween.md

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,122 @@ tw.to({x:360,y:600},1000,egret.Ease.sineIn);
1212

1313
为了便于您理解各种Ease函数的实现效果，这里有一个Ease效果实时预览：
1414

15+
![github](https://raw.githubusercontent.com/NeoGuo/html5-documents/master/egret/images/tween_demo.png "Tween")
16+
1517
<iframe src="http://www.tech-mx.com/egret/tween/launcher/" width="480px" height="800px"></iframe>
1618

1719
* [点击这里查看Ease效果实时预览](http://www.tech-mx.com/egret/tween/launcher/)
1820

21+
除了可以使用内置的Ease，您也可以自定义Ease函数，在Tween中使用，比如：
22+
23+
```
24+
/**自定义的Ease*/
25+
private customEase (t:number):number {
26+
return Math.random()*t;
27+
}
28+
```
29+
> 这个函数的含义在于，传入时间系数t(0-1)，返回一个经过计算的运动系数。如果你直接写return t，那意味着什么？没错，那就是一个匀速运动。
30+
> 这里我们用随机数相乘一下，得到的结果就是，位置不停的闪动，当然这样写只是举例，可能没什么实际意义。
31+
> 关于Ease的具体解释，可以参考[这里](http://zengrong.net/post/1151.htm).
32+
33+
上面那个例子的完整代码在这里：
1934

35+
```
36+
class Demo11 extends egret.DisplayObjectContainer {
37+
38+
/**测试用的位图*/
39+
private logo:egret.Bitmap;
40+
/**Ease组合*/
41+
private easeArr:any[];
42+
/**index*/
43+
private easeIndex:number = 0;
44+
/**label*/
45+
private easeLabel:egret.TextField;
46+
47+
public constructor() {
48+
super();
49+
this.addEventListener(egret.Event.ADDED_TO_STAGE,this.startGame,this);
50+
}
51+
52+
/**游戏启动后，会自动执行此方法*/
53+
public startGame():void {
54+
this.loadResource();
55+
}
56+
/**加载所需资源*/
57+
private loadResource():void {
58+
//使用资源管理器加载资源
59+
RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.onResourceLoadComplete,this);
60+
RES.loadConfig("resource/resource.json","resource/");
61+
RES.loadGroup("demo2");
62+
}
63+
/**加载完毕后即可使用*/
64+
private onResourceLoadComplete(event:RES.ResourceEvent):void {
65+
this.logo = new egret.Bitmap();//创建位图
66+
this.logo.texture = RES.getRes("egretIcon");//设置纹理
67+
this.addChild(this.logo);//添加到显示列表
68+
this.logo.scaleX = this.logo.scaleY = 0.4;
69+
this.logo.x = this.logo.y = 100;
70+
this.logo.anchorX = 0.5;
71+
this.logo.anchorY = 0.5;
72+
var btn:egret.Bitmap = new egret.Bitmap(RES.getRes("btn"));
73+
btn.x = (480-btn.width)/2;
74+
btn.y = 10;
75+
btn.touchEnabled = true;
76+
btn.addEventListener(egret.TouchEvent.TOUCH_TAP,this.startAnimation,this);
77+
this.addChild(btn);
78+
this.easeArr = [];
79+
this.easeArr.push({name:"sineIn",ease:egret.Ease.sineIn});
80+
this.easeArr.push({name:"sineOut",ease:egret.Ease.sineOut});
81+
this.easeArr.push({name:"sineInOut",ease:egret.Ease.sineInOut});
82+
this.easeArr.push({name:"Custom",ease:this.customEase});
83+
this.easeArr.push({name:"backIn",ease:egret.Ease.backIn});
84+
this.easeArr.push({name:"backOut",ease:egret.Ease.backOut});
85+
this.easeArr.push({name:"backInOut",ease:egret.Ease.backInOut});
86+
this.easeArr.push({name:"circIn",ease:egret.Ease.circIn});
87+
this.easeArr.push({name:"circOut",ease:egret.Ease.circOut});
88+
this.easeArr.push({name:"circInOut",ease:egret.Ease.circInOut});
89+
this.easeArr.push({name:"bounceIn",ease:egret.Ease.bounceIn});
90+
this.easeArr.push({name:"bounceOut",ease:egret.Ease.bounceOut});
91+
this.easeArr.push({name:"bounceInOut",ease:egret.Ease.bounceInOut});
92+
this.easeArr.push({name:"elasticIn",ease:egret.Ease.elasticIn});
93+
this.easeArr.push({name:"elasticOut",ease:egret.Ease.elasticOut});
94+
this.easeArr.push({name:"elasticInOut",ease:egret.Ease.elasticInOut});
95+
this.easeArr.push({name:"quadIn",ease:egret.Ease.quadIn});
96+
this.easeArr.push({name:"quadOut",ease:egret.Ease.quadOut});
97+
this.easeArr.push({name:"quadInOut",ease:egret.Ease.quadInOut});
98+
this.easeArr.push({name:"cubicIn",ease:egret.Ease.cubicIn});
99+
this.easeArr.push({name:"cubicOut",ease:egret.Ease.cubicOut});
100+
this.easeArr.push({name:"cubicInOut",ease:egret.Ease.cubicInOut});
101+
this.easeArr.push({name:"quartIn",ease:egret.Ease.quartIn});
102+
this.easeArr.push({name:"quartOut",ease:egret.Ease.quartOut});
103+
this.easeArr.push({name:"quartInOut",ease:egret.Ease.quartInOut});
104+
this.easeArr.push({name:"quintIn",ease:egret.Ease.quintIn});
105+
this.easeArr.push({name:"quintOut",ease:egret.Ease.quintOut});
106+
this.easeArr.push({name:"quintInOut",ease:egret.Ease.quintInOut});
107+
this.easeLabel = new egret.TextField();
108+
this.easeLabel.x = btn.x;
109+
this.easeLabel.y = btn.y+40;
110+
this.addChild(this.easeLabel);
111+
}
112+
/**自定义的Ease*/
113+
private customEase (t:number):number {
114+
return Math.random()*t;
115+
}
116+
/**动画*/
117+
private startAnimation(evt:egret.TouchEvent):void {
118+
this.logo.x = this.logo.y = 100;
119+
this.logo.rotation = 0;
120+
egret.Tween.removeTweens(this.logo);
121+
var tw = egret.Tween.get(this.logo,{loop:true});
122+
var easeObj = this.easeArr[this.easeIndex];
123+
this.easeLabel.text = easeObj.name;
124+
tw.to({x:360,y:600},1000,easeObj.ease).wait(1000).to({x:100,y:100},1000,easeObj.ease).wait(1000);
125+
this.easeIndex++;
126+
if(this.easeIndex>=this.easeArr.length)
127+
this.easeIndex = 0;
128+
}
129+
}
130+
```
20131

21132
- - -
22133

‎egret/images/tween_demo.png

11.6 KB
Loading

0 commit comments

Comments
 (0)