chap13_帧频控制与动画效果

一、定时（计时）动画

[wm_notice]概念：让元素按照一定的时间间隔变化[/wm_notice]

实现方式

• 已知帧频函数每秒执行60次，可以自定义计数变量，当帧频函数执行时计数变量+1
• 当计数变量的值为60时，证明帧频函数被调用了60次，也就是过了1秒

示例代码

//略......
//自定义计数变量
var count =  1;
			
//自定义帧频函数（每秒调用60次）
function animate(){
	//在console窗口中输出count变量
	console.log( count );
				
	//帧频函数执行一次，计数变量+1
	count++;
}
//在应用中添加帧频函数
app.ticker.add(animate);

[wm_tips]如果count变量的值为60，证明帧频函数执行了60次 ，时间过了1秒 当count变量的值为60时，执行一次动画效果并将count变量的值重置为0，重新计数[/wm_tips]

示例代码

var app = new PIXI.Application(500,700);
document.body.appendChild( app.view );
			
//添加图片（敌机图片）
var enemy1 = new PIXI.Sprite.fromImage("img/enemy1.png");
app.stage.addChild( enemy1 );
			
//自定义计数变量
var count =  1;
			
//自定义帧频函数（每秒调用60次）
function animate(){
				
	//如果count变量为60证明animate函数执行了60次，也就是过了1秒
	if(count == 60){
		//敌机向下移动30px
		enemy1.y += 30;
		//重置count变量，重新计时
		count = 0;
	}
				
	//帧频函数执行一次，计数变量+1
	count++;
}

//在应用中添加帧频函数
app.ticker.add(animate);

二、定时创建元素与动画效果

[wm_notice]在某个时间周期内创建多个元素并添加动画，让多个元素按照固定的频率变化[/wm_notice]

示例：每秒创建一架敌机

var app = new PIXI.Application(500,700);
document.body.appendChild( app.view );
			
//创建图片元素 （背景图片）
var bg = new PIXI.Sprite.fromImage("img/bg2.jpg");
app.stage.addChild( bg );
			
//定义变量，计时器
var count = 1;
			
//自定义帧频函数【核心代码，在帧频函数中添加元素】
function animate(){
	//时间过1秒，count等于60
	if(count == 60){
		//添加图片元素（敌机图片）
		var enemy1 =  new  PIXI.Sprite.fromImage("img/enemy1.png");
		//Math.random() * n 获取0~n-1之间的随机数
		enemy1.y = Math.random() *(700 - 74 +1);
		enemy1.x = Math.random() *(500 - 104 +1);
		app.stage.addChild( enemy1 );	
		//重置count变量，重新计时
		count=0;
	}
	//帧频函数执行一次，计数变量+1
	count++;
}
			
//添加帧频函数
app.ticker.add( animate );

示例：让飞机向下移动

1、animate函数会反复执行，与循环的效果一致，在animate函数中创建的元素会不断的被覆盖
使用数组，将animate函数创建的每架飞机存储起来避免被覆盖
2、遍历数组获取每架飞机，执行动画

如果飞机移出边界，那么该元素就没有存在的价值了，可以 从数组中移除该元素

//遍历数组获取每架敌机元素，添加动画效果
for(var i=0;  i<enemyList.length;  i++){
	//从数组中提取敌机元素
	var e = enemyList[i];
	//敌机向下移动 
	e.y+=3;
	//如果敌机移出边界，从数组中移除该元素 
	if(e.y>=700)enemyList.splice(i,1);
}

从数组中移除的元素并不会消失在应用窗口中，必须手动从应用窗口中移除

//遍历数组获取每架敌机元素，添加动画效果
for(var i=0;  i<enemyList.length;  i++){
	//从数组中提取敌机元素
	var e = enemyList[i];
	//敌机向下移动 
	e.y+=3;
	//如果敌机移出边界，从数组中移除该元素 
	if(e.y>=700){
        //将敌机从数组中移除
		enemyList.splice(i,1);
		//将敌机从应用窗口中移除
		app.stage.removeChild( e );
	}	
}