动画Animation的设置

1、自定义动画属性

1、创建一个自定义动画脚本AnimateCustomPropertyCtrl

2、编辑器添加一个Animation控件，并且关联脚本AnimateCustomPropertyCtrl

3、在Animation控件下创建一个ParticleSystem和ProgressBar并且设置其属性

4、编写脚本功能                          

properties: {

        hp: 0,

        emissionRote: 0,

        num: 0,

        hpBar: {

            default: null,

            type: cc.ProgressBar

        },

        particle: {

            default: null,

            type: cc.ParticleSystem

        },

        score: {

            default: null,

            type: cc.Label

        }

    },

 

    update: function (dt) {

        this.hpBar.progress = this.hp;

        this.particle.emissionRate = this.emissionRote;

        this.score.string = Math.ceil(this.num);

}

2、精灵帧动画

1、创建动画控件并且设置其属性

 

2、创建脚本并且关联动画控件，可以实现播放动画或者相关条件下暂停动画等等这步骤需要的时候才要，不需要的时候只需在控件中设置属性就可以

    properties: {

        sheepAnim: {

            default: null,

            type: cc.Animation

        }

    },

 

    onLoad: function () {

        var anim = this.sheepAnim;

        this._playAnimCallback = function() {

            anim.play('sheep_jump');

        };

        this.scheduleOnce(this._playAnimCallback, 2);

},

还有一种操作就是代码实现

var animation = this.getComponent(cc.Animation);

 

cc.loader.loadRes("test assets/atlas", cc.SpriteAtlas, (err, atlas) => {

     var spriteFrames = atlas.getSpriteFrames();

 

     var clip = cc.AnimationClip.createWithSpriteFrames(spriteFrames, 10);

     clip.name = 'run';

     clip.wrapMode = cc.WrapMode.Loop;

 

     animation.addClip(clip);

     animation.play('run');

     });