feat(界面动画): 为任务卡片添加显示和选中动画效果

添加卡片显示时的渐入动画和选中时的缩放动画,提升用户体验。包括:
- 卡片首次显示时依次渐入
- 选中卡片时未选中卡片缩小消失
- 选中标记添加弹性动画
- 选中卡片添加轻微弹跳效果
This commit is contained in:
walkpan
2026-01-04 23:45:17 +08:00
parent 9f3a874cac
commit fe64f5bc87

View File

@@ -1,4 +1,4 @@
import { _decorator, Label, Node } from "cc";
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";
@@ -69,6 +69,20 @@ export class MissionCardComp extends CCComp {
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(){
@@ -169,20 +183,36 @@ export class MissionCardComp extends CCComp {
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;
// 根据类型发送不同事件
if (this.curCardType === CardType.Talent) {
oops.message.dispatchEvent(GameEvent.UseTalentCard, selectedData.uuid);
if(selected) {
selected.active = true;
selected.setScale(Vec3.ZERO);
tween(selected).to(0.2, { scale: new Vec3(1, 1, 1) }, { easing: 'backOut' }).start();
}
// 后续扩展其他类型事件
// 延迟关闭界面,让玩家看到选中效果
this.scheduleOnce(() => {
this.node.active = false;
}, 0.5);
// 选中卡片动效后触发逻辑
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();
}
}