cocos creator学习13——自制帧动画播放组件

帧动画自制组件

继上次的飞机大战项目，自制一份帧动画播放组件

属性列表准备

properties: {
        spriteframes:{ //精灵帧数组
            type:cc.SpriteFrame,
            default:[],
        },
        frame_time:0.1, //帧动画切换图片的时间,即间隔时间
        loop:false,     //是否循环播放
        playload:false, //是否Playonload
    },

初始化与基本逻辑

onLoad () {
         this.isPlaying = false;  //是否在播放
         this.time = 0;   //播放时间控制
         this.sprite = this.getComponent(cc.Sprite);//获取组件
         if(!this.sprite)       //若组件为空则为其添加组件
         {
             this.sprite = this.addComponent(cc.Sprite);
         }
         if(this.playload){  //如果用户选择playload属性则在场景开始时播放动画
             if(this.loop){   //判断是否循环，调用相关函数
                 this.Playloop();
             }
             else{
                 this.PlayOnce();
             }
         }
     },

改变参数的方法

利用方法改变参数，以下为循环播放需要改变的参数

Playloop:function(){
        if(this.spriteframes.length<0){ //判断精灵帧长度是否合法
            return;
        }
        this.time = 0;
        this.loop = true;
        this.end_fun = null; //回调函数指向空
        this.isPlaying = true;
        this.sprite.spriteFrame = this.spriteframes[0]; //初始化帧动画
    },

以下为非循环播放改变的参数

PlayOnce:function(callback){ //传入回调方法
        if(this.spriteframes.length<0){
            return;
        }
        this.end_fun = callback;
        this.loop = false;
        this.isPlaying = true;
        this.time = 0;
        this.sprite.spriteFrame = this.spriteframes[0];
    },

利用updata(dt)实现逻辑控制

update (dt) {
        if(!this.isPlaying){ //判断是否正在播放，不在播放可以直接返回
            return;
        }
        this.time += dt; //获取播放时间
        var index = Math.floor(this.time/this.frame_time); //取整获得图片位置
        if(!this.loop){//非循环播放
            if(index>= this.spriteframes.length){ //播放完毕
                this.isPlaying = false;
                if(this.end_fun){ //执行回调函数
                    this.end_fun();
                }
            }
            else{//动画正在播放
                this.sprite.spriteFrame = this.spriteframes[index];
            }
        }
        else{//循环播放
            while(index>=this.spriteframes.length){
                //使索引回到之前对应的索引
                index -= this.spriteframes.length;
                //数组长度 *间隔时间 = 一段时间段
                this.time -= (this.spriteframes.length * this.frame_time);//使时间段回到之前对应的时间段
            }
            this.sprite.spriteFrame = this.spriteframes[index];//更新索引
        }
    },

为节点挂载组件并放入精灵帧

这里勾选属性为Loop与Playload

播放效果

循环播放帧动画就成功了
若其他节点获取组件，此时就需要require() 方法获取这个组件即可帧动画自制组件