phaser學習總結之Tween詳解

時間 2019-11-05

標籤 phaser 學習總結 tween 詳解简体版

原文原文鏈接

前言

在上一章phaser學習總結之phaser入門教程中，咱們已經初步入門了phaser，並經過一個案例瞭解了phaser,如今咱們須要對phaser中的對象進行講解，本章須要講解的是tween,即phaser中的補間動畫，一塊兒來學習一下吧！javascript

參數詳解

(1):from和to方法

語法：

from(properties [, duration] [, ease] [, autoStart] [, delay] [, repeat] [, yoyo])

To(properties [, duration] [, ease] [, autoStart] [, delay] [, repeat] [, yoyo])

參數：

properties:

類型：objecthtml

默認值：無java

描述：包含要補間的屬性的對象，例如Sprite.x或Sound.volume。做爲JavaScript對象提供。git

duration：

類型：numbergithub

默認值：1000函數

描述：此補間的持續時間（以毫秒爲單位）。或者，若是Tween.frameBased爲true，則表示應該通過的幀數oop

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>