HarmonyOS 单独某组件在首次显示的时候有显示动画？

Question

在RelativeContainer组件内，如果想让单独某组件在首次显示的时候有显示动画，需要怎么做，能够从大到小，并且从下往上走到对应位置

RelativeContainer(){
  Text('定位锚点-------》').width(40)
    .id('anchorPoint')
    .margin({ top: 100 ,right: 20})
    .alignRules({
      middle: { anchor: "__container__", align: HorizontalAlign.Center },
    })
  //想要给 animateTo 添加动画
  Text('显示动画').width(40)
    .height(20)
    .margin({ top: 20 ,right: 20})
    .id('animateTo')
    .alignRules({
      top: { anchor: "anchorPoint", align: VerticalAlign.Top },
    })
}.width('100%')
.height('100%')

Answer 1

关于单独组件在首次显示时显示动画的问题，可以参考这段demo的实现步骤：

@Entry
@Component
struct animationPage {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Row(){}
      .id('HelloWorld')
      .width(150)
      .height(150)
      .backgroundColor(Color.Red)
      .alignRules({
        top: { anchor: '__container__', align: VerticalAlign.Top },
        left: { anchor: '__container__', align: HorizontalAlign.Start }
      })
      Row(){
        mysd()
      }.id('123')
      .width(150)
      .height(150)
      .alignRules({
        top:{anchor:'__container__',align:VerticalAlign.Top},
        left:{anchor:'HelloWorld',align:HorizontalAlign.End}
      })
    }
    .height('100%')
    .width('100%')
  }

}

@Component
struct mysd{
  @State WI:number=50
  @State mi:number=0
  @State asd:number=50
  aboutToAppear(): void {
    this.change()
  }
  change(){
    // setInterval(()=>{
    animateTo({
      duration: 3000,
      curve: Curve.EaseInOut,
      iterations: 1,
      playMode: PlayMode.Normal,
    },()=>{
      this.WI=0
      this.mi=150
      this.asd=75
    })
    // },0)
  }
  build() {
    Column(){
      Column(){

      }
      .width(this.WI)
      .height(this.WI)
      .position({x:this.asd,y:this.mi})
      .backgroundColor(Color.Black)

    }.width(150)
    .height(150)
    .backgroundColor(Color.Green)
  }
}