鸿蒙开发教程实战案例源码分享-tab切换动画

标签：index 鸿蒙 动画 源码 currentIndex tab

鸿蒙开发教程实战案例源码分享-tab切换动画

往往会看到tab切换时有个显示变大的动画，不会那么突兀。
关键是用到animation动画

一、思路：

用animation

二、效果图：

看视频更直观点：

<iframe allowfullscreen="true" data-mediaembed="bilibili" frameborder="0" id="jaySPrY9-1737077697213" src="https://player.bilibili.com/player.html?aid=113820408218622"></iframe>

【2025最新】鸿蒙开发教程实战案例源码分享-推荐和最新tab切换动画

三、关键代码：

@Component
export default struct TitleTab {

  @Prop title:string
  @Prop currentIndex:number
  @Prop index:number


  build() {
    Column() {

        Text(this.title)
          .fontColor(this.currentIndex === this.index ? 'rgba(0, 0, 0, 1.00)' :  'rgba(0,0,0,0.5)')
          .fontSize(this.currentIndex === this.index ? 25 :  16)
          .fontWeight(this.currentIndex === this.index ? 700 : 500)
          .lineHeight(30)
          .zIndex(999)
          .animation({
            duration: 200,
          })

    }
    .margin(this.index !== 0 ? { left: 20 } : {
      left: 0,
      right: 0
    })
  }
}

四、项目demo结构图：

有需要源码demo的或者有鸿蒙开发bug或者需求的都可以私信我，我每天都看私信的

标签：index,鸿蒙,动画,源码,currentIndex,tab
From： https://blog.csdn.net/u010074743/article/details/145132749