HarmonyOS 实现按钮长按动画效果

类似效果可以参考以下代码

// ets
@Entry
@Component
struct Progress_Ring {
  @State progressValue: number = 0
  @State animationId: number | null = null
  build() {
    Column({ space: 15 }) {
      Stack(){
        Progress({ value: 0, total: 100, type: ProgressType.Ring })
          .color("red")
          .value(this.progressValue)
          .width(120)
          .style({ strokeWidth: 5, scaleCount: 20, scaleWidth: 5, enableSmoothEffect: true })
          .backgroundColor('#00000000')

        Button('test').gesture(
          LongPressGesture({ repeat: true,duration:10 })
            .onAction((event: GestureEvent|undefined) => {
              if(event && this.progressValue<=100){
                clearInterval(this.animationId)
                this.animationId = null
                this.progressValue ++
              }
            })
            .onActionEnd(() => {
              this.animationId = setInterval(()=>{
                this.progressValue --
                if(this.progressValue <=0){
                  clearInterval(this.animationId)
                }
              },10)
            })
        )
      }

    }.width('100%').padding({ top: 5 })
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.