phaser学习总结之Tween详解

2019年11月05日 阅读数:17
这篇文章主要向大家介绍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.xSound.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>

参考资料:https://photonstorm.github.io/phaser-ce/Phaser.Tween.html#to

Tween使用示例:https://www.phaser-china.com/example-28.html