50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
|
import { _decorator, Component, Node, tween, Sprite, UIOpacity } from 'cc';
|
|||
|
|
const { ccclass, property } = _decorator;
|
|||
|
|
|
|||
|
|
@ccclass('FillSpriteEffect')
|
|||
|
|
export class FillSpriteEffect extends Component {
|
|||
|
|
|
|||
|
|
@property
|
|||
|
|
public fillDuration: number = 2; // 控制填充速度，单位为秒
|
|||
|
|
|
|||
|
|
@property
|
|||
|
|
public enableFillEffect: boolean = false; // 控制是否启用图片显示的开关
|
|||
|
|
|
|||
|
|
start() {
|
|||
|
|
// 确保节点有 Sprite 组件
|
|||
|
|
const sprite = this.node.getComponent(Sprite);
|
|||
|
|
const opacity = this.node.getComponent(UIOpacity);
|
|||
|
|
if (sprite && opacity) {
|
|||
|
|
// 设置初始透明度为 0（完全透明）
|
|||
|
|
opacity.opacity = 0;
|
|||
|
|
|
|||
|
|
// 设置填充类型为 HORIZONTAL，从左到右
|
|||
|
|
sprite.type = Sprite.Type.FILLED;
|
|||
|
|
sprite.fillType = Sprite.FillType.HORIZONTAL;
|
|||
|
|
sprite.fillStart = 0; // 填充起点设为 0
|
|||
|
|
sprite.fillRange = 0; // 初始状态 fillRange 为 0，表示完全不显示
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 触发效果的方法，可以在外部调用这个方法
|
|||
|
|
public triggerFillEffect() {
|
|||
|
|
if (this.enableFillEffect) {
|
|||
|
|
// 确保节点有 Sprite 和 UIOpacity 组件
|
|||
|
|
const sprite = this.node.getComponent(Sprite);
|
|||
|
|
const opacity = this.node.getComponent(UIOpacity);
|
|||
|
|
if (sprite && opacity) {
|
|||
|
|
// 先将透明度从 0 变为 255（完全显示）
|
|||
|
|
tween(opacity)
|
|||
|
|
.to(0.5, { opacity: 255 }) // 0.5秒内将透明度提升到 255
|
|||
|
|
.start();
|
|||
|
|
|
|||
|
|
// 然后填充图片，从 0% 到 100%
|
|||
|
|
tween(sprite)
|
|||
|
|
.to(this.fillDuration, { fillRange: 1 }) // fillRange 从 0 变化到 1
|
|||
|
|
.start();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|