83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
const { ccclass, property } = cc._decorator;
|
|
|
|
@ccclass
|
|
export default class RippleShrink extends cc.Component {
|
|
@property(cc.Sprite)
|
|
targetSprite: cc.Sprite = null!; // 拖自己的 Sprite
|
|
|
|
private mat: cc.Material = null!;
|
|
private running = false;
|
|
private totalTime = 0;
|
|
private timer = 0;
|
|
private interval = 0.2; // 间隔时间0.2秒
|
|
private shouldShow = false; // 标记是否应该显示和运行动画
|
|
|
|
onLoad() {
|
|
const shared = this.targetSprite.getMaterial(0);
|
|
this.mat = shared;
|
|
this.mat.setProperty('time', 0);
|
|
|
|
// 设置中心点为纹理中心
|
|
this.mat.setProperty('center', [0.5, 0.5]);
|
|
|
|
// 初始化时隐藏节点
|
|
this.node.active = false;
|
|
}
|
|
|
|
// 开始涟漪效果
|
|
startRipple() {
|
|
this.shouldShow = true;
|
|
this.node.active = true;
|
|
}
|
|
|
|
// 停止涟漪效果
|
|
stopRipple() {
|
|
this.shouldShow = false;
|
|
}
|
|
|
|
// 触发波纹效果的方法
|
|
triggerRipple() {
|
|
// 使用纹理中心作为波纹起始点
|
|
this.mat.setProperty('center', [0.5, 0.5]);
|
|
this.totalTime = 0;
|
|
this.running = true;
|
|
}
|
|
|
|
update(dt: number) {
|
|
if (!this.shouldShow && !this.running) {
|
|
// 如果不需要显示且当前没有运行中的动画，则隐藏节点
|
|
if (this.node.active) {
|
|
this.node.active = false;
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (!this.running) {
|
|
// 不在运行状态下，计算间隔时间
|
|
this.timer += dt;
|
|
if (this.timer >= this.interval) {
|
|
if (this.shouldShow) {
|
|
this.triggerRipple();
|
|
}
|
|
this.timer = 0; // 重置计时器
|
|
}
|
|
return;
|
|
}
|
|
|
|
this.totalTime += dt;
|
|
this.mat.setProperty('time', this.totalTime);
|
|
|
|
// 当波纹效果完成时
|
|
if (this.totalTime > 2.0) {
|
|
this.running = false;
|
|
// 重置计时器，准备下次执行
|
|
this.timer = 0;
|
|
|
|
// 如果已经要求停止，则隐藏节点
|
|
if (!this.shouldShow) {
|
|
this.node.active = false;
|
|
}
|
|
}
|
|
}
|
|
}
|