refactor(map): 为技能抽卡添加入场动画效果

1. 新增技能卡入场动画逻辑,实现多张卡牌依次从下方飞入的效果
2. 调整技能抽卡弹窗显示流程,先刷新卡牌数据再播放动画
3. 清理代码中多余的空白行,优化格式整洁度
This commit is contained in:
pan
2026-06-04 17:01:11 +08:00
parent 2c306ff21a
commit 2276ff1fbd

View File

@@ -125,7 +125,7 @@ export class MissionCardComp extends CCComp {
skill_refresh: Node = null!
/**技能广告刷新按钮节点 */
@property(Node)
skill_ad_refresh: Node = null!
skill_ad_refresh: Node = null!
/**可用刷新数显示节点 */
@property(Node)
skill_refresh_num_node: Node = null!
@@ -230,7 +230,7 @@ export class MissionCardComp extends CCComp {
}
const cards = this.buildDrawCards();
this.dispatchCardsToSlots(cards);
const wave = this.getCurrentWave();
if ([1, 5, 10, 15, 20].includes(wave)) {
this.showSkillCardPopup();
@@ -295,7 +295,7 @@ export class MissionCardComp extends CCComp {
this.cards_chou?.on(NodeEventType.TOUCH_START, this.onDrawTouchStart, this);
this.cards_chou?.on(NodeEventType.TOUCH_END, this.onDrawTouchEnd, this);
this.cards_chou?.on(NodeEventType.TOUCH_CANCEL, this.onDrawTouchCancel, this);
/** 技能卡刷新按钮 */
this.skill_refresh?.on(NodeEventType.TOUCH_START, this.onSkillDrawTouchStart, this);
this.skill_refresh?.on(NodeEventType.TOUCH_END, this.onSkillDrawTouchEnd, this);
@@ -375,11 +375,41 @@ export class MissionCardComp extends CCComp {
}
}
/**
* 技能卡入场动画:每个卡槽从场景基准位置下方 80px 处升起,
* 终止位置 = 场景编辑器位置(保持初始不做位移的约束),
* 多张依次错开 staggerDelay 形成"依次飞入"效果。
*/
private readonly skillEnterOffsetY: number = -80;
private readonly skillEnterDuration: number = 0.25;
private readonly skillEnterStagger: number = 0.08;
private playSkillCardEnterAnim() {
if (!this.skillCardComps || this.skillCardComps.length === 0) return;
for (let i = 0; i < this.skillCardComps.length; i++) {
const comp = this.skillCardComps[i];
if (!comp) continue;
const node = comp.node;
if (!node || !node.isValid) continue;
// 缓存场景编辑器位置作为动画终止点(初始不做位移)
const basePos = node.getPosition();
// 起始位置 = 基准位置下移 80px
node.setPosition(basePos.x, basePos.y + this.skillEnterOffsetY, basePos.z);
Tween.stopAllByTarget(node);
tween(node)
.delay(i * this.skillEnterStagger)
.to(this.skillEnterDuration, { position: basePos }, { easing: 'quadOut' })
.start();
}
}
private showSkillCardPopup() {
if (!this.skill_card_node) return;
this.skill_card_node.active = true;
// 先分发卡牌数据(让卡面内容就绪),再做入场动画
const cards = this.buildSkillDrawCards();
this.dispatchCardsToSkillSlots(cards);
this.playSkillCardEnterAnim();
}
private dispatchCardsToSkillSlots(cards: CardConfig[]) {
@@ -578,7 +608,7 @@ export class MissionCardComp extends CCComp {
private onDrawTouchCancel() {
this.playButtonResetAnim(this.cards_chou);
}
// ======================== 技能抽卡按钮回调 ========================
private onSkillDrawTouchStart() {
this.playButtonPressAnim(this.skill_refresh);
@@ -638,7 +668,7 @@ export class MissionCardComp extends CCComp {
this.cardComps = nodes
.map(node => node?.getComponent(CardComp))
.filter((comp): comp is CardComp => !!comp);
const skillNodes = [this.skill_card1, this.skill_card2, this.skill_card3];
this.skillCardComps = skillNodes
.map(node => node?.getComponent(CardComp))
@@ -954,7 +984,7 @@ export class MissionCardComp extends CCComp {
numLabel.string = `${MissionEconomy.getRefreshCost(this.refreshCost)}`;
}
}
if (this.skill_refresh) {
const nobg = this.skill_refresh.getChildByName("nobg");
if (nobg) {