前言

在Cocos Creator游戲開發(fā)的過程中我們進行需要使用動畫效果，雖然可以通過動畫編輯器編輯動畫效果，但是有時候用戶想更靈活的控制幀動畫的效果，就需要自己封裝幀動畫組件。

一、幀動畫播放組件

1: creator播放幀動畫需要通過動畫編輯器去制作;

2: 為了方便控制和使用加入幀動畫代碼播放組件;

3: 屬性設(shè)置:

1. sprite_frames: 幀動畫所用到的所有的幀;

2. duration: 每幀的時間間隔;

3. loop: 是否循環(huán)播放;

4. play_onload: 是否加載組件的時候播放;

4: 接口設(shè)置:

1. play_once(end_func); // 播放結(jié)束后的回掉函數(shù);

2. play_loop(); // 循環(huán)播放;

二、幀動畫播放原理

1: 對的時間播放顯示對的圖片:

假設(shè)以三幀動畫為例，時間間隔就是duration,

三、自己封裝幀動畫組件

四、測試封裝的幀動畫組件

勾選PlayOnLoad和去掉的區(qū)別，勾選Loop和去掉的區(qū)別，可以發(fā)現(xiàn)預(yù)加載和循環(huán)播放。如何在代碼中控制？

新建GameMgr.ts掛載到Canvas節(jié)點上****。

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:"幀動畫數(shù)組"})` 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. ?`}`

更多教學(xué)視頻以及源碼素材

https://www.bycwedu.com/promotion_channels/829468798