本系列教程指引：
1. 动画实现
经过上一个章节之后，我们已经可以 「实现多分辨率下贴边道具栏」了，现在我们可以此基础上实现动画效果
- 点击屏幕的时候，隐藏道具栏
- 再次点击屏幕的时候，显示道具栏
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();
}
- 需要在 start 中记录初始和隐藏位置
- 如果节点用了 Widget 组件还需要手动调用一次
updateAlignment()
这是因为我们「内容适配」是在onLoad中设置，子节点的宽高可能会没有来得及更新，所以不能在onLoad中就记录子节点的宽高，需要在start生命周期中调用。同样的因为上面那段代码，我们是挂载在子节点更上一层的节点Canvas 上，因此，Canvas 节点上的 start 是会比子节点先调用，但是那时子节点的 Width 还没有 updateAlignment() ，因此我们需要手动调用一次。
2. 延伸说明
可能并不会所有游戏都有这类贴边道具栏隐藏需求，这里的例子旨在和大家强调一个注意事项：
采用 「重置节点宽高」 的内容适配方案，如果需要实现动作系统，那么需要考虑节点宽高重置生效的时机。
3. 进入下一章节
至此，我们的「贴边栏动画实现」基本告一段落了。如果文章有描述不清楚的或者错漏之处，欢迎留言或者指正或者赞赏。
pay.png
本系列教程指引：
