[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