Phaser中的动画

Phaser中的动画分为两种：Phaser.Tween补间动画（过渡）、Phaser.Animation逐帧动画

1.Phaser.Tween补间动画

创建：game.add.tween(object)

使用：

var tween = game.add.tween(object);

tween.to(properties,duration,ease,autoStart,delay,repeat,yoyo);//从当前状态过渡到to指定的状态

tween.from(properties,duration,ease,autoStart,delay,repeat,yoyo);//与to相反，从from指定的状态过渡到当前状态

Properties 属性集合

Duration 持续时间，毫秒

Ease 缓动函数，缓动函数有很多，具体参考文档http://g.vsene.cn/phaser/docs/src_tween_TweenManager.js.html#sunlight-1-line-20

autoStart true/false 表示立即开始，false表示不会自动开始，需要手动调用

delay 延迟多久后开始 毫秒

repeat动画重复次数

yoyo 是否让动画反向运动

tween.start() 开始

tween.stop() 停止

Tween.pause() 暂停

tween.resume() 恢复

 

2.Phaser.Animation逐帧动画

Phaser.Animation动画我们可以把它称之为逐帧动画，因为它的每一帧都需要单独指定，而不像补间动画那样只需指定开始和结束那两个关键帧。同时Animation逐帧动画是通过图片来实现的，我们可以给它的每一帧都指定一张图片，然后这些帧连续起来播放，就形成了一个动画。

我们可以通过精灵对象的animations属性来使用动画，而且这个精灵对象使用的贴图必须是spritesheet或者atlas加载过来的。因为只有这两种资源才包含多个帧。

使用方法：

先创建精灵对象

var sprite = game.add.sprite();

定义动画 sprite.animations.add(name,frames); frames是指这个动画由哪些帧组成

播放动画 sprite.animations.play(name,frameRate,loop,killOnComlete)frameRate每秒执行多少次，默认60。Loop 是否循环。killOnComlete

停止动画 sprite.animations.stop(name,)

 

有css3动画基础学这个很快，原理都差不多上手很快，所以笔记也不用多啰嗦了。

今天先到这里吧，学了挺多的，接下来坐等下班咯

 

赏