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

Question

有个区域是隐藏的，点击按钮会显示这个区域，显示的时候加个特效，一点点从上往下展开

if (this.item.isExpand) {
  Column() {
    显示内容详情区域....
  }
}

Answer 1

可以试下在点击展开时添加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%')
}