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

@@ -39,34 +39,34 @@ const { ccclass, property } = _decorator;
export class MissionHomeComp extends CCComp {
/** 调试日志开关 */
debugMode: boolean = false;
/** 开始游戏按钮节点(预留) */
/** 开始游戏按钮节点(预留) */
@property(Node)
start_btn=null!
start_btn = null!
/** 主页按钮节点(预留) */
@property(Node)
home_btn=null!
home_btn = null!
/** 英雄图鉴按钮节点(预留) */
@property(Node)
hero_btn=null!
hero_btn = null!
/** 排行榜按钮节点 */
@property(Node)
rank_btn=null!
rank_btn = null!
/** 天赋按钮节点 */
@property(Node)
tals_btn=null!
tals_btn = null!
@property(Node)
heros_page=null!
@property(Node)
talents_page=null!
@property(Node)
ranks_page=null!
// ======================== 新手指引(开始按钮抖动 + 气泡) ========================
@property(Node)
heros_page = null!
@property(Node)
talents_page = null!
@property(Node)
ranks_page = null!
/** 抖动最大角度(度) */
private static readonly SHAKE_ANGLE: number = 10;
// ======================== 新手指引(开始按钮缩放脉动 + 气泡) ========================
/** 脉动放大倍率 */
private static readonly PULSE_SCALE: number = 1.15;
/** 气泡文案 */
private static readonly TIP_TEXT: string = "点击开始游戏";
/** 气泡弹出/停留/收起节奏(秒) */
@@ -77,29 +77,29 @@ export class MissionHomeComp extends CCComp {
/** 气泡原文缓存(指引结束后还原) */
private guideTipOriginText: string = "";
/** 注册任务结束事件 */
protected onLoad(): void {
this.on(GameEvent.MissionEnd,this.mission_end,this)
this.on(GameEvent.MissionEnd, this.mission_end, this)
}
/** 启动时显示主页 */
start() {
this.home_active()
// 新玩家start_btn 动 + smalltip 气泡引导点击开始(仅 1 次)
// 新玩家start_btn 缩放脉动 + smalltip 气泡引导点击开始(仅 1 次)
if (!smc.data.tip_done.start) {
this.playStartGuide();
}
}
onEnable(){
onEnable() {
}
update(dt:number){
update(dt: number) {
}
/**
* 开始任务:
* 1. 打印日志。
@@ -110,12 +110,12 @@ export class MissionHomeComp extends CCComp {
start_mission() {
mLogger.log(this.debugMode, 'MissionHomeComp', "start_mission")
// 点击开始后完成指引:停止动/气泡并记录完成标记
// 点击开始后完成指引:停止缩放脉动/气泡并记录完成标记
this.stopStartGuide();
smc.data.tip_done.start = true;
oops.gui.open(UIID.Mission)
this.node.active=false;
this.node.active = false;
// 隐藏 mapLayer 下的 main 节点
@@ -124,24 +124,24 @@ export class MissionHomeComp extends CCComp {
// ======================== 新手指引实现 ========================
/** 启动指引button 子节点循环动 + smalltip 气泡弹出 */
/** 启动指引button 子节点循环缩放脉动 + smalltip 气泡弹出 */
private playStartGuide() {
const btn = this.start_btn;
if (!btn || !btn.isValid) return;
if (this.guiding) return;
this.guiding = true;
// start_btn 下名为 "Button" 的子节点循环抖动angle 往复,不触碰 position避免与布局冲突
const shakeNode = this.getShakeNode();
if (shakeNode) {
Tween.stopAllByTarget(shakeNode);
shakeNode.angle = 0;
tween(shakeNode)
.to(0.15, { angle: MissionHomeComp.SHAKE_ANGLE })
.to(0.3, { angle: -MissionHomeComp.SHAKE_ANGLE })
.to(0.15, { angle: 0 })
.delay(0.34)
.repeatForever()
// start_btn 下名为 "Button" 的子节点循环缩放脉动scale 往复,不触碰 position避免与布局冲突
const pulseNode = this.getPulseNode();
if (pulseNode) {
Tween.stopAllByTarget(pulseNode);
pulseNode.setScale(1, 1, 1);
tween(pulseNode)
.repeatForever(
tween(pulseNode)
.to(0.3, { scale: new Vec3(MissionHomeComp.PULSE_SCALE, MissionHomeComp.PULSE_SCALE, 1) }, { easing: 'sineInOut' })
.to(0.3, { scale: new Vec3(1, 1, 1) }, { easing: 'sineInOut' })
)
.start();
}
@@ -163,17 +163,17 @@ export class MissionHomeComp extends CCComp {
}
}
/** 停止指引:动复位、气泡收起并还原原文 */
/** 停止指引:动复位、气泡收起并还原原文 */
private stopStartGuide() {
if (!this.guiding) return;
this.guiding = false;
const btn = this.start_btn;
if (btn && btn.isValid) {
const shakeNode = this.getShakeNode();
if (shakeNode && shakeNode.isValid) {
Tween.stopAllByTarget(shakeNode);
shakeNode.angle = 0;
const pulseNode = this.getPulseNode();
if (pulseNode && pulseNode.isValid) {
Tween.stopAllByTarget(pulseNode);
pulseNode.setScale(1, 1, 1);
}
const tip = btn.getChildByName("smalltip");
if (tip && tip.isValid) {
@@ -186,10 +186,10 @@ export class MissionHomeComp extends CCComp {
}
/**
* 获取 start_btn 下名为 "Button" 的子节点(即要动的节点)。
* 获取 start_btn 下名为 "Button" 的子节点(即要播放缩放脉动的节点)。
* @returns Button 子节点;未找到返回 null
*/
private getShakeNode(): Node | null {
private getPulseNode(): Node | null {
const btn = this.start_btn;
if (!btn || !btn.isValid) return null;
const node = btn.getChildByName("Button");
@@ -234,25 +234,25 @@ export class MissionHomeComp extends CCComp {
this.showPage(this.talents_page)
}
/** 任务结束回调:重新显示主页 */
mission_end(){
mission_end() {
mLogger.log(this.debugMode, 'MissionHomeComp', "[MissionHomeComp]=>mission_end")
this.home_active()
}
/** 激活主页显示:刷新数据并显示节点 */
home_active(){
home_active() {
// 任务结束回到主页:确保指引动画与气泡无残留
this.stopStartGuide();
this.uodate_data()
this.hideAllPages()
this.node.active=true
this.node.active = true
// 播放主页背景音乐,恢复默认音量
oops.audio.volumeMusic = 1.0;
oops.audio.playerMusicLoop("music/home")
}
/** 更新主页显示数据(预留) */
uodate_data(){
uodate_data() {
}
@@ -260,10 +260,10 @@ export class MissionHomeComp extends CCComp {
* 判断是否运行在微信小游戏环境。
* @returns true = 微信小游戏环境
*/
isWxClient(){
isWxClient() {
return typeof wx !== 'undefined' && typeof (wx as any).getSystemInfoSync === 'function';
}
/** ECS 组件移除时销毁节点 */
reset() {