refactor(map): 将新手指引动画从抖动改为缩放脉动
1. 替换原有的角度抖动动画为缩放脉动效果,调整了动画时长与参数 2. 统一重构了MissionCardComp和MissionHomeComp中的指引相关代码 3. 修正了代码中的空格、命名等格式问题
This commit is contained in:
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user