HarmonyOS 拍摄录制的动画效果

import animator, { AnimatorResult } from '@ohos.animator';

@Entry
@Component
struct Page240522161537042 {
  @State progressValue: number = 0
  private animationPlayState: boolean = false
  private progressAnimator: AnimatorResult | undefined = undefined
  create() {
    let _this = this
    this.progressAnimator = animator.create({
      duration: 60000,
      easing: "linear",
      delay: 0,
      fill: "forwards",
      direction: "normal",
      iterations: 1,
      begin: 0,
      end: 60
    })

    this.progressAnimator.onFinish = () => {
      console.info('backAnimator onfinish')
    }
    this.progressAnimator.onRepeat = () => {
      console.info('backAnimator repeat')
    }
    this.progressAnimator.onCancel = () => {
      console.info('backAnimator cancel')
    }
    this.progressAnimator.onFrame = (value: number) => {
      _this.progressValue = value
    }
  }

  aboutToDisappear() {
    // 由于backAnimator在onframe中引用了this, this中保存了backAnimator，
    // 在自定义组件消失时应该将保存在组件中的backAnimator置空，避免内存泄漏
    this.progressAnimator = undefined;
  }

  build() {
    Column({ space: 15 }) {
      Text(`00:${parseInt(this.progressValue + "")}/01:00`)
      Stack() {
        Progress({ value: this.progressValue, total: 60, type: ProgressType.Ring })
          .width(60)
          .style({ strokeWidth: 5 })
          .color(Color.Red)
          .backgroundColor(Color.White)
          .onAppear(() => {
            this.create()
          })

        Row().width(30).height(30).borderRadius(15).backgroundColor("#E3C8FA")
        Row().width(10).height(10).borderRadius(3).backgroundColor(Color.Red)
      }.onClick(() => {
        this.animationPlayState ? this.progressAnimator?.pause() : this.progressAnimator?.play()

        this.animationPlayState = !this.animationPlayState
      })
    }.width('100%').padding({ top: 5 }).alignItems(HorizontalAlign.Center).backgroundColor(Color.Gray)
  }
}