在遊戲中，資源的獲取或者獎勵的獲得，都會有一個簡單的動畫，以提高使用者體驗。

引擎cocos creator 語言JavaScript

需求

1.在資源點開始要做個簡單的出現的動畫，之後停頓很短時間，讓玩家有感覺。
　　2.停頓完成後飛昇到頂部資源欄此資源處。
　　3.到達頂部資源處後，此資源顯示出做出接受飛昇上來的資源的動畫。

方案

使用貝塞爾曲線，延時

解決

設飛昇起點為A，停頓點為B，重點為C
　　1.在資源欄資源處新增一個動畫。
　　2.資源在A點時，做第一段貝賽爾曲線運動到B點，距離不能太遠，用時不能太長。
　　3.資源到達B點時，設計一個延時再做下一段動畫，延時時間不能太長影響體驗。
　　4.在延時後做第二段貝塞爾曲線運動到達C點。
　　5.到達C點時，飛昇上來的資源消失，大概同時播放資源欄資源處的動畫。

程式碼

1.此處用3個金幣來做飛昇動作。id用來標識是哪個資源（此處為金幣），initPos為起始座標，targetPos為終點座標。最後發出事件。

for (var i = 0; i < 3; i++) {
    var ev = new cc.Event.EventCustom('onPickRes', true);
    ev.setUserData({
        resID: tb.TID_RESOURCE_MONEY,
        initPos: kf.getLocationInRoot(this.flyGoldNode),
        targetPos: {x: 0, y : 0}
    });
    this.node.dispatchEvent(ev);
}
 

2.這裡為收到1事件的處理，首先如果是這個資源，進行初始設定。flyResItemName為動畫的那個類（它作為元件的）；targetPos為重新設定的終點位置；this.flyGoldNode為掛載飛昇上去後資源欄那個資源動畫的節點；this.titleBar是其他隱藏掉的東西；this.flyGoldAnimation為飛昇上去後資源欄那個資源的動畫（動畫前0.5s啥都不做，未來和飛昇動作匹配）；script代表貝賽爾曲線那個類（3就是那個類）。

if(resID === tb.TID_RESOURCE_MONEY) {
    flyResItemName = "flyResGold";
    targetPos = kf.getLocationInRoot(this.flyGoldNode);
    this.flyGoldNode.active = true;
    this.titleBar.getComponent("titleBar").setGoldIcon(false);
    this.flyGoldAnimation.play( );
}

if(!flyResItemName) return;
var instance = this.preloadLogic.getPrefabEx(flyResItemName);
var script = instance.getComponent(flyResItemName);
script.init(initPos, targetPos);
this.node.addChild(instance);
script.fly();
 

3.飛昇-停頓-飛昇動畫的實現

　　init函式主要是初始化。
　　fly函式實現了兩個貝賽爾曲線（bezier和nextBezier），進行Bezier後調delayTime延時0.05作為停頓效果，再進行nextBezier。
　　update主要用於資源的管理，更新（比如飛到位後根據this.actionState動作的狀態消失）。

cc.Class({
    extends: cc.Component,

    properties: {

    },

    // use this for initialization
    onLoad: function () {
        this.preloadLogic = kf.require("logic.preload");
    },

    init: function (initPos, targetPos) {
        this.actionState = null;
        this.initPos = initPos;
        this.targetPos = targetPos;
    },

    fly: function () {
        this.node.setPosition(this.initPos);
        this.node.stopAllActions();
        var bezier = [cc.p(this.initPos.x + Math.random()*20, this.initPos.y + Math.random()*20), cc.p(this.initPos.x + Math.random()*40, this.initPos.y + Math.random()*40), cc.p(this.initPos.x+ Math.random()*80, this.initPos.y + Math.random()*50)];
        var action = cc.bezierTo(0.5, bezier);

        var nextBezier = [cc.p(this.node.x + Math.random()*200 - 100, this.node.y + 200), cc.p(this.node.x + Math.random()*200 - 100, this.node.y + 350), this.targetPos];
        var nextAction = cc.bezierTo(0.5, nextBezier);

        this.actionState = this.node.runAction(cc.sequence(action, cc.sequence(cc.delayTime(0.05), nextAction)));
    },

    update: function () {
        if(this.actionState && this.actionState.isDone()){
            this.preloadLogic.putInPool(this.node.name, this.node);
            this.actionState = null;
        }
    }
});

4.物件池中物件管理。

　　getPrefabEx：size判斷物件池中是否有空閒物件。如果沒有空閒物件，也就是物件池中備用物件不夠時，我們就用 cc.instantiate 重新建立。
　　putInPool：將節點放進物件池，這個方法會同時呼叫節點的 removeFromParent。

preloadLogic.getPrefabEx = function (name) {
    var prefab = undefined;
    if(this.isPool(name)){
        var pool = this[name+'Pool'];
        if (pool.size() > 0) {
            prefab = pool.get();
            this.reRegisterEvent(prefab,name);
        } else {
            prefab = cc.instantiate(this[name+'Prefab']);
        }
    }

    return prefab;
};
preloadLogic.putInPool = function (name, prefab) {
    var pool = this[name+'Pool'];
    if(pool){
        var js = prefab.getComponent(name);
        if (js && js.unregisterEvent) {
            js.unregisterEvent();
            js.registerHandler = [];
        }
        pool.put(prefab);
    }
};
preloadLogic.isPool = function (name) {
    return this[name + "Pool"] && this[name + "Prefab"];
};

preloadLogic.reRegisterEvent = function(node,name){
    var jsComp = node.getComponent(name);
    if (jsComp && jsComp.registerEvent && jsComp._isOnLoadCalled !== 0)
        jsComp.registerEvent();
};

總結

在過程中有幾次設計問題，在資源欄資源那個動畫處，本來動畫沒有前0.5s啥不做這個設計，也想用延時來做，但是在delay之後，動畫play卻沒有呼叫，這是個疑惑點，研究下。
　　加油！