Files
pixelheros/assets/script/game/map/MissionCardComp.ts
walkpan fe64f5bc87 feat(界面动画): 为任务卡片添加显示和选中动画效果
添加卡片显示时的渐入动画和选中时的缩放动画,提升用户体验。包括:
- 卡片首次显示时依次渐入
- 选中卡片时未选中卡片缩小消失
- 选中标记添加弹性动画
- 选中卡片添加轻微弹跳效果
2026-01-04 23:45:17 +08:00

223 lines
7.2 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import { _decorator, Label, Node, tween, Vec3 } from "cc";
import { ecs } from "../../../../extensions/oops-plugin-framework/assets/libs/ecs/ECS";
import { CCComp } from "../../../../extensions/oops-plugin-framework/assets/module/common/CCComp";
import { oops } from "../../../../extensions/oops-plugin-framework/assets/core/Oops";
import { GameEvent } from "../common/config/GameEvent";
import { talConf, ItalConf } from "../common/config/TalSet";
const { ccclass, property } = _decorator;
export enum CardType {
Talent = 1,
Skill = 2,
Potion = 3
}
/** 视图层对象 */
@ccclass('MissionCardComp')
@ecs.register('MissionCard', false)
export class MissionCardComp extends CCComp {
/** 视图层逻辑代码分离演示 */
@property(Node)
card1:Node = null!
@property(Node)
card2:Node = null!
@property(Node)
card3:Node = null!
@property(Node)
card4:Node = null!
card1_data:any = null!
card2_data:any = null!
card3_data:any = null!
card4_data:any = null!
// 当前卡片类型
curCardType: CardType = CardType.Talent;
onLoad() {
oops.message.on(GameEvent.TalentSelect, this.onTalentSelect, this);
}
onDestroy() {
oops.message.off(GameEvent.TalentSelect, this.onTalentSelect, this);
this.ent.destroy();
}
start() {
// 初始隐藏或显示逻辑
this.node.active = false;
this.resetCardStates();
}
private resetCardStates() {
const cards = [this.card1, this.card2, this.card3, this.card4];
cards.forEach(card => {
if (card) {
const selected = card.getChildByName("selected");
if (selected) selected.active = false;
}
});
}
// 是否已经选择了天赋
private hasSelected: boolean = false;
private onTalentSelect(event: string, args: any) {
this.node.active = true;
this.hasSelected = false; // 重置选择状态
this.curCardType = CardType.Talent; // 记录当前类型为天赋
this.resetCardStates(); // 每次刷新前重置卡片状态
this.refCards();
this.playShowAnimation();
}
private playShowAnimation() {
const cards = [this.card1, this.card2, this.card3, this.card4];
cards.forEach((card, index) => {
if (card) {
card.setScale(Vec3.ZERO);
tween(card)
.delay(index * 0.1)
.to(0.4, { scale: new Vec3(1, 1, 1) }, { easing: 'backOut' })
.start();
}
});
}
refCards(){
// 根据当前类型获取数据
let allData: any[] = [];
if (this.curCardType === CardType.Talent) {
allData = Object.values(talConf);
}
// 后续扩展其他类型
// else if (this.curCardType === CardType.Skill) { ... }
const result: any[] = [];
const temp = [...allData];
// 简单的随机抽取算法
for (let i = 0; i < 4 && temp.length > 0; i++) {
const index = Math.floor(Math.random() * temp.length);
result.push(temp[index]);
temp.splice(index, 1);
}
// 更新卡片
if (result.length > 0) this.updateCardData(1, result[0]);
if (result.length > 1) this.updateCardData(2, result[1]);
if (result.length > 2) this.updateCardData(3, result[2]);
if (result.length > 3) this.updateCardData(4, result[3]);
}
updateCardInfo(card:Node, data:any){
if(!card) return
card.active = true;
// 隐藏选中状态
const selected = card.getChildByName("selected");
if(selected) selected.active = false;
let name = card.getChildByName("name")
if(name){
name.getComponent(Label)!.string = data.name
}
let info = card.getChildByName("info")?.getChildByName("Label")
if(info){
// 根据类型显示不同描述目前天赋用desc
info.getComponent(Label)!.string = data.desc || "";
}
}
updateCardData(index:number, data:any){
switch (index) {
case 1:
this.card1_data = data
this.updateCardInfo(this.card1, data);
break;
case 2:
this.card2_data = data
this.updateCardInfo(this.card2, data);
break;
case 3:
this.card3_data = data
this.updateCardInfo(this.card3, data);
break;
case 4:
this.card4_data = data
this.updateCardInfo(this.card4, data);
break;
}
}
selectCard(e:any,index:string){
console.log("selectCard",index)
let _index = parseInt(index);
// 如果已经选择过,则不再处理
if(this.hasSelected) return;
let selectedData: any = null;
let selectedCardNode: Node | null = null;
switch (_index) {
case 1:
selectedData = this.card1_data;
selectedCardNode = this.card1;
break;
case 2:
selectedData = this.card2_data;
selectedCardNode = this.card2;
break;
case 3:
selectedData = this.card3_data;
selectedCardNode = this.card3;
break;
case 4:
selectedData = this.card4_data;
selectedCardNode = this.card4;
break;
}
if (selectedData && selectedCardNode) {
this.hasSelected = true;
console.log("选择卡片:", selectedData.name, "类型:", this.curCardType);
// 未选中的卡片缩小
const cards = [this.card1, this.card2, this.card3, this.card4];
cards.forEach(card => {
if (card && card !== selectedCardNode) {
tween(card).to(0.2, { scale: Vec3.ZERO }).start();
}
});
// 显示当前选中的 selected 节点
const selected = selectedCardNode.getChildByName("selected");
if(selected) {
selected.active = true;
selected.setScale(Vec3.ZERO);
tween(selected).to(0.2, { scale: new Vec3(1, 1, 1) }, { easing: 'backOut' }).start();
}
// 选中卡片动效后触发逻辑
tween(selectedCardNode)
.to(0.1, { scale: new Vec3(1.1, 1.1, 1.1) })
.to(0.1, { scale: new Vec3(1, 1, 1) })
.delay(0.5)
.call(() => {
// 根据类型发送不同事件
if (this.curCardType === CardType.Talent) {
oops.message.dispatchEvent(GameEvent.UseTalentCard, selectedData.uuid);
}
// 后续扩展其他类型事件
this.node.active = false;
})
.start();
}
}
/** 视图对象通过 ecs.Entity.remove(ModuleViewComp) 删除组件是触发组件处理自定义释放逻辑 */
reset() {
this.node.destroy();
}
}