refactor(map): 将新手指引动画从抖动改为缩放脉动

1. 替换原有的角度抖动动画为缩放脉动效果,调整了动画时长与参数
2. 统一重构了MissionCardComp和MissionHomeComp中的指引相关代码
3. 修正了代码中的空格、命名等格式问题
This commit is contained in:
pan
2026-08-07 15:13:50 +08:00
parent 542c746847
commit bcc57de312
2 changed files with 74 additions and 75 deletions

View File

@@ -226,8 +226,8 @@ export class MissionCardComp extends CCComp {
// ======================== 新手按钮指引 ========================
/** 新手按钮指引抖动最大角度(度) */
private static readonly BUTTON_GUIDE_SHAKE_ANGLE: number = 10;
/** 新手按钮指引脉动放大倍率 */
private static readonly BUTTON_GUIDE_PULSE_SCALE: number = 1.15;
/** 新手按钮指引每步时长(秒) */
private static readonly BUTTON_GUIDE_STEP_DURATION: number = 4.2;
/** 新手按钮指引气泡停留时长(秒) */
@@ -743,7 +743,7 @@ export class MissionCardComp extends CCComp {
this.updatePanelButtonsInteractable();
}
// 英雄登场后同步英雄信息盒
this.refreshHeroBoxSlots();
@@ -929,7 +929,7 @@ export class MissionCardComp extends CCComp {
/**
* 启动新手按钮指引:依次指引 英雄→装备→技能→药品 四个面板按钮。
* 每步播放 bg/icon 循环动 + smalltip 气泡文案,
* 每步播放 bg/icon 循环缩放脉动 + smalltip 气泡文案,
* 已完成的步骤smc.data.tip_done 对应键为 true自动跳过仅提醒 1 次。
*/
private playButtonGuide() {
@@ -960,11 +960,11 @@ export class MissionCardComp extends CCComp {
if (!step) return;
const btn = step.getBtn();
if (btn && btn.isValid) {
this.playGuideShake(btn, true);
this.playGuidePulse(btn, true);
this.showGuideTip(btn, step.text);
}
this.scheduleOnce(() => {
this.stopGuideShake(btn);
this.stopGuidePulse(btn);
// 本步提醒完成:记录完成标记(即使中止也只标记已播完的步骤)
smc.data.tip_done[step.key] = true;
this.nextButtonGuideStep();
@@ -980,12 +980,12 @@ export class MissionCardComp extends CCComp {
/**
* 中止指引(任务结束 / 组件销毁时调用):
* 停止所有动动画、还原气泡文案并隐藏气泡。
* 停止所有缩放脉动动画、还原气泡文案并隐藏气泡。
*/
private stopButtonGuide() {
if (this.guideStepIndex < 0 && this.guideTipTextCache.size === 0) return;
for (const step of this.guideSteps) {
this.stopGuideShake(step.getBtn());
this.stopGuidePulse(step.getBtn());
}
this.restoreGuideTipTexts();
this.guideStepIndex = -1;
@@ -1005,39 +1005,38 @@ export class MissionCardComp extends CCComp {
}
/**
* 对按钮 bg/icon 子节点播放循环动动画。
* 使用 angle 往复 tween不修改 position避免与 Widget 布局冲突。
* 对按钮 bg/icon 子节点播放循环缩放脉动动画。
* 使用 scale 往复 tween不修改 position避免与 Widget 布局冲突。
* @param btn 面板按钮节点(内部含 bg/icon 子节点)
* @param repeat 是否无限循环true = 循环动)
* @param repeat 是否无限循环true = 循环动)
*/
private playGuideShake(btn: Node, repeat: boolean) {
const angle = MissionCardComp.BUTTON_GUIDE_SHAKE_ANGLE;
private playGuidePulse(btn: Node, repeat: boolean) {
const pulseScale = MissionCardComp.BUTTON_GUIDE_PULSE_SCALE;
for (const name of ["bg", "icon"]) {
const child = btn.getChildByName(name);
if (!child || !child.isValid) continue;
Tween.stopAllByTarget(child);
child.angle = 0;
// 单轮动约 0.94s含间歇节奏放慢避免高频晃动过刺眼
let t = tween(child)
.to(0.15, { angle: angle })
.to(0.3, { angle: -angle })
.to(0.15, { angle: 0 })
.delay(0.34);
child.setScale(1, 1, 1);
// 单轮动约 0.6s持续闪动与气泡停留节奏一致
const pulseTween = tween(child)
.to(0.3, { scale: new Vec3(pulseScale, pulseScale, 1) }, { easing: 'sineInOut' })
.to(0.3, { scale: new Vec3(1, 1, 1) }, { easing: 'sineInOut' });
if (repeat) {
t = t.repeatForever();
tween(child).repeatForever(pulseTween).start();
} else {
pulseTween.start();
}
t.start();
}
}
/** 停止按钮 bg/icon 动并复位角度 */
private stopGuideShake(btn: Node | null) {
/** 停止按钮 bg/icon 缩放脉动并复位缩放 */
private stopGuidePulse(btn: Node | null) {
if (!btn || !btn.isValid) return;
for (const name of ["bg", "icon"]) {
const child = btn.getChildByName(name);
if (!child || !child.isValid) continue;
Tween.stopAllByTarget(child);
child.angle = 0;
child.setScale(1, 1, 1);
}
}