[CocosCreator]封裝可續播幀動畫

        歡迎喜歡或者從事CocosCreator開發的小夥伴請加入我的大家庭CocosCreator遊戲開發Q群:26855530 

        在CocosCreator的官方文檔中,提供播放幀動畫的元件是Animation,在一般的情況下是可以滿足大部分的遊戲需求的.但是有時,在播放動畫的時候,比如人物的行走的動作時,一旦方向改變,或者動作改動,該元件便會重第1幀執行你指定的動作,這個并不符合我們的需求.

        我們的需求是:目前播放到第n幀時,切換下個動作應該從第n+1幀續播.

        于是乎就有了今天這篇部落格.在浏覽官方的源碼之後,再結合我自身的需求,我自己寫了一個元件,代碼如下:

import DynamicAssetManager from "../manager/DynamicAssetManager";

const {ccclass} = cc._decorator;
/**
 * 可續播幀動畫元件
 */
@ccclass
export default class FrameAnimation extends cc.Component {
    private spriteFrames: Array<cc.SpriteFrame> = [];//目前播放的幀動畫圖檔組
    private sprite: cc.Sprite;//執行動畫的精靈元件
    private playTime: number = 0;//已經播放的時間
    private _speed: number = 1;//目前播放速度

    onLoad() {
        this.playTime = 0;
        //擷取目前動畫元件挂載的節點上的Sprite元件
        this.sprite = this.node.getComponent(cc.Sprite);
        if (!this.sprite) {
            this.sprite = this.node.addComponent(cc.Sprite);
        }
    }

    /**
     * 播放動畫
     * @param url 幀動畫圖檔路徑
     * @param speed 播放速度(可選)
     * @param force 強制重播(可選)
     * @param completeBlock 回調函數(可選)
     */
    playAni(url: string, speed?: number, force?: boolean, completeBlock?: Function) {
        if (!url) {
            return;
        }

        this._speed = speed ? speed : 1;

        if (typeof (force) == "undefined") {
            //非強制下不重複播放,暫時沒用留個後手
            force = false;
        }

        if (this.node["lastAct"] == url && !force) {
            //非強制下不重複播放
            return;
        }

        this.node["lastAct"] = url;//記錄上次動作

        DynamicAssetManager.load(this.node, url, cc.SpriteAtlas, (atlas: cc.SpriteAtlas) => {
            this.spriteFrames = atlas.getSpriteFrames();
            if (typeof completeBlock == "function") {
                completeBlock();
            }
        });
    }

    update(dt) {
        if (this.spriteFrames && this.spriteFrames.length > 0) {
            //累計時間，通過時間計算應該取哪一張圖檔展示
            this.playTime += dt * this._speed * this.spriteFrames.length;
            let index: number = Math.floor(this.playTime);
            if (index >= this.spriteFrames.length) {
                index = 0;
                this.playTime = 0;
            }
            this.sprite.spriteFrame = this.spriteFrames[index];
        }
    }

    //釋放資源
    free() {
        this.spriteFrames = [];
        DynamicAssetManager.pullAsset(this.node, this.constructor.name);
    }

    onDestroy() {
        DynamicAssetManager.pullAsset(this.node, this.constructor.name);
    }
}

           

嗯......想了一下也沒有需要說明的,注釋都很清晰使用也非常友善,哪裡要播動畫挂哪裡,

 非常好用~

歡迎喜歡或者從事CocosCreator開發的小夥伴請加入我的大家庭CocosCreator遊戲開發Q群:26855530