HarmonyOS 多tab页面，多tab栏切换的自定义动画？

Question

如题：HarmonyOS 多tab页面，多tab栏切换的自定义动画？

Answer 1

可参考如下demo

import {
  ItemRestriction,
  SegmentButton,
  SegmentButtonItemTuple,
  SegmentButtonOptions,
  SegmentButtonTextItem
} from '@ohos.arkui.advanced.SegmentButton'

@Entry
@Component
struct Index {
  // 配置按钮组数组
  @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({
    buttons: [
      { text: '美妆' },
      { text: '衣服' },
      { text: '鞋子' }
    ] as ItemRestriction<SegmentButtonTextItem>,
    backgroundBlurStyle: BlurStyle.BACKGROUND_THICK
  })
  @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({
    buttons: [
      { text: '美妆' },
      { text: '衣服' },
      { text: '鞋子' }
    ] as SegmentButtonItemTuple,
    backgroundBlurStyle: BlurStyle.BACKGROUND_THICK
  })
  // 配置按钮组默认选中项
  @State tabSelectedIndexes: number[] = [2]
  @State singleSelectCapsuleSelectedIndexes: number[] = [1]
  build() {
    Row() {
      Column() {
        Column({ space: 25 }) {
          SegmentButton({
            options: this.tabOptions,
            selectedIndexes: $tabSelectedIndexes
          })
          SegmentButton({
            options: this.singleSelectCapsuleOptions,
            selectedIndexes: $singleSelectCapsuleSelectedIndexes
          })
        }
        .width('90%')
      }
      .width('100%')
    }
    .height('100%')
  }
}