前言

在上一章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

phaser学习总结之Tween详解的更多相关文章

  1. [深入学习Web安全](5)详解MySQL注射

    [深入学习Web安全](5)详解MySQL注射 0x00 目录 0x00 目录 0x01 MySQL注射的简单介绍 0x02 对于information_schema库的研究 0x03 注射第一步—— ...

  2. Shell学习之Bash变量详解(二)

    Shell学习之Bash变量详解 目录 Bash变量 Bash变量注意点 用户自定义变量 环境变量 位置参数变量 预定义变量 Bash变量 用户自定义变量:在Bash中由用户定义的变量. 环境变量:这 ...

  3. Asp.Net MVC学习总结之过滤器详解（转载）

    来源:http://www.php.cn/csharp-article-359736.html   一.过滤器简介 1.1.理解什么是过滤器 1.过滤器(Filters)就是向请求处理管道中注入额外的 ...

  4. Linux学习之用户配置文件详解(十四)

    Linux学习之用户配置文件详解 目录 用户信息文件/etc/password 影子文件/etc/shadow 组信息文件/etc/group 组密码文件/etc/gshadow 用户信息文件/etc ...

  5. [转载]springmvc学习之@ModelAttribute运用详解

    spring学习之@ModelAttribute运用详解 链接

  6. expect学习笔记及实例详解【转】

    1. expect是基于tcl演变而来的,所以很多语法和tcl类似,基本的语法如下所示:1.1 首行加上/usr/bin/expect1.2 spawn: 后面加上需要执行的shell命令,比如说sp ...

  7. Android 布局学习之——Layout(布局)详解二（常见布局和布局参数）

    [Android布局学习系列]   1.Android 布局学习之——Layout(布局)详解一   2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)   3.And ...

  8. Activiti工作流学习之流程图应用详解

    Activiti工作流学习之流程图应用详解 1.目的  了解Activiti工作流是怎样应用流程图的. 2.环境准备2.1.相关软件及版本    jdk版本:Jdk1.7及以上 IDE:eclipse ...

  9. [转帖]Docker学习之Dockerfile命令详解

    Docker学习之Dockerfile命令详解 https://it.baiked.com/system/docker/2436.html 图挺好的 前言 之前,制作镜像的伪姿势搭建已经见过了,今天介 ...

随机推荐

  1. A-The power of Fibonacci_2019牛客暑期多校训练营（第九场）

    题意 求\(\sum_0^n{Fb}_i^m \mod (1e9)\) 题解 模1e9时的斐波那契数列循环节太大,考虑把模数质因数分解成\(2^9\cdot5^9\),此时循环节变成768和78125 ...

  2. hdu 1078 FatMouse and Cheese（简单记忆化搜索）

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1078 题意:给出n*n的格子,每个各自里面有些食物,问一只老鼠每次走最多k步所能吃到的最多的食物 一道 ...

  3. asp.net core系列 72 Exceptionless使用介绍

    一.Exceptionless介绍 Exceptionless专注于.net平台提供实时错误和日志报告.主要包括:错误通知.智能分组异常.详细错误报告堆栈跟踪.支持离线.UI查看重要错误和确定优先级. ...

  4. 8.8&8.9 dp训练小结

    写了两天的dp题,表示大多dp都不会啊,还是爆搜大法好.我真的太蒻了dp还是要多做题啊,一些基本的套路还是不熟,真正写对的dp也就一道,还一道爆搜过的,dp还有很深的坑要填啊.. 8.8 T1 质数和 ...

  5. JPA案例

    ORM 什么是ORM: 对象关系映射(Object Relational Mapping,简称ORM)是建立实体类和数据库表之间的关系,从而达到操作实体类就相当于操作数据库表的目的. ORM思想 主要 ...

  6. 使用FlameGraph火焰图分析JAVA应用性能

    开源项目推荐 Pepper Metrics是我与同事开发的一个开源工具(https://github.com/zrbcool/pepper-metrics),其通过收集jedis/mybatis/ht ...

  7. 深度剖析Vue中父给子、子给父、兄弟之间传值！

    本片文章将为您详细讲解在Vue中,父给子传值.子给父传值以及兄弟之间传值方式! 父传子:父组件 // template里面 <aa :info="name"/> // ...

  8. .Ajax(async异步与sync同步)

    异步,不会阻碍代码的执行,它会等待所有的同步代码执行完毕后,再执行输出自己的同步结果.(原生js中,只有定时器,DOM,ajax三个东西是异步的.) 同步,代码只会从上到下依次执行,只要一步出错,接下 ...

  9. 在线扩容LV卷

    1.登陆VC,添加硬盘 2.登陆到Linux主机 3.在线扫盘 [root@cnsz22pl0074:/root]# echo "- - -" > /sys/class/sc ...

  10. .Net基础篇_学习笔记_第七天_三元数表达式（if-else的转换写法）

    三元表达式语法: 表达式1?表达式2:表达式3; 表达式1一般为一个关系表达式.如果表达式1的值为true,那么表达式2的值就是整个三元表达式的值.如果表达式1的值为false,那么表达式3的值就是整 ...