HarmonyOS 实现展开区域的徐徐展开特效

可以试下在点击展开时添加animateTo的改变Column组件高度的方式实现徐徐展开效果，animateTo具体使用可以参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-explicit-animation-V5

@State flag1: boolean = false
@State flag2: boolean = true
@State color: Color = Color.Red;

build() {
  Row() {
    Button('点击')
      .backgroundColor(this.color)
      .onClick(() => {
        if (this.color !== Color.Blue) {
          this.flag1 = true
          // 展开动画
          animateTo({
            duration: 300,
            curve: curves.springMotion(0.5, 0.8),
          }, () => {
            this.color = Color.Blue;
            this.flag2 = false;
          })
        } else {
          // 收起动画
          this.flag1 = false
          animateTo({
            duration: 300,
            curve: Curve.Friction,
          }, () => {
            this.color = Color.Red;
            this.flag2 = true;
          })
        }

      })
    if (this.flag1) {
      Column() {
        Row() {
          Row() {
            Text("文字")
          }
          .backgroundColor(Color.Pink)
          .height(30)
          .borderRadius(15)
          .width(100)
          .justifyContent(FlexAlign.End)
          .padding({ left: 10, right: 10 })
          .animation({ duration: 300 })
        }.justifyContent(FlexAlign.End)
        .width("100%")
      }
      .position({
        x:100,y:0
      })
      .width('50%')
      .height(this.flag2 ? '0%' : '80%')
      .backgroundColor(Color.Gray)
    }
  }
  .height('100%')
}
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.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.