feat(map): add mission card panel show/hide logic

- add constant configs for card panel animation and positions
- add showCards and closeCards click event listeners and cleanup
- implement onShowCardsClick and onCloseCardsClick methods with slide animation
- fix panel node array order and update related comments
- enable card panel by default when entering prepare phase
This commit is contained in:
panFD
2026-07-25 22:30:35 +08:00
parent 4ef2e13798
commit 40723174c9
2 changed files with 2598 additions and 5104 deletions

View File

@@ -225,6 +225,13 @@ export class MissionCardComp extends CCComp {
*/
private upgradeRotationIndex: number = 0;
/** 卡牌面板显示位置 Y 坐标 */
private readonly cardPanelShowY: number = 0;
/** 卡牌面板隐藏位置 Y 坐标(向下 700 */
private readonly cardPanelHideY: number = -700;
/** 卡牌面板显示/隐藏动画时长 */
private readonly cardPanelAnimDuration: number = 0.25;
// ======================== 生命周期 ========================
/**
@@ -257,6 +264,12 @@ export class MissionCardComp extends CCComp {
if (this.showHeros && this.showHeros.isValid) {
this.showHeros.off(NodeEventType.TOUCH_END, this.onShowHerosClick, this);
}
if (this.showCards && this.showCards.isValid) {
this.showCards.off(NodeEventType.TOUCH_END, this.onShowCardsClick, this);
}
if (this.closeCards && this.closeCards.isValid) {
this.closeCards.off(NodeEventType.TOUCH_END, this.onCloseCardsClick, this);
}
if (this.showEquips && this.showEquips.isValid) {
this.showEquips.off(NodeEventType.TOUCH_END, this.onShowEquipsClick, this);
}
@@ -387,6 +400,11 @@ export class MissionCardComp extends CCComp {
this.cards_chou?.on(NodeEventType.TOUCH_END, this.onDrawTouchEnd, this);
this.cards_chou?.on(NodeEventType.TOUCH_CANCEL, this.onDrawTouchCancel, this);
/** 显示卡牌面板按钮 */
this.showCards?.on(NodeEventType.TOUCH_END, this.onShowCardsClick, this);
/** 隐藏卡牌面板按钮 */
this.closeCards?.on(NodeEventType.TOUCH_END, this.onCloseCardsClick, this);
/** 英雄面板显示按钮 */
this.showHeros?.on(NodeEventType.TOUCH_END, this.onShowHerosClick, this);
@@ -670,6 +688,12 @@ export class MissionCardComp extends CCComp {
if (this.showHeros && this.showHeros.isValid) {
this.showHeros.off(NodeEventType.TOUCH_END, this.onShowHerosClick, this);
}
if (this.showCards && this.showCards.isValid) {
this.showCards.off(NodeEventType.TOUCH_END, this.onShowCardsClick, this);
}
if (this.closeCards && this.closeCards.isValid) {
this.closeCards.off(NodeEventType.TOUCH_END, this.onCloseCardsClick, this);
}
if (this.showEquips && this.showEquips.isValid) {
this.showEquips.off(NodeEventType.TOUCH_END, this.onShowEquipsClick, this);
}
@@ -850,7 +874,7 @@ export class MissionCardComp extends CCComp {
/** 面板节点数组(顺序:英雄→装备→技能→药品) */
private getPanelNodes(): Node[] {
return [this.cards_node, this.equipsPanNode, this.skill_card_node, this.shopPanNode];
return [this.herosPanNode, this.equipsPanNode, this.skillPanNode, this.shopPanNode];
}
/** 面板显示按钮数组(同上排序) */
@@ -959,6 +983,36 @@ export class MissionCardComp extends CCComp {
this.slideToPanel(0);
}
/**
* 显示卡牌面板:从底部向上滑入到 Y=0
*/
private onShowCardsClick() {
oops.audio.playEffect("music/button");
if (!this.cardPanNode || !this.cardPanNode.isValid) return;
this.cardPanNode.active = true;
Tween.stopAllByTarget(this.cardPanNode);
tween(this.cardPanNode)
.to(this.cardPanelAnimDuration, { position: new Vec3(0, this.cardPanelShowY, 0) }, { easing: 'quadOut' })
.start();
}
/**
* 隐藏卡牌面板:向下滑出到 Y=-700
*/
private onCloseCardsClick() {
oops.audio.playEffect("music/button");
if (!this.cardPanNode || !this.cardPanNode.isValid) return;
Tween.stopAllByTarget(this.cardPanNode);
tween(this.cardPanNode)
.to(this.cardPanelAnimDuration, { position: new Vec3(0, this.cardPanelHideY, 0) }, { easing: 'quadIn' })
.call(() => {
if (this.cardPanNode && this.cardPanNode.isValid) {
this.cardPanNode.active = false;
}
})
.start();
}
// ======================== 装备商店面板 ========================
/**
@@ -1192,6 +1246,7 @@ export class MissionCardComp extends CCComp {
* - 初始化面板轮播布局(如尚未初始化)。
* - 滑动到英雄面板index=0作为默认展示。
* - 激活 showHeros 按钮可见性。
* - 显示卡牌面板(从底部滑入)。
*/
private enterPreparePhase() {
if (!this.cards_node || !this.cards_node.isValid) return;
@@ -1210,6 +1265,11 @@ export class MissionCardComp extends CCComp {
nobg.active = !this.canDrawCards();
}
}
// 显示卡牌面板(默认进入准备阶段时展开)
if (this.cardPanNode && this.cardPanNode.isValid) {
this.cardPanNode.active = true;
this.cardPanNode.setPosition(0, this.cardPanelShowY, 0);
}
// 滑动到英雄面板
this.slideToPanel(0);
}