Cocos Creator H5 游戏开发之Tween动画的封装游戏JoeyHuangzx的专栏-

前言

为了更好更方便快捷高效的开发

正文

我们知道在CocosCreator里如果要写一个缓动动画（Tween）还要有动画完成时间回调，需要有三个步骤，例如一个旋转制定角度的动画：

let action:cc.ActionInterval=cc.rotateTo(1,20); let seq:cc.ActionInterval=cc.sequence(action,cc.callFunc(completeFunction)); this.node.runAction(seq); 

每次都这样写，我是感觉到太麻烦了，习惯了Unity开发的我，知道Unity3D的Tween动画一句就可以搞定。于是我就自己封装了一层代码，一句话实现Tween动画，这个类里封装了大部分的Tween动画，代码就不用多说了，很容易看的明白，直接上代码就行

const {ccclass, property} = cc._decorator;  /**  * 缓动函数扩展  *   */ @ccclass export default class ActionIntervalTool  {      /**      * 移动到目标位置      * @param _node 目标节点      * @param durtion 时间      * @param v2 目标位置的坐标      * @param completeCB 完成事件回调函数      */     public static MoveTo(_node:cc.Node,durtion:number,desPos:cc.Vec2,completeCB:any=null)     {         let _to:cc.ActionInterval=cc.moveTo(durtion,desPos);         this.runAction(_node,_to,completeCB);     }         /**      * 移动指定的距离      * @param _node 目标节点      * @param durtion 时间      * @param v2 移动的距离      * @param completeCB 完成事件回调函数      */     public static MoveBy(_node:cc.Node,durtion:number,deltaPos:cc.Vec2,completeCB:any=null)     {         let _by:cc.ActionInterval=cc.moveBy(durtion,deltaPos);         this.runAction(_node,_by,completeCB);     }       public static MoveByLoop(_node:cc.Node,durtion:number,deltaPos:cc.Vec2)     {         let _by:cc.ActionInterval=cc.moveBy(durtion,deltaPos);         let req=cc.repeatForever(_by);         _node.runAction(req);     }          /**      * 旋转到目标角度      * @param _node 目标节点      * @param durtion 时间      * @param desAngle 目标角度      * @param completeCB 完成事件回调函数      */     public static RotateTo(_node:cc.Node,durtion:number,desAngle:number,completeCB:any=null):any     {         let _to:cc.ActionInterval=cc.rotateTo(durtion,desAngle);         this.runAction(_node,_to,completeCB);         return _to;     }      /**      * 旋转指定的角度      * @param _node 目标节点      * @param durtion 时间      * @param desAngle 指定的角度      * @param completeCB 完成事件回调函数      */     public static RotateBy(_node:cc.Node,durtion:number,deltaAngle:number,completeCB:any=null):any     {         let _by:cc.ActionInterval=cc.rotateBy(durtion,deltaAngle);         this.runAction(_node,_by,completeCB);         return _by;     }      /**      * 将节点大小缩放到指定的倍数      * @param _node 目标节点      * @param durtion 时间      * @param scaleNum 指定的倍数      * @param completeCB 完成事件回调函数      */     public static ScaleTo(_node:cc.Node,durtion:number,scaleMulti:cc.Vec2,completeCB:any=null)     {         let _to:cc.ActionInterval=cc.scaleTo(durtion,scaleMulti.x,scaleMulti.y);         this.runAction(_node,_to,completeCB);     }           /**      * 按指定的倍数缩放节点大小      * @param _node 目标节点      * @param durtion 时间      * @param scaleNum 指定的倍数      * @param completeCB 完成事件回调函数      */     public static ScaleBy(_node:cc.Node,durtion:number,scaleMulti:cc.Vec2,completeCB:any=null)     {         let _by:cc.ActionInterval=cc.scaleBy(durtion,scaleMulti.x,scaleMulti.y);         this.runAction(_node,_by,completeCB);     }      /**      * 修改透明度到指定值      * @param _node 目标节点      * @param durtion 时间      * @param opacity 0-255的透明值      * @param completeCB 完成事件回调函数      */     public static FadeTo(_node:cc.Node,durtion:number, opacity: number,completeCB:any=null)     {         let _to:cc.ActionInterval=cc.fadeTo(durtion,opacity);         this.runAction(_node,_to,completeCB);     }      /**      * 从0到255的渐显      * @param _node 目标节点      * @param durtion 时间      * @param completeCB 完成事件回调函数      */     public static FadeIn(_node:cc.Node,durtion:number,completeCB:any=null)     {         let _in:cc.ActionInterval=cc.fadeIn(durtion);         this.runAction(_node,_in,completeCB);     }      /**      * 从255到0的渐隐      * @param _node 目标节点      * @param durtion 时间      * @param completeCB 完成事件回调函数      */     public static FadeOut(_node:cc.Node,duration:number,completeCB:any=null)     {         let _out:cc.ActionInterval=cc.fadeOut(duration);          this.runAction(_node,_out,completeCB);     }      /**      * 偏斜到目标角度      * @param _node       * @param _duration       * @param _sx       * @param _sy       * @param completeCB       */     public static skewTo(_node:cc.Node,_duration:number,_sx:number,_sy:number,completeCB:any=null)     {        let skew:cc.ActionInterval=cc.skewTo(_duration,_sx,_sy);        this.runAction(_node,skew,completeCB);     }      /**      * 偏斜指定角度      * @param _node       * @param _duration       * @param _sx       * @param _sy       * @param completeCB       */     public static skewBy(_node:cc.Node,_duration:number,_sx:number,_sy:number,completeCB:any=null)     {        let skew:cc.ActionInterval=cc.skewBy(_duration,_sx,_sy);        this.runAction(_node,skew,completeCB);     }      /**      * 用跳跃的方式移动到目标位置      * 将节点对象移动到抛物线位置，通过修改其位置属性来模拟跳跃移动      * @param _node       * @param _duration       * @param _position       * @param _y       * @param _height       * @param _jumps       * @param completeCB       */     public static jumpTo(_node:cc.Node,_duration: number, _position: cc.Vec2|number, _y?: number, _height?: number, _jumps?: number,completeCB:any=null)     {         let jump:cc.ActionInterval=cc.jumpTo(_duration,_position,_y,_height,_jumps);         this.runAction(_node,jump,completeCB);     }      /**      * 用跳跃的方式移动指定位置      * 将节点对象移动到抛物线位置，通过修改其位置属性来模拟跳跃移动      * @param _node       * @param _duration       * @param _position       * @param _y       * @param _height       * @param _jumps       * @param completeCB       */     public static jumpBy(_node:cc.Node,_duration: number, _position: cc.Vec2|number, _y?: number, _height?: number, _jumps?: number,completeCB:any=null)     {         let jump:cc.ActionInterval=cc.jumpBy(_duration,_position,_y,_height,_jumps);         this.runAction(_node,jump,completeCB);     }       //按贝赛尔曲线轨迹移动到目标位置     public static bezierTo()     {      }      /**      * 闪烁（基于透明度）      * @param _node 目标节点      * @param _durtion 时间      * @param _blinks 闪烁强度      * @param completeCB 完成回调      */     public static blink(_node:cc.Node,_duration:number,_blinks:number,completeCB:any=null)     {         let _blink:cc.ActionInterval=cc.blink(_duration,_blinks);         this.runAction(_node,_blink,completeCB);     }      //修改颜色到指定值     public static tintTo()     {              }            public static Sequence()     {      }      public static runAction(_node:cc.Node,tweenAction:cc.ActionInterval,completeCB:any=null)     {         if(completeCB!=null)         {             let seq:cc.ActionInterval=cc.sequence(tweenAction,cc.callFunc(completeCB));             _node.runAction(seq);         }         else         {             _node.runAction(tweenAction);         }              }        

调用方法非常简单,不用挂载到节点，只要把代码放到项目目录了就可以随意调用了，一句话搞定

ActionIntervalTool.MoveTo(this.node,1,cc.Vec2.ZERO,()=>{ console.log('tween complete'); }); ActionIntervalTool.RotateTo(this.node,1,20,()=>{ console.log('tween complete'); }); ActionIntervalTool.ScaleTo(this.node,1,cc.v2(1.2,1.2),()=>{ console.log('tween complete'); }); 

PS：这个类还有一部分Tween没有实现，后续持续更新