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();

 

chap8_动画基础了解

一、帧频

概念

帧: 就是影像动画中最小单位的单幅影像画面,相当于电影胶片上的每一格镜头。 一帧就是一幅静止的画面,连续的帧就形成动画,如电视图象等。 帧频: 是指每秒钟放映或显示的帧或图像的数量

示例代码

var app = new PIXI.Application(500,500);
document.body.appendChild(app.view);
			
var bg = new PIXI.Sprite.fromImage("img/bg.jpg");
app.stage.addChild(bg);
			
var plane = new PIXI.Sprite.fromImage("img/plane1.png");
app.stage.addChild(plane);
plane.y = 300;
			
bg.interactive = true;
bg.on("click", move);
			
function move(){
	//元素向上移动
	plane.y -=3;
}

二、帧频函数

[wm_notice]帧频函数:被程序自动反复调用 ,每秒被调用60次[/wm_notice]

核心代码

//自定义帧频函数(自动被程序每秒调用60次)
function 帧频函数名(){    
  //每一帧要完成的工作   
}   
//给应用程序添加帧频函数
应用窗口(app).ticker.add(帧频函数名);

三、if语句

[wm_notice]作用:根据某个条件,选择执行部分代码[/wm_notice]

语法

if( 执行条件 ){
	//当满足执行条件时执行的代码
}

示例代码

var a = 30;
var b = 20;
//如果b大于a则在console窗口中输出b>a,否则不输出
if( b>a ){
	console.log("b>a");
}

[wm_tips]注意:如果if语句中只有一行代码可以省略{ }[/wm_tips]