cocos creator基礎-(十六)自定義的幀動畫播放組件（須要優化）

1: 掌握幀動畫的原理;

2: 完成幀動畫組件的編寫;

3: 代碼中使用幀動畫組件;

 

經過拖拽圖片進行播放，比引擎的製做方式方便，但動畫不是很靈活

 

幀動畫播放組件

 

1: creator播放幀動畫須要經過動畫編輯器去製做;

2: 爲了方便控制和使用加入幀動畫代碼播放組件;

3: 屬性設置:

　　sprite_frames: 幀動畫所用到的全部的幀;

　　duration: 每幀的時間間隔;

　　loop: 是否循環播放;

　　play_onload: 是否加載組件的時候播放;

4: 接口設置:

　　play_once(end_func); // 播放結束後的回掉函數;

　　play_loop(); // 循環播放;

幀動畫播放原理

 

1: 對的時間播放顯示對的圖片:

假設以三幀動畫爲例,時間間隔就是duration

 

組件實現代碼

cc.Class({ extends: cc.Component, properties: { // foo: {
        // default: null, // The default value will be used only when the component attaching
        // to a node for the first time
        // url: cc.Texture2D, // optional, default is typeof default
        // serializable: true, // optional, default is true
        // visible: true, // optional, default is true
        // displayName: 'Foo', // optional
        // readonly: false, // optional, default is false
        // },
        // ...
        // 幀動畫的圖片, 多張圖片, 
 sprite_frames: { default: [], type: cc.SpriteFrame, }, duration: 0.1, // 幀的時間間隔
 loop: false, // 是否循環播放;
 play_onload: false, // 是否在加載的時候就開始播放;
 }, // use this for initialization
    onLoad: function () { 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); } // end

        if (this.play_onload) { // 若是在加載的時候開始播放
            if (this.loop) { // 循環播放
                this.play_loop(); } else { // 播放一次
                this.play_once(null); } } }, play_loop: function() { if (this.sprite_frames.length <= 0) { return; } this.loop = true; this.end_func = null; this.is_playing = true; // 正在播放
        this.play_time = 0; // 播放的時間

        this.sprite.spriteFrame = this.sprite_frames[0]; }, // 須要播放結束之後的回掉, end_func
    play_once: function(end_func) { if (this.sprite_frames.length <= 0) { return; } this.end_func = end_func; this.loop = false; this.is_playing = true; // 正在播放
        this.play_time = 0; // 播放的時間

        this.sprite.spriteFrame = this.sprite_frames[0]; }, // called every frame, uncomment this function to activate update callback
    // 每次遊戲刷新的時候
    update: function (dt) { if(!this.is_playing) { return; } this.play_time += dt; // 當前咱們過去了這麼多時間;
        var index = Math.floor(this.play_time / this.duration); // 非循環播放
        if (!this.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]; } }, });

 

使用組件的測試代碼

須要播放動畫的節點掛載組件腳本，設置好資源後，play

var frame_anim = require("frame_anim"); cc.Class({ extends: cc.Component, properties: { // foo: {
        // default: null, // The default value will be used only when the component attaching
        // to a node for the first time
        // url: cc.Texture2D, // optional, default is typeof default
        // serializable: true, // optional, default is true
        // visible: true, // optional, default is true
        // displayName: 'Foo', // optional
        // readonly: false, // optional, default is false
        // },
        // ...
 anim: { type: frame_anim, default: null, } }, // use this for initialization
    onLoad: function () { }, start: function() { /*this.anim.play_once(function() { console.log("anim end called"); });*/
        this.anim.duration = 1; this.anim.play_loop(); }, // called every frame, uncomment this function to activate update callback
    // update: function (dt) {

    // },
});