【HarmonyOS】自定义圆点进度条

【HarmonyOS】实现一个自定义带圆点的进度条效果。

方案就是做一个圆角组件，然后利用rotate旋转，至于动画效果，我查了一下文档，只要设置enableSmoothEffect:false，就可以关闭动画，然后自己开个定时器，判断实际进度与动画进度的差值每隔10毫秒执行一次就行了。

上面的gif图比较卡是因为录屏转gif掉帧了哈，实际代码执行很流畅。

【代码】

@Entry
@Component
struct 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%')
  }
}