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