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动画基础学这个很快,原理都差不多上手很快,所以笔记也不用多啰嗦了。
今天先到这里吧,学了挺多的,接下来坐等下班咯