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() 方法获取这个组件即可帧动画自制模块