Cocos Creator 多分辨率完美适配系列-5（贴边栏动画实现）

本系列教程指引：

1. Cocos Creator 多分辨率完美适配系列-1（现状与最终效果）
2. Cocos Creator 多分辨率完美适配系列-2（部署验证设置）
3. Cocos Creator 多分辨率完美适配系列-3（背景适配实现）
4. Cocos Creator 多分辨率完美适配系列-4（内容适配实现）
5. Cocos Creator 多分辨率完美适配系列-5（贴边栏动画实现）
6. Cocos Creator 多分辨率完美适配系列-6（刘海屏适配）
7. Cocos Creator 多分辨率完美适配系列-7（封装库使用）

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. 延伸说明

可能并不会所有游戏都有这类贴边道具栏隐藏需求，这里的例子旨在和大家强调一个注意事项：

采用 「重置节点宽高」 的内容适配方案，如果需要实现动作系统，那么需要考虑节点宽高重置生效的时机。

3. 进入下一章节

至此，我们的「贴边栏动画实现」基本告一段落了。如果文章有描述不清楚的或者错漏之处，欢迎留言或者指正或者赞赏。

pay.png

本系列教程指引：

1. Cocos Creator 多分辨率完美适配系列-1（现状与最终效果）
2. Cocos Creator 多分辨率完美适配系列-2（部署验证设置）
3. Cocos Creator 多分辨率完美适配系列-3（背景适配实现）
4. Cocos Creator 多分辨率完美适配系列-4（内容适配实现）
5. Cocos Creator 多分辨率完美适配系列-5（贴边栏动画实现）
6. Cocos Creator 多分辨率完美适配系列-6（刘海屏适配）
7. Cocos Creator 多分辨率完美适配系列-7（封装库使用）