一. 逐帧动画原理

1.纹理


1）简介：

就是创建 Sprite 时的显示的图片.

切换图片纹理，就是更改 Sprite 对象的图片显示内容.

PIXI.Sprite 是 PIXI.Texture 类的子类

fromImage()方法是继承自父类中的一个方法. 通过给定的图片资源路径 ,创建一个图片的纹理对象,保存到 texture属性中,用来显示.

创建 Sprite 对象时,也可以使用下面的方法：

  1. var app = new PIXI.Application(400,400);
  2. document.body.appendChild(app.view);
  4. var bg = new PIXI.Sprite.fromImage("res/plane/bg/img_bg_level_2.jpg");
  5. app.stage.addChild(bg);
  7. //引入第1张图片纹理
  8. var texture1 = new PIXI.Texture.fromImage('res/plane/plays/planplay_1.png');
  10. // 通过一个纹理对象创建一个 Sprite 对象
  11. var plane = new PIXI.Sprite(texture1);
  12. app.stage.addChild(plane);
  13. plane.x = 200;
  14. plane.y = 200;

2）.通过帧频函数来实现自动的纹理切换

  1. var app = new PIXI.Application(400,400);
  2. document.body.appendChild(app.view);
  4. var bg = new PIXI.Sprite.fromImage("res/plane/bg/img_bg_level_2.jpg");
  5. app.stage.addChild(bg);
  7. var plane = new PIXI.Sprite.fromImage("res/plane/plays/planplay_1.png");
  8. app.stage.addChild(plane);
  10. //引入第1张图片纹理
  11. var texture1 = new PIXI.Texture.fromImage('res/plane/plays/planplay_1.png');
  12. //引入第2张图片纹理
  13. var texture2 = new PIXI.Texture.fromImage('res/plane/plays/planplay_2.png');
  14. //引入第3张图片纹理
  15. var texture3 = new PIXI.Texture.fromImage('res/plane/plays/planplay_3.png');
  16. //引入第4张图片纹理
  17. var texture4 = new PIXI.Texture.fromImage('res/plane/plays/planplay_4.png');
  19. // 创建一个纹理数组
  20. var images = [texture1,texture2,texture3,texture4];
  22. // 控制帧频函数执行频率的变量
  23. var n = 0;
  24. // 获取纹理路径变量
  25. var idx = 0;
  26. // 启动一个帧频函数
  27. app.ticker.add(function(){
  28. // 判断是否执行
  29. // 根据给定的速度决定执行的频率
  30. if(n == 10){
  31. // 获取纹理对象
  32. var texture = images[idx];
  33.    // 将新的纹理对象显示到飞机对象上
  34.     plane.texture = texture;
  35.     //  改变下标,为下次获取纹理做准备
  36.     idx++;
  37.     // 如果下标等于纹理组数元素个数,重置下标
  38.     if(idx == images.length){
  39.         idx = 0;
  40.     }
  41.     // 如果计数达到10次,重置计数器
  42.     n = 0;
  43. }
  44. // 频率计数器递增
  45. n++;
  46. });

3）手动实现动画的播放

  1. var app = new PIXI.Application(400,400);
  2. document.body.appendChild(app.view);
  4. var plane = new PIXI.Sprite.fromImage("res/plane/plays/planplay_1.png");
  5. app.stage.addChild(plane);
  7. // 创建一个数组,用来保存动画的每个动作纹理路径
  8. var imageList = [];
  9. imageList.push("res/plane/plays/planplay_1.png");
  10. imageList.push("res/plane/plays/planplay_2.png");
  11. imageList.push("res/plane/plays/planplay_3.png");
  12. imageList.push("res/plane/plays/planplay_4.png");
  14. // 将数组绑定给飞机对象
  15. plane.animationImages = imageList;
  16. // 给数组绑定一个动画播放速度 0~1之间的速度值 0最慢,1最快
  17. plane.animationSpeed = 0.2;
  18. // 给飞机对象绑定一个动画函数
  19. plane.play = function(){
  20. // 用来计算动画播放速度的变量
  21. var speed = 10;
  22. // 控制帧频函数执行频率的变量
  23. var n = 0;
  24. // 获取纹理路径变量
  25. var idx = 0;
  26. // 启动一个帧频函数
  27. app.ticker.add(function(){
  28. // 判断是否执行
  29. // 根据给定的速度决定执行的频率
  30. if(n == speed - plane.animationSpeed * 10 + 1){
  31. // 获取纹理路径
  32. var src = plane.animationImages[idx];
  33. // 创建纹理对象
  34. var texture = new PIXI.Texture.fromImage(src);
  35. // 将新的纹理对象显示到飞机对象上
  36. plane.texture = texture;
  37. //  改变下标,为下次获取纹理做准备
  38. idx++;
  39. // 如果下标等于纹理组数元素个数,重置下标
  40. if(idx == plane.animationImages.length){
  41. idx = 0;
  42. }
  43. // 如果计数达到10次,重置计数器
  44. n = 0;
  45. }
  46. // 频率计数器递增
  47. n++;
  48. });
  50. }
  51. plane.play();

二.快速实现逐帧动画


1. 原理

前面通过代码实现了动画的原画,但是非常麻烦.
PIXI已经封装好了关于对画的类
只需要创建动画类型对象,提供动画素材和时间,就可以直接实现动画

var app = new PIXI.Application(400,400);
document.body.appendChild(app.view);

//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、并将imageList中所有图片作为动画切换的纹理,创建快速帧频动画plane
var plane = PIXI.extras.AnimatedSprite.fromImages(imageList);
app.stage.addChild(plane);
plane.anchor.set(0.5,0,5);
plane.x = 200;
plane.y = 100;
// 3、设置动画播放速度，也就是纹理切换的速度，值为0到1之间的小数，0最慢，1最快
plane.animationSpeed = 0.2;

// 4、播放动画

plane.play();

2. 常用属性

  • loop属性%E3%80%8B%E5%BF%AB%E9%80%9F%E5%AE%9E%E7%8E%B0%E9%80%90%E5%B8%A7%E5%8A%A8%E7%94%BB%20%E3%80%8B%20%E5%BC%80%E5%A7%8B%E5%AD%A6%E4%B9%A0#title21)

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

  • onComplete属性%E3%80%8B%E5%BF%AB%E9%80%9F%E5%AE%9E%E7%8E%B0%E9%80%90%E5%B8%A7%E5%8A%A8%E7%94%BB%20%E3%80%8B%20%E5%BC%80%E5%A7%8B%E5%AD%A6%E4%B9%A0#title22)

指定一个函数，当动画播放完毕时执行该函数
1、指定onComplete要执行的函数
plane.onComplete = complete;
当plane的动画播放完毕时，去执行complete函数

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

  • gotoAndPlay方法%E3%80%8B%E5%BF%AB%E9%80%9F%E5%AE%9E%E7%8E%B0%E9%80%90%E5%B8%A7%E5%8A%A8%E7%94%BB%20%E3%80%8B%20%E5%BC%80%E5%A7%8B%E5%AD%A6%E4%B9%A0#title23)

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