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();
|
||
}
|
||
}
|
||
}
|
||
}
|