creator小功能----簡單實作幀動畫的效果

幀動畫是遊戲中特效表現的必修課。那麼我們使用代碼要怎麼樣來實作幀動畫的效果呢？

第一步、定義幀動畫的一些屬性：

定義一些屬性，友善編輯器上調試效果：幀動畫的圖檔數組、2幀之間的時間間隔、是否循環、是否加載時播放等；

properties: {

        //幀動畫的圖檔數組
        sprite_frames: {
            type: cc.SpriteFrame,
            default: [],
        },

        //時間間隔
        duration: 0.1,

        //是否循環
        is_loop: false,

        //是否加載時播放
        play_onload: false,
    },
           

第二步、兩個函數：循環播放、一次播放

//循環播放
    play_loop: function(){
        if(this.sprite_frames.length <= 0){
            return;
        }
        this.is_loop = true;
        this.end_func = null;
        this.is_playing = true;

        this.sprite.spriteFrame = this.sprite_frames[0];
    },

    //一次播放
    play_once: function(end_func){
        if(this.sprite_frames.length <= 0){
            return;
        }
        this.end_func = end_func;
        this.is_loop = false;
        this.is_playing = true;

        this.sprite.spriteFrame = this.sprite_frames[0];
    },
           

第三步、加載load

onLoad () {
        this.end_func = null;
        this.is_playing = false;
        this.play_time = 0;

        this.sprite = this.getComponent(cc.Sprite);
        if(!this.sprite){
            this.sprite = this.addComponent(cc.Sprite);
        }

        //加載時播放
        if(this.play_onload){
            if(this.is_loop){
                this.play_loop();
            }
            else{
                this.play_once();
            }
        }
    },
           

第四步、圖檔的重新整理控制

update (dt) {
        if(!this.is_playing){
            return;
        }

        this.play_time += dt;
        var  index = Math.floor(this.play_time / this.duration);

        if(!this.is_loop){
            if(index >= this.sprite_frames.length){
                this.is_playing = false;
                if(this.end_func){
                    this.end_func();
                }
            }
            else{
                this.sprite.spriteFrame = this.sprite_frames[index];
            }
        }
        else{
            while(index >= this.sprite_frames.length){
                index -= this.sprite_frames.length;
                this.play_time -= this.sprite_frames.length * this.duration;
            }
            this.sprite.spriteFrame = this.sprite_frames[index];
        }
    },
           

測試

// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

var frame_anim = require("frame_anim");

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },

        anim:{
            type: frame_anim,
            default: null,
        },
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start () {



        // this.anim.play_once(function(){
        //     console.log("play_once~~~~");
        // });



        this.anim.duration = 0.2;
        this.anim.play_loop();
    },

    // update (dt) {},
});