本系列教程指引：
- Cocos Creator 多分辨率完美適配系列-1（現(xiàn)狀與最終效果）
- Cocos Creator 多分辨率完美適配系列-2（部署驗(yàn)證設(shè)置）
- Cocos Creator 多分辨率完美適配系列-3（背景適配實(shí)現(xiàn)）
- Cocos Creator 多分辨率完美適配系列-4（內(nèi)容適配實(shí)現(xiàn)）
- Cocos Creator 多分辨率完美適配系列-5（貼邊欄動(dòng)畫(huà)實(shí)現(xiàn)）
- Cocos Creator 多分辨率完美適配系列-6（劉海屏適配）
- Cocos Creator 多分辨率完美適配系列-7（封裝庫(kù)使用）
1. 動(dòng)畫(huà)實(shí)現(xiàn)
經(jīng)過(guò)上一個(gè)章節(jié)之后距潘，我們已經(jīng)可以 「實(shí)現(xiàn)多分辨率下貼邊道具欄」了讯赏，現(xiàn)在我們可以此基礎(chǔ)上實(shí)現(xiàn)動(dòng)畫(huà)效果
- 點(diǎn)擊屏幕的時(shí)候祭示，隱藏道具欄
- 再次點(diǎn)擊屏幕的時(shí)候蔑赘，顯示道具欄
場(chǎng)景布局比較簡(jiǎn)單腊脱，就是4個(gè)貼邊節(jié)點(diǎn)加Widget，這里就不再貼場(chǎng)景設(shè)置了姑丑，具體場(chǎng)景設(shè)置可以下載項(xiàng)目進(jìn)行預(yù)覽
https://github.com/zhitaocai/CocosCreator-Multi-resolution-Adapter
關(guān)鍵動(dòng)畫(huà)代碼如下：
@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)
);
}
/**
* 屏幕點(diǎn)擊之后出現(xiàn)/隱藏上下左右4個(gè)貼邊道具欄
*/
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;
}
需要特別注意的代碼點(diǎn)是：
start() {
this.closeToLeftNode.getComponent(cc.Widget).updateAlignment();
}
- 需要在 start 中記錄初始和隱藏位置
- 如果節(jié)點(diǎn)用了 Widget 組件還需要手動(dòng)調(diào)用一次
updateAlignment()
這是因?yàn)槲覀儭?a href="http://www.reibang.com/p/738a8f6a2ec1" target="_blank">內(nèi)容適配」是在onLoad中設(shè)置懈万，子節(jié)點(diǎn)的寬高可能會(huì)沒(méi)有來(lái)得及更新，所以不能在onLoad中就記錄子節(jié)點(diǎn)的寬高泻蚊，需要在start生命周期中調(diào)用躲舌。同樣的因?yàn)樯厦婺嵌未a，我們是掛載在子節(jié)點(diǎn)更上一層的節(jié)點(diǎn)Canvas 上性雄，因此没卸，Canvas 節(jié)點(diǎn)上的 start 是會(huì)比子節(jié)點(diǎn)先調(diào)用，但是那時(shí)子節(jié)點(diǎn)的 Width 還沒(méi)有 updateAlignment() 秒旋，因此我們需要手動(dòng)調(diào)用一次约计。
2. 延伸說(shuō)明
可能并不會(huì)所有游戲都有這類(lèi)貼邊道具欄隱藏需求，這里的例子旨在和大家強(qiáng)調(diào)一個(gè)注意事項(xiàng)：
采用 「重置節(jié)點(diǎn)寬高」 的內(nèi)容適配方案迁筛，如果需要實(shí)現(xiàn)動(dòng)作系統(tǒng)煤蚌，那么需要考慮節(jié)點(diǎn)寬高重置生效的時(shí)機(jī)。
3. 進(jìn)入下一章節(jié)
至此细卧，我們的「貼邊欄動(dòng)畫(huà)實(shí)現(xiàn)」基本告一段落了尉桩。如果文章有描述不清楚的或者錯(cuò)漏之處，歡迎留言或者指正或者贊賞贪庙。
本系列教程指引：
- Cocos Creator 多分辨率完美適配系列-1（現(xiàn)狀與最終效果）
- Cocos Creator 多分辨率完美適配系列-2（部署驗(yàn)證設(shè)置）
- Cocos Creator 多分辨率完美適配系列-3（背景適配實(shí)現(xiàn)）
- Cocos Creator 多分辨率完美適配系列-4（內(nèi)容適配實(shí)現(xiàn)）
- Cocos Creator 多分辨率完美適配系列-5（貼邊欄動(dòng)畫(huà)實(shí)現(xiàn)）
- ??Cocos Creator 多分辨率完美適配系列-6（劉海屏適配）
- Cocos Creator 多分辨率完美適配系列-7（封裝庫(kù)使用）
