feat(界面动画): 为任务卡片添加显示和选中动画效果
添加卡片显示时的渐入动画和选中时的缩放动画,提升用户体验。包括: - 卡片首次显示时依次渐入 - 选中卡片时未选中卡片缩小消失 - 选中标记添加弹性动画 - 选中卡片添加轻微弹跳效果
This commit is contained in:
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user