HarmonyOS Circle组件使用动画的时候圆心会变？

Question

HarmonyOS Circle组件使用动画的时候圆心会变？

Answer 1

Circle 组件动画效果，诉求：通过动画使圆慢慢变大，当前：使用动画，圆变大的同时，移动了位置，圆心发生改变，期望不变

@Component
export struct WaterRipplesComponent {
  rippleCount: number[] = []
  rippleSpacing: number = 50
  rippleSize: number = 50
  @State animationSize: number = 0

  aboutToAppear(): void {
    for (let i = 5; i > 0; i--) {
      this.rippleCount.push(i)
    }
  }

  build() {
    Column() {
      Column() {
        Stack() {
          ForEach(this.rippleCount, (item: number) => {
            Circle({
              width: this.rippleSize + this.rippleSpacing * item + this.animationSize,
              height: this.rippleSize + this.rippleSpacing * item + this.animationSize,
            }).opacity(1.0 - ((this.rippleSize + this.rippleSpacing * item + this.animationSize) / 300.0))
          })
        }.width('100%').height('100%')
      }.width("100%").height("100%")

      Button("test")
        .onClick(() => {
          animateTo({
            duration: 4000,
            iterations: -1
          }, () => {
            this.animationSize = 30
          })
        })
    }
  }
}