Cocos Creator 多分辨率完美適配系列-5（貼邊欄動畫實現）

轉載自：https://www.jianshu.com/p/e5264904d03f

1. 動畫實現

經過上一個章節之後，我們已經可以 「實現多分辨率下貼邊道具欄」了，現在我們可以此基礎上實現動畫效果

1. 點擊屏幕的時候，隱藏道具欄
2. 再次點擊屏幕的時候，顯示道具欄

CONTENT_ADAPTER_RESULT_WITH_ANIM.gif

場景佈局比較簡單，就是4個貼邊節點加Widget，這裏就不再貼場景設置了，具體場景設置可以下載項目進行預覽

https://github.com/zhitaocai/CocosCreator-Multi-resolution-Adapter

關鍵動畫代碼如下：

 

@property(cc.Node)
closeToLeftNode: cc.Node = null;

private _isShowed = true;

private _closeToLeftNodeShowPos: cc.Vec2 = null;

private _closeToLeftNodeHidePos: cc.Vec2 = null;

start() {
    // 記錄顯示和隱藏的位置
    this.closeToLeftNode.getComponent(cc.Widget).updateAlignment();
    this._closeToLeftNodeShowPos = this.closeToLeftNode.position;
    this._closeToLeftNodeHidePos = this.closeToLeftNode.position.sub(
        cc.v2(this.closeToLeftNode.width, 0)
    );
}

/**
 * 屏幕點擊之後出現/隱藏上下左右4個貼邊道具欄
 */
onClick() {
    this.closeToLeftNode.stopAllActions();
    if (this._isShowed) {
        this.closeToLeftNode.runAction(
            cc.moveTo(0.32, this._closeToLeftNodeHidePos)
              .easing(cc.easeCircleActionOut())
        );
    } else {
        this.closeToLeftNode.runAction(
            cc.moveTo(0.32, this._closeToLeftNodeShowPos)
              .easing(cc.easeCircleActionOut())
       );
    }
    this._isShowed = !this._isShowed;
}

需要特別注意的代碼點是：

 

start() {
    this.closeToLeftNode.getComponent(cc.Widget).updateAlignment();
}

1. 需要在 start 中記錄初始和隱藏位置
2. 如果節點用了 Widget 組件還需要手動調用一次 updateAlignment()

這是因爲我們「內容適配」是在onLoad中設置，子節點的寬高可能會沒有來得及更新，所以不能在onLoad中就記錄子節點的寬高，需要在start生命週期中調用。同樣的因爲上面那段代碼，我們是掛載在子節點更上一層的節點Canvas 上，因此，Canvas 節點上的 start 是會比子節點先調用，但是那時子節點的 Width 還沒有 updateAlignment() ，因此我們需要手動調用一次。

2. 延伸說明

可能並不會所有遊戲都有這類貼邊道具欄隱藏需求，這裏的例子旨在和大家強調一個注意事項：

採用 「重置節點寬高」 的內容適配方案，如果需要實現動作系統，那麼需要考慮節點寬高重置生效的時機。