标签：纹理切换

Chap_16 纹理切换与帧频动画

一、概念

[wm_notice]

  • 纹理 ：图片元素中显示的内容
  • 纹理切换：更换图片中显示的内容，可以让元素中的内容产生变化

[/wm_notice]

二、元素与纹理

元素与纹理通常一起创建

//  图片元素				 纹理
var plane = new PIXI.Sprite.fromImage("img/plane1.png");

plane就是图片元素 而 "img/plane.png" 就是纹理

创建纹理

语法

var 变量名 =  new PIXI.Texture.fromImage("路径");

例

var texture = new PIXI.Texture.fromImage("img/plane1.png");

创建图片元素并添加纹理

语法

var 变量名 = new PIXI.Sprite(纹理变量)

例

var plane = new PIXI.Sprite(texture);

修改图片元素中的纹理

语法

元素名.texture = 新纹理;

例

//创建纹理1
var t1 = new PIXI.Texture.fromImage("img/plane1.png");
var t2 = new PIXI.Texture.fromImage("img/plane2.png");
//创建图片元素并添加纹理 t1
var plane = new PIXI.Sprite( t1 );
//将plane元素中的纹理更改为t2
plane.texture  = t2;

三、通过快速切换纹理实现帧频动画

[wm_notice]PIXI中提供了一些可以通过快速切换纹理实现帧频动画的方法[/wm_notice]

运行效果

如下图所示

第一步 ：准备一个存放所有纹理路径的数组

例

//用于保存所有纹理路径的数组
var ts = [];
//向数组中添加纹理路径
ts.push("img/planplay_1.png");
ts.push("img/planplay_2.png");
ts.push("img/planplay_3.png");
ts.push("img/planplay_4.png");
ts.push("img/planplay_5.png");
ts.push("img/planplay_6.png");
//略.....

第二步：创建纹理播放器

语法
var 变量名 = PIXI.extras.AnimatedSprite.fromImages( 纹理数组 );

例

var as = new PIXI.extras.AnimatedSprite.fromImages( ts );

第三步：调整属性并在应用中添加播放器

例

//创建纹理播放器
var as = new PIXI.extras.AnimatedSprite.fromImages( ts );
//设置播放器位置
as.x = 200;
as.y = 200;
//在应用中添加播放器
app.stage.addChild( as );

第四步：设置播放速度

播放速度0~1，数值越小速度越慢

语法

纹理播放器.animationSpeed = 播放速度;

例

//设置动画播放速度
as.animationSpeed = 0.15;

第五步：播放动画

语法

纹理播放器.play();

例

as.play();

完整代码

var app = new PIXI.Application(500,700);
document.body.appendChild( app.view );
			
//用于保存所有纹理路径的数组
var ts = [];
//向数组中添加纹理路径
ts.push("img/planplay_1.png");
ts.push("img/planplay_2.png");
ts.push("img/planplay_3.png");
ts.push("img/planplay_4.png");
ts.push("img/planplay_5.png");
ts.push("img/planplay_6.png");
ts.push("img/planplay_7.png");
ts.push("img/planplay_8.png");
ts.push("img/planplay_9.png");
ts.push("img/planplay_10.png");
ts.push("img/planplay_11.png");
			
//创建纹理播放器
var as = new PIXI.extras.AnimatedSprite.fromImages( ts );
//设置播放器位置
as.x = 200;
as.y = 200;
//在应用中添加播放器
app.stage.addChild( as );
//设置动画播放速度
as.animationSpeed = 0.15;
//播放动画
as.play();