【HarmonyOS】自定义圆点进度条

@Entry@Componentstruct Page03 {  @State value: number = 70 //实际进度，单位%  @State valueAnim: number = 10 //动画进度，单位%  progressId: number = 0
  aboutToAppear(): void {    this.progressId = setInterval(() => {      if (this.value > this.valueAnim) {        this.valueAnim += 1      } else if (this.value < this.valueAnim) {        this.valueAnim -= 1      }    }, 10)  }
  aboutToDisappear(): void {    clearInterval(this.progressId)  }
  build() {    Column() {      Button('设置为0%').onClick(() => {        this.value = 0      })      Button('设置为50%').onClick(() => {        this.value = 50      })      Button('设置为68%').onClick(() => {        this.value = 68      })      Button('设置为100%').onClick(() => {        this.value = 100      })      Stack() {
        // Image() //这里展示向内渐变的圆形图片做北京
        Text(`${this.valueAnim}%`) //这里展示进度
        Text('本月任务进度').fontSize('15lpx').margin({ top: '100lpx' })
        Progress({ value: this.valueAnim, total: 100, type: ProgressType.Ring })          .width('200lpx').color(Color.Orange)          .style({ strokeWidth: 5, shadow: false ,enableSmoothEffect:false}) //这里系统进度条，可以实现无圆点进度
        Text().width('50lpx') //重点来了，这里的图片是一个png,但只有正上方有一个白芯的圆点，然后根据进度计算角度把图片进行旋转，也就是Image().rotate(根据进度计算角度哈)        Stack() {          Text()            .backgroundColor(Color.White)            .borderColor(Color.Orange)            .borderWidth(5)            .width('27lpx')            .height('27lpx')            .borderRadius('50lpx')        }.width('220lpx').height('220lpx').align(Alignment.Top).rotate({angle:this.valueAnim / 100 * 360})      }.width('300lpx').height('300lpx').backgroundColor(Color.Pink)    }    .height('100%')    .width('100%')  }}