Egret帧动画和时间动画
2018-04-25
3,109 views
0 min read
帧动画
通过侦听egret.Event.ENTER_FRAME
事件来实现逐帧动画
官方给出的例子:
给BOSS侦听帧事件,每一帧时回调this.onEnterFrame
函数,可实现一些诸如移动的效果。
private onEnterFrame(event:egret.Event) {
var x = this.boss.x;
var y = this.boss.y;
if( y < this.stage.stageHeight - this.boss.height) {
this.boss.y += this.speed;
}
if(x < this.stage.stageWidth - this.boss.width && x > 0) {
this.boss.x += this.speed * this.diraction;
} else if(x <= 0) {
this.boss.x += this.speed;
this.diraction = 1;
} else {
this.boss.x -= this.speed;
this.diraction = -1;
}
}
时间动画
通过startTick
注册动画
egret.startTick(this.onTicker,this);
startTick 给它的回调函数传人一个参数:距离游戏开始已经过了多少时间,单位为毫秒。这样可以通过记录每次回调的时间间隔来计算显示对象的位移。(路程=速度*时间)
Tick计时器定时回调this.onTicker
函数,同样实现诸如移动的效果。
//将每次调用Tick的时间保存下来
private now:number = 0;
//加入Tick的回调函数
private onTicker(time:number) {
//初始化时间
if(!this.now)
this.now = time;
var then:number = time;
//计算时间间隔
var pass:number = then - this.now;
var x = this.boss.x;
var y = this.boss.y;
if( y < this.stage.stageHeight - this.boss.height) {
this.boss.y += this.speed * pass;
}
if(x < this.stage.stageWidth - this.boss.width && x > 0) {
this.boss.x += this.speed * this.diraction * pass;
} else if(x <= 0) {
this.boss.x += this.speed * pass;
this.diraction = 1;
} else {
this.boss.x -= this.speed * pass;
this.diraction = -1;
}
//刷新时间
this.now = then;
return false;
}
帧动画可能会因为机器性能的问题造成游戏整体速度下降,例如原定60帧的游戏,机器性能只能让其30帧,则飞机子弹等速度会变为原来的1/2。
时间动画则不会让游戏速度变慢,但机器性能不够时,会出现跳帧之类的情况
Previous Post
VUE自定义组件绑定事件和通信
Next Post
Egret中eui image控件用url加载网络图片
Or you can contact me by Email