Cocos Creator TypeScript 使用createWithSpriteFrames实现动态创建动画Animation，并播放

希望可以帮到刚入坑的新人

直接给小伙伴分享刚完成的源码：

const {ccclass, property} = cc._decorator;

/**
 * @author Maniac.guo
 * Everyone should have a dream ， what if it came true ？
 * @className 动画组件（动态创建动画Animation）
 * @data 2018年5月18日
 * @mailbox [email protected]
 */
@ccclass
export class AnimationComponent extends cc.Component {

    @property(cc.SpriteAtlas)
    sprAtlas:cc.SpriteAtlas = null;
    @property(Number)
    wrapMode:cc.WrapMode = cc.WrapMode.Default;

    private _animation:cc.Animation;

    public onPlayCallBack:Function = null;
    public onStopCallBack:Function = null;
    public onFinishedCallBack:Function = null;

    onLoad () {
        this._animation = this.node.getComponent(cc.Animation);
        // console.log(this.sprAtlas);
        this.setAnimation();
    }

    public setAnimation() : void {
        let self = this;
        if(this.sprAtlas){
            let frames:[cc.SpriteFrame] = this.sprAtlas.getSpriteFrames();
            let clip:cc.AnimationClip = cc.AnimationClip.createWithSpriteFrames(frames,frames.length);
            clip.name = "anim_001";
            clip.speed = 0.5;
            clip.sample = 60;
            clip.wrapMode = this.wrapMode;
            this._animation.addClip(clip);
        }

        if(this._animation){
            this._animation.on("play",this.onPlay,this);
            this._animation.on("stop",this.onStop,this);
            this._animation.on("finished",this.onFinished,this);
        }
    }

    // public loadAnima( texturePath:string = "res/game/5026.png" ) : void {
    //     let self = this;
    //     cc.loader.loadRes(texturePath, cc.SpriteAtlas, function(error , atlas:cc.SpriteAtlas ){
    //         let frames:[cc.SpriteFrame] = atlas.getSpriteFrames();
    //         let clip:cc.AnimationClip = cc.AnimationClip.createWithSpriteFrames(frames,frames.length);
    //         clip.name = "anim_001";
    //         clip.speed = 0.5;
    //         clip.sample = 60;
    //         clip.wrapMode = self.wrapMode;
    //         self._animation.addClip(clip);
    //     });
    // }

    public playAnimation( wrapMode:cc.WrapMode = cc.WrapMode.Default, speed:number = 0.5, sample:number = 60 ) : void {
        if(this._animation){
            if(this.node){
                this.node.active = true;
            }
            let animState:cc.AnimationState = this._animation.getAnimationState("anim_001");
            animState.clip.wrapMode = wrapMode;
            animState.clip.speed = speed;
            animState.clip.sample = sample;
            this._animation.play("anim_001");
        }
    }

    public stopAnimation() : void {
        if(this._animation){
            this._animation.stop("anim_001");
        }
    }

    private onPlay() : void {
        if(this.onPlayCallBack){
            this.onPlayCallBack();
        }
    }

    private onStop() : void {
        if(this.onStopCallBack){
            this.onStopCallBack();
        }
    }

    private onFinished() : void {
        if(this.onFinishedCallBack){
            this.onFinishedCallBack();
        }
        if(this.node){
            this.node.active = false;
        }
    }

    onDestroy () {
        if(this._animation){
            this._animation.off("play",this.onPlay,this);
            this._animation.off("stop",this.onStop,this);
            this._animation.off("finished",this.onFinished,this);
        }

        if(this.onPlayCallBack){
            this.onPlayCallBack = null;
        }
        if(this.onStopCallBack){
            this.onStopCallBack = null;
        }
        if(this.onFinishedCallBack){
            this.onFinishedCallBack = null;
        }
    }

}
           

使用方法：

显示效果：

写在最后，本人使用的编辑器是cocos 1.9版本， 昨天在编辑器里面编辑动画的时候，发现编辑器有BUG， 往编辑器动画里面拖图片，不管怎么拖，又还原成之前的图片， 我都想咂电脑了。

所以今天自己动手写一个动态创建动画的组件，算是对自己的安慰了。