深入学习Phaser补间动画

Tweens是什么?

Tweens通常被称为补间动画。补间动画是指在确定好两个关键帧之后,由计算机自动生成这两帧之间插补帧,从而实现动画的过程。例如,物体从当前位置在两秒内向右移动200个像素,只要设置好目标位置(当前位置的右边200像素)和时长(两秒),则计算机会自动生成补间动画,在两秒内使物体从当前位置移到目标位置。

创建一个Tween补间的目标对象

最常见的创建一个补间动画的语句如下所示:

vartween=this.game.add.tween(this.sprite).to({x:400},5000,Phaser.Easing.Linear.None,false,0,-1,true);tween.start();

第一句:调用Phaser.Game中的补间管理类创建一个补间动画tween。this.sprite表示针对这个精灵创建动画,这里也可以是一个组。to()函数是最关键的函数,记录着精灵的属性变化、时长及其他相关属性,关于这个函数,我们将在下文最详细的介绍。

第二句:启动动画。

Tween.toto(properties,duration,ease,autoStart,delay,repeat,yoyo)

设置目标值。补间将从当前属性值变为to函数设置的值(参数properties)

其参数如下:

properties包含补间属性的对象,例如`Sprite.x`,`Sound.volume`。这个参数表示目标关键帧中精灵的属性;

duration=1000补间持续时长,单位毫秒;

ease=null缓动函数。可以用数学公式控制动画,这样就可以实现加速以及减速效果,或者向动画添加特殊效果,比如弹跳效果;将在下文重点介绍。

autoStart=false补间是否自动开始;

delay=0启动延时,单位毫秒;

repeat=0重复次数。-1表示不停地重复。只对本补间有效,对串联的补间无效;

yoyo=false是否自动反过来回放。如果设置为true,,则不会触发onComplete,所以应监听onLoop;

在下面这几句示例代码中,分别设置了平移、旋转、透明度变化的补间动画:

//平移this.add.tween(boss).to({x:20,y:20},2000,Phaser.Easing.Linear.None)//旋转seaLifeTween.to({angle:-gameTitleSeaLife.angle},5000,Phaser.Easing.Linear.None,true,0,1000,true);//透明度fadeTween.to({alpha:0},2000,Phaser.Easing.Cubic.Out,true);

Tween.fromfrom(properties,duration,ease,autoStart,delay,repeat,yoyo)

设置起始值。补间将从from函数设置的属性值变为当前值

参数及其含义与to函数相同

Tween常用方法重复

repeat(total, index=0)

设置tween重复次数。total:重复次数,0表示不重复,-1表示一直重复。index:子tween编号。本函数可以对某个子tween单独设置重复次数,-1表示对所有的子tween进行设置

repeatAll(total)

设置当前tween和所有子tween的重复次数。tween A和三个子tween B,C,C,重复次数为2,则运行结果为:ABCDABCD,然后再调用onLoop。total:重复次数,0表示不重复,-1表示一直重复。

loop(value=true)

设置tween及其子tween是否循环。如果没有子tween,则此函数无效;如果传入true,则相当于Tween.repeatAll(-1),如果传入false,则相当于Tween.repeatAll(0)。

下面这段代码使精灵先右移400像素,再下移250像素,再左移400像素,再上移250像素,然后不断重复上面四步。实际上这个精灵就是不断的在画一个矩形。

this.game.add.tween(this.sprite).to({x:400},2000).to({y:250},2000).to({x:0},2000).to({y:0},2000).loop().start();启停

pause();

暂停补间

resume();

继续补间

start(index=0)

启动补间,并调用onStart。index:指定某个子tween启动

stop(complete=false)

当你能飞的时候就不要放弃飞

深入学习Phaser补间动画

相关文章:

你感兴趣的文章:

标签云: