前言
在上一章phaser学习总结之phaser入门教程中，我们已经初步入门了phaser，并通过一个案例了解了phaser,现在我们需要对phaser中的对象进行讲解，本章需要讲解的是tween,即phaser中的补间动画，一起来学习一下吧！
参数详解
(1):from和to方法
语法：
from(properties [, duration] [, ease] [, autoStart] [, delay] [, repeat] [, yoyo])
To(properties [, duration] [, ease] [, autoStart] [, delay] [, repeat] [, yoyo])
参数：
properties:
类型：object
默认值：无
描述：包含要补间的属性的对象，例如Sprite.x或Sound.volume。作为JavaScript对象提供。
duration：
类型：number
默认值：1000
描述：此补间的持续时间（以毫秒为单位）。或者，如果Tween.frameBased为true，则表示应该经过的帧数
ease：
类型：function|string
默认值：null
描述：缓动功能。如果未设置，则默认为Phaser.Easing.Default，默认为Phaser.Easing.Linear.None，但可以覆盖
autoStart：
类型：boolean
默认值：false
秒速：是否自动播放，设置为true允许该补间自动开始。否则，调用Tween.start（）
delay:
类型：number
默认值：0
描述：此补间开始之前的延迟（以毫秒为单位），默认为0，无延迟
repeat:
类型：number
默认值：0
描述：补间完成后是否应该自动重新启动？如果要使其永久运行，请设置为-1。这只会影响此单个补间，而不会影响任何链接的补间。
yoyo:
类型：boolean
默认值：false
描述：yoyos的补间将自动反转并自动向后播放。悠悠球不会触发Tween.onComplete事件，因此请监听Tween.onLoop
(2)yoyo方法
语法：yoyo(enable [, yoyoDelay] [, index])
参数：
enable:
类型：boolean
默认值：没有
描述：设置为true表示此补间，或设置为false禁用已激活的yoyo
yoyoDelay：
类型：number
默认值：0
描述：这是悠悠球开始之前要暂停的时间（以毫秒为单位)。
index：
类型：number
默认值：0
描述：如果此补间有多个子代，则可以定位到特定子代。如果设置为-1，它将对所有孩子设置yoyo
示例讲解
(1):Tween中from和to的使用
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tween中from和to方法的使用title>
head>
<body>
<script src="../js/phaser.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
var config={
width:400,
height:400,
renderer:Phaser.AUTO,
antialias:true,
multiTexture:true,
state:{
preload:preload,
create:create,
update:update,
}
}
var game=new Phaser.Game(config);
function preload(){
game.load.image('pic','../img/phaser1.png');//加载图片
}
var sprite;
function create(){
game.stage.backgroundColor='#2384e7'; //设置背景颜色
sprite=game.add.sprite(game.world.centerX,game.world.centerY,'pic');
sprite.anchor.x=0.5;
sprite.anchor.y=0.5;
//使用tween.from,它会从上面运行到中间
game.add.tween(sprite).from({y:-100},1000,Phaser.Easing.Bounce.Out,true);
//使用tween.to
//game.add.tween(sprite).to({y:-1},2000,Phaser.Easing.Bounce.Out,true);
}
function update(){
}
script>
body>
html>
Tween.from是指定动画开始的状态，Tween.to指定动画结束的状态
(2):Tween中yoyo方法的使用
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tween中yoyo方法的使用title>
head>
<body>
<script src="../js/phaser.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
var config={
width:400,
height:400,
renderer:Phaser.AUTO,
antialias:true,
multiTexture:true,
state:{
preload:preload,
create:create,
update:update,
}
}
var game=new Phaser.Game(config);
function preload(){
game.load.image('space','../img/starfield.png',138,15);//加载图片
game.load.image('logo','../img/phaser1.png');//加载图片
}
function create(){
game.add.tileSprite(0,0,800,600,'space');//tile是瓦片的意思
var sprite=game.add.sprite(game.world.centerX,game.world.centerY,'logo');//将图片设置在中心
sprite.anchor.x=0.5;
sprite.anchor.y=0.5;
sprite.alpha=0.5;//设置透明度
var tween=game.add.tween(sprite).to({alpha:1},2000,'Linear',true,0,-1);
tween.yoyo(true,3000);//3s启动yoyo动画
}
function update(){
}
script>
body>
html>
(3):Tween中delay方法的使用
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tween中delay方法的使用title>
head>
<body>
<script src="../js/phaser.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
var config={
width:400,
height:400,
renderer:Phaser.AUTO,
antialias:true,
multiTexture:true,
state:{
preload:preload,
create:create,
update:update,
}
}
var game=new Phaser.Game(config);
function preload(){
game.load.image('pic','../img/town.png');//加载图片
}
var text;//显示文字
function create(){
var pic=game.add.image(game.world.centerX,game.world.centerY,'pic');
pic.anchor.x=0.5;
pic.anchor.y=0.5;
pic.alpha=0.1;//设置透明度
var style={font:'20px Arial',fill:'#ff0044',align:'center'};//设置字体，字体颜色，对齐方式
text=game.add.text(100,0,'2秒后显示',style);
var tween=game.add.tween(pic).to({alpha:1},2000,'Linear',true,2000);
//开始的回调方法
tween.onStart.add(started,this);
//结束的回调方法
tween.onComplete.add(completed,this);
}
function started(){
text.text='tween start';//设置文本
}
function completed(){
text.text='tween complete';//设置文本
}
function update(){
}
script>
body>
html>
(4):Tween中loop方法的使用
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tween中loop方法的使用title>
head>
<body>
<script src="../js/phaser.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
var config={
width:400,
height:400,
renderer:Phaser.AUTO,
antialias:true,
multiTexture:true,
state:{
preload:preload,
create:create,
update:update,
}
}
var game=new Phaser.Game(config);
function preload(){
game.load.spritesheet('ball','../img/balls.png',17,17);//加载图片
}
var ball;
var tween;
var bounces=10;
function create(){
ball=game.add.sprite(100,0,'ball',0);
//2.5延迟
tween=game.add.tween(ball).to({y:game.world.height-ball.height},1500,Phaser.Easing.Bounce.Out,true,2500,10);
//2.5秒后的开始回调函数
tween.onStart.add(onStart,this);
//2.5秒后的重复回调函数
tween.onLoop.add(onLoop,this);
//2.5秒的结束回调函数
tween.onComplete.add(onComplete,this);
}
function onStart(){
tween.delay(0);//将延迟设置为0
}
function onLoop(){
bounces--;
if(ball.frame===5){ //球的序列帧数
ball.frame=0;
}else{
ball.frame++;
}
}
function onComplete(){
game.add.tween(ball).to({x:800-ball.width},2000,Phaser.Easing.Bounce.Out,true);
}
function update(){
}
script>
body>
html>
(5):Tween中repeat方法的使用
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tween中repeat方法的使用title>
head>
<body>
<script src="../js/phaser.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
var config={
width:400,
height:400,
renderer:Phaser.AUTO,
antialias:true,
multiTexture:true,
state:{
preload:preload,
create:create,
update:update,
}
}
var game=new Phaser.Game(config);
function preload(){
game.load.image('bg','../img/starfield.png',138,15);//加载图片
game.load.image('logo','../img/phaser1.png');//加载图片
}
function create(){
game.add.tileSprite(0,0,400,400,'bg');
var sprite=game.add.sprite(game.world.centerX,game.world.centerY,'logo');
sprite.anchor.x=0.5;
sprite.anchor.y=0.5;
sprite.alpha=0;//设置透明度
var tween=game.add.tween(sprite).to({alpha:1},2000,'Linear',true);
tween.repeat(10,1000);//重复10次，每次重复延迟1s
}
function update(){
}
script>
body>
html>
参考资料：https://photonstorm.github.io/phaser-ce/Phaser.Tween.html#to
Tween使用示例：https://www.phaser-china.com/example-28.html