前言
在Cocos Creator游戏开发的过程中我们进行需要使用动画效果，虽然可以通过动画编辑器编辑动画效果，但是有时候用户想更灵活的控制帧动画的效果，就需要自己封装帧动画组件。
一、帧动画播放组件
1: creator播放帧动画需要通过动画编辑器去制作;
2: 为了方便控制和使用加入帧动画代码播放组件;
3: 属性设置:
sprite_frames: 帧动画所用到的所有的帧;duration: 每帧的时间间隔;loop: 是否循环播放;play_onload: 是否加载组件的时候播放;
4: 接口设置:
play_once(end_func); // 播放结束后的回掉函数;play_loop(); // 循环播放;
二、帧动画播放原理
1: 对的时间播放显示对的图片:
假设以三帧动画为例，时间间隔就是duration,
三、自己封装帧动画组件
1. `const {ccclass, property} = cc._decorator;`
3. `@ccclass`
4. `export default class FrameAnim extends cc.Component {`
5. ` @property({type: [cc.SpriteFrame], tooltip:"帧动画图片数组"})`
6. `spriteFrames : Array<cc.SpriteFrame> = [];`
8. ` @property({tooltip:"每一帧的时长"})`
9. `duration : number = 0.1;`
11. ` @property({tooltip:"是否循环播放"})`
12. ` loop : boolean = false;`
14. ` @property({tooltip:"是否在加载的时候就开始播放"})`
15. `playOnload : boolean = false;`
17. ` // 播放完后的回调函数`
18. ` private endFunc : any = null;`
19. ` // 动画播放需要的精灵组件`
20. ` private sprite : cc.Sprite;`
21. ` // 动画播放的状态，正在播放还是停止`
22. ` private isPlaying : boolean = false;`
23. ` // 记录已经播放的时间`
24. `private playTime : number = 0;`
26. ` onLoad () {`
27. ` // 获取当前动画组件挂载的节点上的Sprite组件，如果没有则添加`
28. ` this.sprite = this.node.getComponent(cc.Sprite);`
29. ` if(!this.sprite){`
30. ` this.sprite = this.node.addComponent(cc.Sprite);`
31. ` }`
33. ` // 判断是否是预加载播放`
34. ` if(this.playOnload){`
35. ` if(this.loop){`
36. ` this.playLoop(); // 循环播放`
37. ` }else{`
38. ` this.playOnce(null); // 只播放一次`
39. ` }`
40. ` }`
41. `}`
43. ` public playLoop() : void {`
44. ` this.initFrame(true, null);`
45. `} `
47. ` public playOnce(endf : any) : void {`
48. ` this.initFrame(false, endf);`
49. `}`
51. ` private initFrame(loop:boolean, endf : any) : void{`
52. ` if(this.spriteFrames.length <= 0){`
53. ` return;`
54. ` }`
55. ` this.isPlaying = true;`
56. ` this.playTime = 0;`
57. ` this.sprite.spriteFrame = this.spriteFrames[0];`
58. ` this.loop = loop;`
59. ` this.endFunc = endf;`
60. `}`
62. `start () {`
64. `}`
66. ` update (dt) {`
67. ` if(!this.isPlaying){`
68. ` return;`
69. ` }`
71. ` // 累计时间，通过时间计算应该取哪一张图片展示`
72. ` this.playTime += dt;`
73. ` let index : number = Math.floor(this.playTime / this.duration);`
75. ` if(this.loop){ // 循环播放`
76. ` if(index >= this.spriteFrames.length){`
77. ` index -= this.spriteFrames.length;`
78. ` this.playTime -= (this.duration * this.spriteFrames.length);`
79. ` }`
80. ` this.sprite.spriteFrame = this.spriteFrames[index];`
81. ` }else{ // 播放一次`
82. ` if(index >= this.spriteFrames.length){`
83. ` this.isPlaying = false;`
84. ` // 如果有回调函数的处理，则调用回调函数`
85. ` if(this.endFunc){`
86. ` this.endFunc();`
87. ` }`
88. ` }else{`
89. ` this.sprite.spriteFrame = this.spriteFrames[index];`
90. ` }`
91. ` }`
92. ` }`
93. `}`
四、测试封装的帧动画组件
勾选PlayOnLoad和去掉的区别，勾选Loop和去掉的区别，可以发现预加载和循环播放。如何在代码中控制？
新建GameMgr.ts挂载到Canvas节点上**。**
1. `import FrameAnim from "./FrameAnim";`
3. `const {ccclass, property} = cc._decorator;`
4. `@ccclass`
5. `export default class GameMgr extends cc.Component {`
7. ` @property({type: [FrameAnim], tooltip:"帧动画数组"})`
8. ` anim : Array<FrameAnim> = [];`
9. `// onLoad () {}`
11. ` endPlay(){`
12. ` console.log("动画播放完毕！！");`
13. ` }`
14. ` start () {`
15. ` //this.anim[0].playOnce(this.endPlay);`
16. ` //this.anim[1].playOnce(this.endPlay);`
17. ` //this.anim[0].playOnce(null);`
18. ` //this.anim[1].playOnce(null);`
19. ` //this.anim[0].playLoop();`
20. ` //this.anim[1].playLoop();`
21. ` if(this.anim.length > 1){`
22. ` this.anim[1].duration = 0.5;`
23. ` this.anim[1].playOnce(this.endPlay);`
24. ` }`
25. ` if(this.anim.length > 0){`
26. ` this.anim[0].playLoop();`
27. ` }`
28. ` }`
29. `}`
