1、快速实现逐帧动画

示例

var app = new PIXI.Application(400,400);
document.body.appendChild(app.view);
var imageList = [];
imageList.push("res/plane/plays/planplay_1.png");
imageList.push("res/plane/plays/planplay_2.png");
imageList.push("res/plane/plays/planplay_3.png");
imageList.push("res/plane/plays/planplay_4.png");
var plane = PIXI.extras.AnimatedSprite.fromImages(imageList);
app.stage.addChild(plane);
plane.animationSpeed = 0.2;
plane.play();

代码讲解

1、创建图片数组

var imageList = [];
imageList.push(“res/plane/plays/planplay_1.png”);
imageList.push(“res/plane/plays/planplay_2.png”);
imageList.push(“res/plane/plays/planplay_3.png”);
imageList.push(“res/plane/plays/planplay_4.png”);
创建一个图片数组，用于充当帧频动画的纹理

2、创建快速帧频动画

var plane = PIXI.extras.AnimatedSprite.fromImages(imageList);
创建快速帧频动画plane，并将imageList中所有图片作为动画切换的纹理

3、设置动画播放速度

plane.animationSpeed = 0.2;
设置动画播放速度，也就是纹理切换的速度，值为0到1之间的小数，0最慢，1最快

4、播放动画

plane.play();

2、loop属性

loop属性，用于控制是否循环播放动画

示例

var app = new PIXI.Application(500,500);
document.body.appendChild(app.view);
var imageList = [];
for(var i=1;i<=11;i++){
    imageList.push("res/plane/plays/planplay_"+i+".png")
}
var plane = PIXI.extras.AnimatedSprite.fromImages(imageList);
app.stage.addChild(plane);
plane.loop = false;
plane.animationSpeed = 0.2;
plane.play();

代码讲解

1、不循环播放动画

plane.loop = false;
通过loop属性，控制plane不循环播放动画。true循环播放，false不循环播放

3、onComplete属性

指定一个函数，当动画播放完毕时执行该函数

示例

var app = new PIXI.Application(500,500);
document.body.appendChild(app.view);
var imageList = [];
for(var i=1;i<=11;i++){
    imageList.push("res/plane/plays/planplay_"+i+".png")
}
var plane = PIXI.extras.AnimatedSprite.fromImages(imageList);
plane.x = 100;
plane.y = 100;
app.stage.addChild(plane);
plane.loop = false;
plane.animationSpeed = 0.2;
plane.play();
var txt = new PIXI.Text("",{fill:0xffffff,fontSize:20});
app.stage.addChild(txt);
plane.onComplete = complete;
function complete() {
    txt.text = "is completed";
}

代码讲解

1、指定onComplete要执行的函数

plane.onComplete = complete;
当plane的动画播放完毕时，去执行complete函数

2、定义complete函数

function complete() {
txt.text = “is completed”;
}
定义complete函数，当plane的动画播放完毕时执行该函数
注意：如果想要使用onComplete属性，那么loop属性必须设置为false

4、gotoAndPlay方法

从指定帧开始播放动画

示例

var app = new PIXI.Application(500,500);
document.body.appendChild(app.view);
var imageList = [];
for(var i=1;i<=11;i++){
    imageList.push("res/plane/plays/planplay_"+i+".png")
}
var plane = PIXI.extras.AnimatedSprite.fromImages(imageList);
app.stage.addChild(plane);
plane.loop = false;
plane.animationSpeed = 0.02;
plane.gotoAndPlay(5);

代码讲解

1、从指定帧开始播放动画

plane.gotoAndPlay(5);
指定从第5帧，开始播放plane动画