HarmonyOS 动画需求

实现图片显示隐藏的动画效果demo：

@Entry
@Component
struct Index1 {
  @State message: string = '隐藏'
  @State isOpen: boolean = true;
  @State imageHeight: number = 300;
  build() {
    Column() {
      Button(this.message).onClick((event: ClickEvent) => {
        this.isOpen = !this.isOpen;
        animateTo({
          duration: 600,
          curve: Curve.Ease,
          onFinish: () => {
          }
        },
          () => {
            if (this.isOpen) {
              this.message = '隐藏';
              this.imageHeight = 300;
            } else {
              this.message = '显示';
              this.imageHeight = 0;
            }
          })
      })
        .fontSize(26)
        .margin(({ top: 36 }))
      Image($r('app.media.startIcon'))// Text('hhhhh')
        .height(this.imageHeight)
        .width(300)
        .margin(({ top: 36 }))
        .border({ width: 3, color: 'white' })
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.