HarmonyOS鸿蒙Next中barHeight动画异常

HarmonyOS鸿蒙Next中barHeight动画异常 显示动画(正常): 当 barHeight 从 0 动画到 60 时,TabBar 连同其内部的文字内容会一起平滑地展开,效果符合预期。

隐藏动画(异常): 当 barHeight 从 60 动画到 0 时,TabBar 内部的文字内容会瞬间消失,只有 TabBar 的背景容器在执行一个高度从 60 慢慢变到 0 的收缩动画。

@Entry
@Component
struct ProblematicTabBarAnimationDemo {
  @State activeIndex: number = 0;
  @State tabBarHeight: number = 60;
  private controller: TabsController = new TabsController();

  @Builder tabBarItem(index: number, title: string) {
    Column({ space: 4 }) {
      Text(title)
        .fontSize(25)
        .fontColor(this.activeIndex === index ? '#007DFF' : '#666666')
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
      TabContent() {
        Column({ space: 20 }) {
          Text("动画问题演示")
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
            .fontColor(Color.White)

          Text("点击“隐藏”按钮,观察TabBar的文字瞬间消失,只有背景区域在执行动画。")
            .width('90%')
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .opacity(0.8)

          Button("隐藏 TabBar ")
            .onClick(() => {
              this.getUIContext().animateTo({
                duration: 5000,
                curve: Curve.Ease
              }, () => {
                this.tabBarHeight = 0;
                this.controller.setTabBarTranslate({ y: 60 })
              });
            })

          Button("显示 TabBar")
            .onClick(() => {
              this.getUIContext().animateTo({
                duration: 5000,
                curve: Curve.Ease
              }, () => {
                this.tabBarHeight = 60;
                this.controller.setTabBarTranslate({ y: 0 })
              });
            })

        }
        .width("100%").height("100%")
        .justifyContent(FlexAlign.Center)
        .backgroundColor("#C78D67")
      }
      .tabBar(this.tabBarItem(0, "首页"))

      TabContent() {
        Column() {
          Text("评论页面")
            .width("100%").height("100%")
            .fontSize(30).textAlign(TextAlign.Center)
            .backgroundColor("#F0DCB1")
        }
      }
      .tabBar(this.tabBarItem(1, "评论"))
    }
    .width('100%')
    .height('100%')
    .barHeight(this.tabBarHeight)
    .onChange((index: number) => {
      this.activeIndex = index;
    })
  }
}

更多关于HarmonyOS鸿蒙Next中barHeight动画异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中,barHeight动画异常可能是由以下原因导致:

  1. 动画属性设置错误,检查@ohos.animator模块的参数配置
  2. 组件尺寸限制冲突,确认父容器布局约束是否允许高度变化
  3. 动画曲线(BezierCurve)参数不匹配导致运动轨迹异常
  4. 系统级动画策略变更,Next版本可能调整了动画执行机制

典型解决方案包括:

  1. 使用显式动画代替属性动画
  2. 在动画回调中打印实时高度值进行调试
  3. 检查@ohos.graphics模块的动画兼容性配置

更多关于HarmonyOS鸿蒙Next中barHeight动画异常的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的动画同步问题。在隐藏动画时,文字内容没有跟随tabBarHeight变化同步执行动画。建议尝试以下解决方案:

  1. 将文字内容的opacity属性与tabBarHeight绑定,实现淡出效果:

    Text(title)
      .opacity(this.tabBarHeight > 0 ? 1 : 0)
      .animation({duration: 5000, curve: Curve.Ease})
    
  2. 或者使用显式动画控制:

    animateTo({
      duration: 5000,
      curve: Curve.Ease
    }, () => {
      this.tabBarHeight = 0;
      this.textOpacity = 0; // 新增一个@State变量控制文字透明度
      this.controller.setTabBarTranslate({ y: 60 })
    });
    
  3. 检查TabBar的clip属性设置,确保没有意外裁剪了文字内容。

这个问题可能与组件内部实现有关,文字内容的显示状态可能在高度达到某个阈值时被强制改变。

回到顶部