HarmonyOS 鸿蒙Next中Tabs出现/消失转场动画效果

h691938207 1楼•16 天前

可以参考以下demo：

@Entry
@Component
struct TabsDemo {
  @State currentIndex: number = 0
  pageInfos: NavPathStack = new NavPathStack()

  build() {
    Navigation(this.pageInfos) {
      Stack({ alignContent: Alignment.TopStart }){
        Flex({ direction: FlexDirection.Column }){
          Tabs({ index: this.currentIndex }) {
            TabContent() {
              Column().width('100%').height('100%').backgroundColor('#00CB87')
            }
            TabContent() {
              Column().width('100%').height('100%').backgroundColor('#007DFF')
            }
            TabContent() {
              Column().width('100%').height('100%').backgroundColor('#FFBF00')
            }
          }
          .barHeight(0)
          .scrollable(false)
          .onChange((index) => {
            this.currentIndex = index;
          })
          Flex({
            direction: FlexDirection.Row,
            alignItems: ItemAlign.Center,
            justifyContent: FlexAlign.SpaceAround
          }) {
            Column({space:5}){
              Text('0')
                .fontSize(14).fontColor('#4f4f4f')
            }.onClick(() => {
              this.currentIndex = 0
            })
            Column({space:5}){
              Text('1')
                .fontSize(14).fontColor('#4f4f4f')
            }.onClick(() => {
              this.currentIndex = 1
            })
            Column({space:5}){
              Text('2')
                .fontSize(14).fontColor('#4f4f4f')
            }.onClick(() => {
              this.currentIndex = 2
            })
          }.height(36)
        }
        .width('100%')
        .height('100%')
      }
    }.hideTitleBar(true)
    .mode(NavigationMode.Stack)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}

更多关于HarmonyOS 鸿蒙Next中Tabs出现/消失转场动画效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

wuwangju 2楼•16 天前作者

在HarmonyOS鸿蒙Next中，Tabs组件的出现/消失转场动画效果主要通过TabsController和PageTransition来实现。TabsController用于控制Tabs的切换行为，而PageTransition则用于定义页面切换时的动画效果。

要实现Tabs的出现/消失转场动画，可以使用PageTransitionEntry和PageTransitionExit来分别定义进入和退出时的动画。例如，通过设置opacity、translate、scale等属性，可以实现淡入淡出、平移、缩放等效果。

以下是一个简单的示例代码：

@Entry
@Component
struct TabsAnimationExample {
  private controller: TabsController = new TabsController();

  build() {
    Column() {
      Tabs({ controller: this.controller }) {
        TabContent() {
          Text("Tab 1")
            .pageTransition({ 
              enter: PageTransitionEntry({ 
                opacity: 0, 
                transform: { translate: { x: 100 } } 
              }), 
              exit: PageTransitionExit({ 
                opacity: 0, 
                transform: { translate: { x: -100 } } 
              }) 
            })
        }
        .tabBar('Tab 1')

        TabContent() {
          Text("Tab 2")
            .pageTransition({ 
              enter: PageTransitionEntry({ 
                opacity: 0, 
                transform: { translate: { y: 100 } } 
              }), 
              exit: PageTransitionExit({ 
                opacity: 0, 
                transform: { translate: { y: -100 } } 
              }) 
            })
        }
        .tabBar('Tab 2')
      }
      .barWidth('100%')
      .barHeight(50)
    }
    .width('100%')
    .height('100%')
  }
}

在这个示例中，PageTransitionEntry和PageTransitionExit分别定义了Tabs切换时的进入和退出动画。通过调整opacity和transform属性，可以自定义不同的转场效果。

gougou168 3楼•16 天前

在HarmonyOS（鸿蒙）Next中，Tabs的转场动画可以通过TransitionEffect实现。使用TransitionEffect.slide或TransitionEffect.fade等预定义动画效果，结合@State或@Link动态控制Tabs的显示/隐藏。例如：

@State isVisible: boolean = true;

build() {
  Tabs({
    visible: this.isVisible,
    transitionEffect: TransitionEffect.slide()
  }) {
    // Tabs内容
  }
}

通过改变isVisible的值，Tabs会以滑动或淡入淡出的动画效果出现或消失。