phaser學習總結之Tween詳解
阿新 • • 發佈：2019-10-09
前言
在上一章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
&n