101 lines
3.3 KiB
TypeScript
101 lines
3.3 KiB
TypeScript
|
import { _decorator, Component, Node, EventTouch, tween, Vec3, UIOpacity, Color, Sprite, Label } from 'cc';
|
|||
|
|
const { ccclass, property } = _decorator;
|
|||
|
|
|
|||
|
|
@ccclass('ClickEffect')
|
|||
|
|
export class ClickEffect extends Component {
|
|||
|
|
|
|||
|
|
@property
|
|||
|
|
public enableOpacityEffect: boolean = true; // 控制透明度效果的开关
|
|||
|
|
|
|||
|
|
private isClicked: boolean = false; // 点击后锁定状态
|
|||
|
|
|
|||
|
|
start() {
|
|||
|
|
// 为节点添加触摸事件监听器
|
|||
|
|
this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
|
|||
|
|
this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
|
|||
|
|
this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
|
|||
|
|
|
|||
|
|
// 初始化节点的透明度组件
|
|||
|
|
if (!this.node.getComponent(UIOpacity)) {
|
|||
|
|
this.node.addComponent(UIOpacity);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onTouchStart(event: EventTouch) {
|
|||
|
|
if (this.isClicked) return; // 如果已经点击，不执行
|
|||
|
|
|
|||
|
|
// 点击时缩小节点
|
|||
|
|
tween(this.node)
|
|||
|
|
.to(0.1, { scale: new Vec3(0.9, 0.9, 0.9) })
|
|||
|
|
.start();
|
|||
|
|
|
|||
|
|
// 仅在启用透明度效果时才进行透明度变化
|
|||
|
|
if (this.enableOpacityEffect) {
|
|||
|
|
// 更强烈的淡入效果，将透明度设置为 150（部分透明）
|
|||
|
|
tween(this.node.getComponent(UIOpacity))
|
|||
|
|
.to(0.1, { opacity: 150 })
|
|||
|
|
.start();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onTouchEnd(event: EventTouch) {
|
|||
|
|
if (this.isClicked) return; // 如果已经点击，不执行
|
|||
|
|
|
|||
|
|
// 还原节点大小
|
|||
|
|
tween(this.node)
|
|||
|
|
.to(0.1, { scale: new Vec3(1, 1, 1) })
|
|||
|
|
.start();
|
|||
|
|
|
|||
|
|
// 仅在启用透明度效果时才恢复透明度
|
|||
|
|
if (this.enableOpacityEffect) {
|
|||
|
|
// 强烈的淡出效果，透明度还原为 255（完全不透明）
|
|||
|
|
tween(this.node.getComponent(UIOpacity))
|
|||
|
|
.to(0.1, { opacity: 255 })
|
|||
|
|
.start();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取 Sprite 组件并将节点变为灰色
|
|||
|
|
const sprite = this.node.getComponent(Sprite);
|
|||
|
|
if (sprite) {
|
|||
|
|
sprite.color = new Color(128, 128, 128); // 设置节点为灰色
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 修改节点的 Label 文字为 "已领取"
|
|||
|
|
const labelNode = this.node.getChildByName("Label");
|
|||
|
|
if (labelNode) {
|
|||
|
|
const label = labelNode.getComponent(Label);
|
|||
|
|
if (label) {
|
|||
|
|
label.string = "已领取";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置为已点击状态，防止重复点击
|
|||
|
|
this.isClicked = true;
|
|||
|
|
|
|||
|
|
console.log('节点被点击了，已领取');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onTouchCancel(event: EventTouch) {
|
|||
|
|
if (this.isClicked) return; // 如果已经点击，不执行
|
|||
|
|
|
|||
|
|
// 当触摸被取消时，恢复大小
|
|||
|
|
tween(this.node)
|
|||
|
|
.to(0.1, { scale: new Vec3(1, 1, 1) })
|
|||
|
|
.start();
|
|||
|
|
|
|||
|
|
// 仅在启用透明度效果时才恢复透明度
|
|||
|
|
if (this.enableOpacityEffect) {
|
|||
|
|
tween(this.node.getComponent(UIOpacity))
|
|||
|
|
.to(0.1, { opacity: 255 })
|
|||
|
|
.start();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onDestroy() {
|
|||
|
|
// 移除事件监听，防止内存泄漏
|
|||
|
|
this.node.off(Node.EventType.TOUCH_START, this.onTouchStart, this);
|
|||
|
|
this.node.off(Node.EventType.TOUCH_END, this.onTouchEnd, this);
|
|||
|
|
this.node.off(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
|
|||
|
|
}
|
|||
|
|
}
|