如何让动画在组件创建后自动执行？

Question

如何让动画在组件创建后立即自动执行。

目前组件build完成后修改动画参数，才能触发动画。 在aboutToAppear()通过调用setTimeout延迟函数可以正常触发动画，感觉这种方式不太合理。有没有更好的方式。

动画代码如下：

@Entry
@Component
struct Index {
  @State circleOpacity: number = 0.3
  @State scaleSize: number = 0.1

  aboutToAppear(): void {
    // setTimeout(() => {
    //   this.anim()
    // }， 200)
    this.anim()
  }

  anim() {
    animateTo({
      duration: 2000，
      curve: Curve.Linear，
      iterations: -1，
      playMode: PlayMode.Normal
    }， () => {
      this.scaleSize = 1
    })

    animateTo({
      duration: 2000，
      curve: Curve.Linear，
      iterations: -1，
      playMode: PlayMode.Normal
    }， () => {
      this.circleOpacity = 0.3
    })
  }

  build() {
    Column() {
      Circle()
        .width(140)
        .height(140)
        .opacity(this.circleOpacity)
        .scale({ x: this.scaleSize， y: this.scaleSize })
        .fill(Color.Red)
      // .onClick(() => {
      //   this.anim()
      // })
    }.width('100%')
    .height('100%')

  }
}

Answer 1

解决方案：

请参考组件的生命周期onAppear挂载，和onDisAppear销毁。