一、定时(计时)动画
[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 );
}
}