拓展一个好用的Cocos Action

为什么要拓展呢?

在CocosCreator1.x中用到关于动作时,只能使用内置的的动作,如Fade,RotateTo的这种内置的动作,这导致如果我们要做一个较为灵活的动作时(如玩家在获得金币时,金币要在一秒之内跳动着从100,变化到200),不得不在脚本的update函数中自己实现.虽然也可以达到目的.

playChangeCoinsAnim:function(){
	this.startValue=100;
	this.endValue=200;
	this.playAnim=true;
	this.currentTimer=0;//当前的时间
	this.animTotalTimer=1;//金币数量变化的动画总共时间为1秒钟
}

setCoinsShow:function(value){
	coinLabel.string=value;
},

update:function(dt){
	if(this.playAnim){
		this.currentTimer+=dt;
		let p=this.currentTimer/this.animTotalTimer;
		if(p>=1){
			p=1;
			this.playAnim=false;
		}
		let currentValue=Math.floor(this.startValue+(this.endValue-this.startValue)*p);
		this.setCoinsShow(this.currentValue);
		
	}
}

这样的代码是我在使用拓展的Action之前所采用的方法.虽然也可以虽然也可以实现我想要播放一段金币跳动的效果.但是playChangeCoinsAnim本身需要配合update函数的形式却不令人满意.而且没一次有自定义的动效出现时都要写startValue,endValue,playAnim,currentTimer,animTotalTimer这样的重复变量来控制,显得十分不优雅,而且要实现动画缓动也尤为困难.

所以到底是怎样的呢?

拓展出的DoFloat代码

cc.DoFloat = cc.ActionInterval.extend({
    _fromValue: 0,
    _endValue: 0,
    _currentValue: 0,
    _updateCallBack:undefined,

    ctor: function (duration, fromValue, endValue) {
        cc.ActionInterval.prototype.ctor.call(this);

        this.initWithDuration(duration, fromValue, endValue);

        this._currentValue = fromValue;
    },

    initWithDuration: function (duration, fromValue, endValue) {
        if (cc.ActionInterval.prototype.initWithDuration.call(this, duration)) {
            this._fromValue = fromValue || 0;
            this._currentValue = fromValue;

            this._endValue = endValue !== undefined ? endValue : this._fromValue;
            return true;
        }
        return false;
    },
	
	//加入的setUpdateCallBack函数,可以在数字变动的时候做自定义的事件
    setUpdateCallBack:function(callBack){
        if(callBack){
            this._updateCallBack=callBack;
        }
    },

    clone: function () {
        var action = new cc.DoFloat();
        this._cloneDecoration(action);
        action.initWithDuration(this._duration, this._fromValue, this._endValue);
        return action;
    },

    startWithTarget: function (target) {
        cc.ActionInterval.prototype.startWithTarget.call(this, target);
    },

    reverse: function () {
        //reverse
    },

    update: function (dt) {
        dt = this._computeEaseTime(dt);
        this._currentValue = (this._endValue - this._fromValue) * dt + this._fromValue;
        if(this._updateCallBack){
            this._updateCallBack(this._currentValue);
        }
    }
});



cc.doFloat = function (duration, from, to) {
    return new cc.DoFloat(duration, from, to);
};

这个是继承自cocos 引擎中的ccActionInterval,这样就可以像使用原生的Action一样使用这个自定义的DoFloat了.

用法

 playChangeCoinsAnim:function(){
     let doFloat=cc.doFloat(1,100,200);//第一个参数为duration 第二个为数字变动的起始数字, 第三个目标数字
	 let self=this;
	 //setUpdateCallBackh自定义Action添加回调函数
	 doFloat.setUpdateCallBack(currentValue=>{
	     self.setCoinsShow(Math.floor(currentValue));
	 });
	 this.node.runAction(doFloat);
  }

  setCoinsShow:function(value){
	coinLabel.string=value;
  },	

这样就可以像使用原生的Action一样使用拓展出的doFloor函数了.这样的好处是可以把playChangeCoinsAnim想要做的动画在一个函数中表现出来,而不是必须通过查看update函数才能了解到意思.而且也避免了每次写自定义函数都要重复写哪些变量的困扰