phaser学习总结之Tween详解
前言
在上一章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详解的更多相关文章
- [深入学习Web安全](5)详解MySQL注射
[深入学习Web安全](5)详解MySQL注射 0x00 目录 0x00 目录 0x01 MySQL注射的简单介绍 0x02 对于information_schema库的研究 0x03 注射第一步—— ...
- Shell学习之Bash变量详解(二)
Shell学习之Bash变量详解 目录 Bash变量 Bash变量注意点 用户自定义变量 环境变量 位置参数变量 预定义变量 Bash变量 用户自定义变量:在Bash中由用户定义的变量. 环境变量:这 ...
- Asp.Net MVC学习总结之过滤器详解(转载)
来源:http://www.php.cn/csharp-article-359736.html 一.过滤器简介 1.1.理解什么是过滤器 1.过滤器(Filters)就是向请求处理管道中注入额外的 ...
- Linux学习之用户配置文件详解(十四)
Linux学习之用户配置文件详解 目录 用户信息文件/etc/password 影子文件/etc/shadow 组信息文件/etc/group 组密码文件/etc/gshadow 用户信息文件/etc ...
- [转载]springmvc学习之@ModelAttribute运用详解
spring学习之@ModelAttribute运用详解 链接
- expect学习笔记及实例详解【转】
1. expect是基于tcl演变而来的,所以很多语法和tcl类似,基本的语法如下所示:1.1 首行加上/usr/bin/expect1.2 spawn: 后面加上需要执行的shell命令,比如说sp ...
- Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)
[Android布局学习系列] 1.Android 布局学习之——Layout(布局)详解一 2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数) 3.And ...
- Activiti工作流学习之流程图应用详解
Activiti工作流学习之流程图应用详解 1.目的 了解Activiti工作流是怎样应用流程图的. 2.环境准备2.1.相关软件及版本 jdk版本:Jdk1.7及以上 IDE:eclipse ...
- [转帖]Docker学习之Dockerfile命令详解
Docker学习之Dockerfile命令详解 https://it.baiked.com/system/docker/2436.html 图挺好的 前言 之前,制作镜像的伪姿势搭建已经见过了,今天介 ...
随机推荐
- 上海学生事务中心&新华路派出所的位置
上海学生事务中心: 地址:冠生园路401号 工作时间:9:00-17:00 电话:021-64829191 新华路派出所: 地址:新华路590弄21号 工作时间:周一至周六 9:00 ...
- Badboy参数化 - Add Variable(循环使用不同的关键字进行搜索)
参考: http://leafwf.blog.51cto.com/872759/1113716 http://www.51testing.com/html/00/130600-1367743.html ...
- 1026-windy数+数位DP+记忆化搜索
1026: [SCOI2009]windy数 题意:数位DP模板题: 目前只理解了记忆化搜索,就想练练手, ------给递推写法留一个位子 ------ 注意这道题要判断前导0的情况,1 )可以加一 ...
- Kubernetes集群部署核心步骤
目录 前言 一.所有节点安装docker 二.所有节点安装kubeadm 三.安装master节点 四.部署网络插件 五.安装node节点 六.运行一个demo 前言 这里使用环境:Ubuntu 18 ...
- 洛谷 P1980【计数问题】 题解(1)
鉴于数据最高只有七位数,通过判断数位,逐位判断即可完成本题. (运行很快,打得手疼) //Stand up for the faith!#include<bits/stdc++.h> us ...
- CVE-2018-14418 擦出新火花
笔者<Qftm>原文发布:https://xz.aliyun.com/t/6223 0x00 前言 最近,一次授权的渗透测试项目意外的撞出了(CVE-2018-14418)新的火花,在这里 ...
- android Action中的data属性
(2) 根据Action和Data匹配 <activity android:name=".MyActivityTwo" android:label="@string ...
- Appium+python自动化(三十七)- 士兵突击许三多 - 多个appium服务启动,多个设备启动,多进程并发启动设备-并发测试 - 下(超详解)
简介 接着上一篇继续看一下如何并发测试以及并发测试的过程中,可能遇到的问题,在这里宏哥把宏哥遇到的和小伙伴或者童鞋们,一起分享一下. Appium端口检测 问题思考 经过前面学习,我们已经能够使用py ...
- 美团集群调度系统HULK技术演进
本文根据美团基础架构部/弹性策略团队负责人涂扬在2019 QCon(全球软件开发大会)上的演讲内容整理而成.本文涉及Kubernetes集群管理技术,美团相关的技术实践可参考此前发布的<美团点评 ...
- 拆解大数据总线平台DBus的系统架构
Dbus所支持两类数据源的实现原理与架构拆解. 大体来说,Dbus支持两类数据源: RDBMS数据源 日志类数据源 一.RMDBMS类数据源的实现 以mysql为例子. 分为三个部分: 日志抽取模块 ...