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

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

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

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

参考示例如下:

@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)
  }
}
分享
微博
QQ
微信
回复
1天前
相关问题
如何实现按钮点击效果?
481浏览 • 2回复 待解决
HarmonyOS 实现按钮长按动画效果
89浏览 • 1回复 待解决
音乐播放悬浮按钮如何布局?
753浏览 • 1回复 待解决
HarmonyOS 按钮怎么防止重复点击
28浏览 • 1回复 待解决
HarmonyOS 如何实现底部悬浮按钮
41浏览 • 1回复 待解决
点击拒接按钮后无法再次来电
2043浏览 • 1回复 待解决
如何设置一通知按钮
421浏览 • 1回复 待解决
HarmonyOS 点击图片按钮中间没反应
719浏览 • 1回复 待解决
HarmonyOS 应用级悬浮按钮实现
41浏览 • 1回复 待解决