HarmonyOS 实现按钮长按动画效果？

Question

怎么实现一个按钮长按+动画效果

Answer 1

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

// 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 })
  }
}