HarmonyOS Progress UI控件的进度控制

@Entry  
@Component  
struct Index {  
  @State message: string = 'Hello World';  
  
  @State progressValue: number = 100;  
  // 环形进度条颜色  
  @State progressColor: Color = Color.Grey;  
  
  @State isSmooth: boolean = true;  
  
  @State durationTime: number = 2000;  
  
  build() {  
    Column() {  
      Progress({  
        value: 0, // 设置当前进度  
        total: 100, // 设置进度总量  
        type: ProgressType.Ring      // 设置进度条的样式为环形样式  
      })  
        .style({ strokeWidth: 6, enableSmoothEffect: this.isSmooth })  
        .size({ width: 200, height: 200 })  
        .color(this.progressColor)  
        .animatableProgressValue(this.progressValue)  
        .animation({ duration: this.durationTime, curve: "Linear" })  
        .rotate({ x: 0, y: 0, z: 1, angle: 180 })  
  
      // 测试动画效果  
      Button("动画开启")  
        .width(300)  
        .height(50)  
        .onClick(() => {  
          this.progressColor = Color.Blue  
          this.progressValue = this.progressValue == 100 ? 0 : 100;  
          this.durationTime = this.durationTime == 2000 ? 0 : 2000;  
          this.isSmooth = !this.isSmooth;  
        })  
    }  
  }  
}  
  
@AnimatableExtend(Progress) function animatableProgressValue(progressVal: number) {  
  .value(progressVal) // 调用系统属性接口  
}