前言

在Cocos Creator游戏开发的过程中我们进行需要使用动画效果，虽然可以通过动画编辑器编辑动画效果，但是有时候用户想更灵活的控制帧动画的效果，就需要自己封装帧动画组件。

一、帧动画播放组件

1: creator播放帧动画需要通过动画编辑器去制作;

2: 为了方便控制和使用加入帧动画代码播放组件;

3: 属性设置:

1. sprite_frames: 帧动画所用到的所有的帧;

2. duration: 每帧的时间间隔;

3. loop: 是否循环播放;

4. play_onload: 是否加载组件的时候播放;

4: 接口设置:

1. play_once(end_func); // 播放结束后的回掉函数;

2. play_loop(); // 循环播放;

二、帧动画播放原理

1: 对的时间播放显示对的图片:

假设以三帧动画为例，时间间隔就是duration,

三、自己封装帧动画组件

四、测试封装的帧动画组件

勾选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.  `}`

更多教学视频以及源码素材

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