HarmonyOS 主页有关注按钮，点击关注按钮会显示私信按钮，这两个按钮的类似于挤压的动画该如何实现？

Question

1、点击关注按钮，关注按钮文字变成已关注。私信按钮从右往左拉出并且挤压左侧的关注按钮，私信按钮上的文字在动画过程中可见。

2、点击已关注，已关注按钮挤压私信按钮，私信按钮被挤压消失动画。

Answer 1

参考示例如下：

@Component
struct ButtonAnimation {
  @State isShow: boolean = false;
  @State btnWidth: number = 0;

  build() {
    NavDestination() {
      Row() {
        Column() {
          Button(this.isShow ? '已关注' : '关注')
            .width(100)
            .height(30)
            .backgroundColor(Color.Transparent)
        }
        .justifyContent(FlexAlign.Center)
        .backgroundColor(this.isShow ? Color.Gray : Color.Red)
        .borderRadius(10)
        .clip(true)
        .height(50)
        .width((100 - this.btnWidth) + '%')
        .onClick(() => {
          this.isShow = !this.isShow;
          animateTo({
            duration: 1000
          }, () => {
            if (this.isShow) {
              this.btnWidth = 50;
            } else {
              this.btnWidth = 0;
            }
          })
        })

        Column() {
          Button('私信')
            .width(100)
            .height(30)
            .backgroundColor(Color.Transparent)
        }
        .justifyContent(FlexAlign.Center)
        .backgroundColor(Color.Gray)
        .borderRadius(10)
        .height(50)
        .clip(true)
        .width(this.btnWidth + '%')
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }
    .hideTitleBar(true)
  }
}