属性动画animation如何监听动画执行完成？

Question

属性动画animation如何监听动画执行完成？

Answer 1

可以参考动画执行完成回调函数，进行逻辑处理，参考api:https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-explicit-animation-0000001862687717\#ZH-CN\_TOPIC\_0000001862687717\_\_animateparam对象说明

demo如下

// xxx.ets
@Entry
@Component
struct AttrAnimationExample {
  @State widthSize: number = 250
  @State heightSize: number = 100
  @State rotateAngle: number = 0
  @State flag: boolean = true
  build() {
    Column() {
      Button('change size')
        .onClick(() => {
          if (this.flag) {
            this.widthSize = 150
            this.heightSize = 60
          } else {
            this.widthSize = 250
            this.heightSize = 100
          }
          this.flag = !this.flag
        })
        .margin(30)
        .width(this.widthSize)
        .height(this.heightSize)
        .animation({
          duration: 2000,
          curve: Curve.EaseOut,
          playMode: PlayMode.Normal,
          onFinish: () => {
            console.info('执行完成,执行逻辑操作')
          }
        })
    }.width('100%').margin({ top: 20 })
  }
}