41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
|
import { _decorator, Component, Sprite, tween } from 'cc';
|
|||
|
|
const { ccclass, property } = _decorator;
|
|||
|
|
|
|||
|
|
@ccclass('CircularProgressBar')
|
|||
|
|
export class CircularProgressBar extends Component {
|
|||
|
|
|
|||
|
|
@property({ type: Sprite })
|
|||
|
|
public progressBar: Sprite | null = null; // 关联的圆形Sprite组件
|
|||
|
|
|
|||
|
|
@property
|
|||
|
|
public progressDuration: number = 2.0; // 进度条完成的时间
|
|||
|
|
|
|||
|
|
@property
|
|||
|
|
public startProgress: number = 0; // 起始进度(0.0 - 1.0)
|
|||
|
|
|
|||
|
|
@property
|
|||
|
|
public endProgress: number = 1; // 最终进度(0.0 - 1.0)
|
|||
|
|
|
|||
|
|
start() {
|
|||
|
|
// 初始化进度条的填充类型为圆形
|
|||
|
|
if (this.progressBar) {
|
|||
|
|
this.progressBar.type = Sprite.Type.FILLED;
|
|||
|
|
this.progressBar.fillType = Sprite.FillType.RADIAL;
|
|||
|
|
this.progressBar.fillStart = 0; // 从顶部开始（0°）
|
|||
|
|
this.progressBar.fillRange = this.startProgress; // 初始进度
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 开始动画来更新进度
|
|||
|
|
//this.updateProgressBar();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
public updateProgressBar() {
|
|||
|
|
if (this.progressBar) {
|
|||
|
|
// 使用 tween 从 startProgress 到 endProgress 来控制进度条
|
|||
|
|
tween(this.progressBar)
|
|||
|
|
.to(this.progressDuration, { fillRange: this.endProgress }) // 填充范围从 0 到 1
|
|||
|
|
.start();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|