Cocos Creator H5 遊戲開發之Tween動畫的封裝

前言

爲了更好更方便快捷高效的開發

正文

我們知道在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沒有實現，後續持續更新