Cocos creator使用JavaScript。实现通用帧动画组件

一个通用帧动画组件：循环替换图片，代替Animation。

基类：

/**
 * 通用帧动画组件基类
 * 播放一次，或者循环播放
 * 可自定义设置：自动播放或者手动调用播放
 */
cc.Class({
    extends: cc.Component,

    properties: {
        // 是否自动播放，若为true，只要显示就会自动播放
        autoPlay: {
            default: true,
            displayName: "自动播放",
        },

        // 是否循环
        loop: {
            default: false,
            displayName: "循环",
        },

        // 播放结束是否隐藏
        hideWithPlayEnd: {
            default: false,
            displayName: "播放结束隐藏",
        },

        // 播放结束是否销毁节点
        destroyWithPlayEnd: {
            default: false,
            displayName: "播放结束销毁",
        },

        // 间隔时间
        interval: {
            default: 0.06,
            displayName: "间隔时间",
        },

        _curIndex: {
            default: 0,
            serializable: false,
        },

        _timer: {
            default: 0,
            serializable: false,
        },

        _started: {
            default: false,
            serializable: false,
        },

        _endCallback: {
            default: null,
            serializable: false,
        },
    },

    onEnable: function () {
        if (this.autoPlay) {
            this.startPlayAnim(true);
        }
    },

    onDisable: function () {
        this.stopPlayAnim(false);
    },

    update: function (dt) {
        if (!this._started) {
            return;
        }

        let index = Math.floor(this._timer / this.interval);
        if (index < 0) {
            index = 0;
        }
        this._timer += dt;

        if (this._curIndex != index) {
            this._curIndex = index;

            if (index < this.getTotalLength()) {
                this.show(index);
            } else {
                // 播放结束
                if (this.hideWithPlayEnd) {
                    // 隐藏
                    if (this._endCallback) {
                        this._endCallback();
                        this._endCallback = null;
                    }

                    this.node.active = false;
                } else if (this.destroyWithPlayEnd) {
                    // 销毁
                    if (this._endCallback) {
                        this._endCallback();
                        this._endCallback = null;
                    }

                    this.node.destroy();
                } else if (this.loop) {
                    // 继续循环
                    this.startPlayAnim(true);
                } else {
                    // 停止
                    if (this._endCallback) {
                        this._endCallback();
                        this._endCallback = null;
                    }

                    this.stopPlayAnim(false);
                }
            }
        }
    },

    // 可外部调用
    /**
     * 开始播放动画
     * @param {boolean} isReset 是否重置，重置会变成第1张图片
     * @param endCallback 结束回调，只使用于播放一次的模式
     */
    startPlayAnim: function (isReset, endCallback = null) {
        this._started = true;

        if (isReset) {
            this.reset();
        }

        this._endCallback = endCallback;
    },

    // 可外部调用
    /**
     * 停止播放动画
     * @param {boolean} isReset 是否重置，重置会变成第1张图片
     */
    stopPlayAnim: function (isReset) {
        this._started = false;

        if (isReset) {
            this.reset();
        }
    },

    // 重置
    reset: function () {
        this._endCallback = null;
        this._timer = 0;
        this._curIndex = 0;
        this.show(0);
    },

    setLoop: function (loop) {
        this.loop = loop;
    },

    isPlaying() {
        return this._started;
    },

    // 子类重写
    // 显示对应的
    show: function (index) { },

    // 子类重写
    // 获得总长度
    getTotalLength: function () { },
});

子类继承：间隔替换图（也可以扩展成，间隔显示节点）：

/**
 * 间隔替换图片，继承BaseSheetAnimation.js
 * 通用帧动画组件：播放一次，或者循环播放
 * 可自定义设置：自动播放或者手动调用播放
 */
cc.Class({
    extends: require("BaseSheetAnimation"),

    properties: {

        sprite: cc.Sprite,

        spriteFrames: [cc.SpriteFrame],
    },

    // 显示对应的
    show: function (index) {
        if (index < 0 || index >= this.getTotalLength()) {
            return;
        }

        this.sprite.spriteFrame = this.spriteFrames[index];
    },

    // 获得总长度
    getTotalLength: function () {
        if (!this.spriteFrames) {
            return -1;
        }

        return this.spriteFrames.length;
    },

    setSpriteFrames: function (spriteFrames) {
        this.spriteFrames = spriteFrames;
    },
});