HarmonyOS鸿蒙Next中animateTo动画如何变更效果!!

开发者您好，参考以下方案看看：

在状态管理V2中，当使用@Param和@Monitor修饰的状态变量发生变化时，系统会首先执行@Monitor绑定的方法。由于自定义组件内的build方法还未执行，内部组件还未创建，动画时机过早，导致动画属性没有初值，无法对组件产生动画效果。为了解决该问题，可以为动画添加setTimeout延时，确保内部组件创建完成后再执行动画。

示例代码如下：

// StateV2Page.ets
import { StateV2Loading } from '../views/StateV2Loading';

@Entry
@ComponentV2
struct StateV2Page {
  @Local message: string = '点击触发Loading';
  @Local isLoading: boolean = false;
  [@Param](/user/Param) animationDuration: number = 800;
  @Local loadingRotate: number = 360;

  build() {
    RelativeContainer() {
      Row() {
        Text(this.message)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.isLoading = true
          })
        StateV2Loading({ isLoading: this.isLoading })
      }.justifyContent(FlexAlign.Center)
      .width('100%')
      .height('100%')
      .id("row")
      .alignRules({
        center: { anchor: '__container__', align: VerticalAlign.Center },
        middle: { anchor: '__container__', align: HorizontalAlign.Center }
      })
    }
    .height('100%')
    .width('100%')
  }
}

// StateV2Loading.ets
@ComponentV2
export struct StateV2Loading {
  [@Param](/user/Param) isLoading: boolean = false;
  [@Param](/user/Param) animationDuration: number = 800;
  @Local loadingRotate: number = 0;
  [@Monitor](/user/Monitor)('isLoading')
  startAnim(){
    // 在setTimeout内就可执行动画
    setTimeout(() => {
      animateTo({
        duration: this.animationDuration,
        curve: Curve.Linear,
        iterations: -1
      }, () => {
        this.loadingRotate = 360;
      });
    }, 10)
  }

  build() {
    Row() {
      Image($r('app.media.startIcon'))
        .width(16)
        .height(16)
        .rotate({ angle: this.loadingRotate })
        .animation({
          duration: this.animationDuration,
          curve: Curve.Linear,
          iterations: -1
        })
    }
  }
}

若符合要求，请点击采纳，谢谢！