Cocos Creator封装自己的帧动画组件播放动画

博毅创为游戏圈

于 2020-08-20 16:48:00 发布

阅读量586

点赞数

分类专栏： laya 游戏开发 cocos开发文章标签：游戏 vue javascript js

本文链接：https://blog.csdn.net/weixin_49669470/article/details/108127102

版权

本文介绍了在Cocos Creator游戏开发中，如何封装并控制帧动画组件。通过组件化的方式，开发者能更灵活地调整帧动画的播放效果。文章详细讲解了组件的属性设置、接口设计以及帧动画的播放原理，最后还进行了组件测试，探讨了预加载和循环播放的控制方法。

摘要由CSDN通过智能技术生成

前言

在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<