前言

在上一章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. 手把手教你用深度学习做物体检测(六)：YOLOv2介绍

    本文接着上一篇<手把手教你用深度学习做物体检测(五):YOLOv1介绍>文章,介绍YOLOv2在v1上的改进.有些性能度量指标术语看不懂没关系,后续会有通俗易懂的关于性能度量指标的介绍文章 ...

  2. CodeForces 780 E Underground Lab

    Underground Lab 题解: 如果遍历一棵树,我们可以发现最多需要走的步数也不会超过2 * n步. 所以我们选出一棵树,然后遍历一边这颗树. 然后把序列分成k块就好了. 代码: #inclu ...

  3. “玲珑杯”ACM比赛 Round #18 C -- 图论你先敲完模板（和题目一点关系都没有，dp）

    题目链接:http://www.ifrog.cc/acm/problem/1146?contest=1020&no=2 题解:显然知道这是一道dp而且 dp[i]=min(dp[j]+2^(x ...

  4. hdu 6435 CSGO

    题意:现在有n个主武器, m个副武器, 你要选择1个主武器,1个副武器, 使得 题目给定的那个式子最大. 题解:这个题目困难的地方就在于有绝对值,| a - b | 我们将绝对值去掉之后 他的值就为 ...

  5. 解决hql无法使用mysql方法的问题——以date_add()为例

    一.前言 最近在做一个定时任务,具体为定时清理掉mysql中存储的,一个月前的数据.而在hql语句中,就需要调用mysql的date_add()方法. 但是在hibernate中,是不允许使用各个SQ ...

  6. win、mac 设置 php上传文件大小限制

    修改php.ini win平台WAMP修改 步骤 左键点击wamp 选择php 在弹出的窗口中选择php.ini 在打开的文件中进行修改(修改步骤如下) 修改完毕,保存并重启wamp mac  MAM ...

  7. Vert.x Web之Router

    Vert.x Web 是一系列用于基于 Vert.x 构建 Web 应用的构建模块. Vert.x Web 的大多数特性被实现为了处理器(Handler),因此您随时可以实现您自己的处理器.我们预计随 ...

  8. Vue 前端uni-app多环境配置部署服务器的问题

    目录 前端Vue 针对问题 package.json描述 多环境部署 查看源码获取解决方案 转载请标明出处: http://dujinyang.blog.csdn.net/ 本文出自:[奥特曼超人的博 ...

  9. 5.cookie每个参数的意义和作用以及工作原理？

    cookie主要参数有: (1)expires 过期时间 (2)path cookie存放路径 (3)domain 域名 同域名下可访问 (4)Set-Cookie: name cookie名称

  10. android Drawable Resource学习

    转载自: http://blog.csdn.net/true100/article/details/52316423 http://blog.csdn.net/true100/article/deta ...