cocos creator游戏引擎之帧动画组件实现动画播放

在cocos creator游戏引擎中如果要实现动画播放会有两种方式:

1.  通过动画编辑器实现补间动画
2. 使用帧动画组件实现动画播放

在这里我推荐大家使用帧动画组件，一个是因为方便快捷，一个组件写好全局通用。二是因为如果要实现一个人物动画播放后回调，相比之下，动画编辑器只能在编辑器中插入函数进行回调，而这种函数的回调如果其他人看你代码的时候其实是很难发现这个调用的，所以这里我更推荐帧动画，那么接下来我就带大家一起实现这个帧动画组件从而实现动画的播放效果。

 

首先准备好我们的资源放到res的文件夹下:

然后创建一个空节点并挂载一个sprite组件，接下来我们创建一个叫anim的脚本组件,打开后我们公开一个spriteFrame数组的接口，创建一个用于控制动画播放速度的变量speed和一个控制是否播放动画的变量if_play_anim:

然后声明一个显示播放时间的变量,并获取到我们的cc.Sprite组件,再创建一个循环播放的函数play_cycle_anim(),在onload的时候通过if_play_anim来判断是否开启播放:

再来实现一下播放的函数,然后通过update来实现图片的轮换, 代码的功能已经写到注释上了:

但这里要注意的是函数之所以再初始化一次时间条是因为,onload中时间条的只在第一次运行的时候会初始化，如果后续通过其他组件关闭了这个播放接口，再一次调用时play_time可能还是保留在上一次的数值段,所以我们需要在函数中再进行一次初始化：

这里我们的组件默认使用循环播放 , 如果要实现只播放一次的效果可以通过写个函数或公开一个变量接口来控制。其他功能可以依据项目的需求在基础上进行修改和添加。下面是全部代码:

cc.Class({
    extends: cc.Component,

    properties: {
        sprite_frames: {
            default: [],
            type: cc.SpriteFrame, 
        },

        speed:0.1,

        if_play_anim:false, // 是否播放动画

    },

     onLoad () {   
        this.play_times = 0; // 播放的时间

        this.anim_sprite = this.node.getComponent(cc.Sprite);

        if (this.if_play_anim)
            this.play_cycle_anim();
     },

    start () {

    },

    play_cycle_anim:function(){
        //如果组件上没有挂载任何图片则直接返回
        if (this.sprite_frames.length <= 0) {   
            return;
        }

        this.play_times = 0;
        //初始化图片为第一张
        this.anim_sprite.spriteFrame = this.sprite_frames[0];

    },

     update (dt) {
         if(this.if_play_anim){
            this.play_times += dt;  //叠加已经过去的时间
            var index = Math.floor(this.play_times / this.speed);  //通过速度控制图片的更换

            while(index >= this.sprite_frames.length) {
                //如果index等于图片的总数量时重新切换到第一张图片
                index -= this.sprite_frames.length;
                //重置时间条
                this.play_time -= (this.sprite_frames.length * this.duration);
            }
            this.anim_sprite.spriteFrame = this.sprite_frames[index];
             
         }
         else{
            
         }
     },
});

感谢阅览奎斯特文章。