【代码案例】HarmonyOS NEXT 自定义动效tab

"dependencies": {
  "@ohos-cases/custom_animation_tab": "har包地址"
}

import {CustomAnimationTab} from '@ohos-cases/custom_animation_tab'

/**
 * 构建自定义Tab
 * animationAttribute: 动效属性
 * tabsInfo: tab数据源
 * indicatorBarAttribute: 背景条属性
 * tabBarAttribute: 页签条属性
 * tabController: 自定义动效tab控制器
 * scroller: 页签条滚动控制器
 */
CustomAnimationTab({
  animationAttribute: this.animationAttribute,
  tabsInfo: this.tabsInfo,
  indicatorBarAttribute: this.indicatorBarAttribute,
  tabBarAttribute: this.tabBarAttribute,
  tabController: this.tabController,
  scroller: this.scroller
})

// 自定义动效属性，添加了背景条颜色变化
@State animationAttribute: MyAnimationAttribute = new MyAnimationAttribute($r("app.color.custom_animation_tab_indicator_color"));

export class MyAnimationAttribute extends AnimationAttribute {
  // 背景条颜色
  indicatorBarColor: ResourceColor;

  constructor(indicatorBarColor: ResourceColor) {
    super();
    this.indicatorBarColor = indicatorBarColor;
  }
}

@Builder
indicatorBar($$: BaseInterface) {
  Column()
    .height($r("app.float.custom_animation_tab_indicator_height"))
    .width($r("app.string.custom_animation_tab_one_hundred_percent"))
    // 绑定自定义动效属性
    .backgroundColor(this.animationAttribute.indicatorBarColor)
    .borderRadius($r("app.float.custom_animation_tab_indicator_border_radius"))
}

// 更新自定义动效变量——背景条颜色
Column() {
  Button($r("app.string.custom_animation_tab_button_text"))
    .height($r("app.string.custom_animation_tab_ninety_percent"))
    .type(ButtonType.Capsule)
    .onClick(() => {
      if ((this.animationAttribute.indicatorBarColor as Resource).id ===
      $r("app.color.custom_animation_tab_indicator_color").id) {
        this.animationAttribute.indicatorBarColor = Color.Yellow;
      } else if (this.animationAttribute.indicatorBarColor === Color.Yellow) {
        this.animationAttribute.indicatorBarColor = $r("app.color.custom_animation_tab_indicator_color");
      }
    })
}
.justifyContent(FlexAlign.Center)
.height($r("app.string.custom_animation_tab_ten_percent"))
.width($r("app.string.custom_animation_tab_one_hundred_percent"))

// tab数据
tabsInfo: TabInfo[] = [];

this.tabsInfo = [
  new TabInfo(CustomAnimationTabConfigure.DEFAULT_BASE_TAB, wrapBuilder(baseBuilder), wrapBuilder(tabBar)),
  new TabInfo(CustomAnimationTabConfigure.DEFAULT_UI_TAB, wrapBuilder(uiBuilder), wrapBuilder(tabBar)),
  new TabInfo(CustomAnimationTabConfigure.DEFAULT_DYEFFECT_TAB, wrapBuilder(dyEffectBuilder), wrapBuilder(tabBar)),
  new TabInfo(CustomAnimationTabConfigure.DEFAULT_THIRTYPARTY_TAB, wrapBuilder(thirdPartyBuilder), wrapBuilder(tabBar)),
  new TabInfo(CustomAnimationTabConfigure.DEFAULT_NATIVE_TAB, wrapBuilder(nativeBuilder), wrapBuilder(tabBar)),
  new TabInfo(CustomAnimationTabConfigure.DEFAULT_OTHER_TAB, wrapBuilder(otherBuilder), wrapBuilder(tabBar))
]
  
// baseBuilder页面
import LazyDataSource from './LazyDataSource';
import { SkeletonLayout } from './SkeletonLayout';

@Builder
export function baseBuilder() {
  BasePage();
}

@Component
struct BasePage {
  @State data: LazyDataSource<string> = new LazyDataSource<string>();

  aboutToAppear(): void {
    for (let i = 0; i < 100; i++) {
      this.data.pushData(`${i}`);
    }
  }

  build() {
    Column() {
      List() {
        LazyForEach(this.data, (data: string) => {
          ListItem() {
            SkeletonLayout({isMine: false})
          }
        })
      }
      .cachedCount(1)
      .width("100%")
      .height("100%")
    }
    .width("100%")
    .height("100%")
  }
}

// 页签样式
@Builder
function tabBar($$: TabBarItemInterface) {
  Text($$.title)
    .fontSize($$.curIndex === $$.index ? $r("app.float.custom_animation_tab_list_select_font_size") : $r("app.float.custom_animation_tab_list_unselect_font_size"))
    .fontColor($r("app.color.custom_animation_tab_list_font_color"))
    .fontWeight($$.curIndex === $$.index ? FontWeight.Bold : FontWeight.Medium)
    .textAlign(TextAlign.Center)
}

indicatorBarAttribute: IndicatorBarAttribute = new IndicatorBarAttribute(this.indicatorBar, SizeMode.Padding, 20, 10,
  CustomAnimationTabConfigure.INDICATOR_MAX_LEFT, CustomAnimationTabConfigure.DEFAULT_INDICATOR_EXPAND);

@Builder
indicatorBar($$: BaseInterface) {
  Column()
    .height($r("app.string.custom_animation_tab_one_hundred_percent"))
    .width($r("app.string.custom_animation_tab_one_hundred_percent"))
    .backgroundColor(this.animationAttribute.indicatorBarColor)
    .borderRadius($r("app.float.custom_animation_tab_indicator_border_radius"))
}

tabBarAttribute: TabBarAttribute = new TabBarAttribute(CustomAnimationTabConfigure.LIST_ITEM_WIDTH, CustomAnimationTabConfigure.TABBAR_HEIGHT)

// tabController
tabController: CustomAnimationTabController = new CustomAnimationTabController();
// scroller
scroller: Scroller = new Scroller();

/**
 * 获取页签对应的背景条位置以及页签条偏移
 * @param center - 页签中心点
 * @param width - 页签条宽度
 * @returns: [背景条左端位置, 页签条偏移]
 */
@Param getScrollInfo: (center: number, width: number) => [number, number] =
  (center: number, width: number): [number, number] => {
    // 获取背景条位置
    let indicatorLeft: number = center - this.indicatorBarWith / 2;
    // TODO: 知识点: 当背景条位置大于默认的背景条最大位置时，选取背景条最大位置作为背景条实际位置
    let finalIndicatorLeft: number = this.maxIndicatorBarLeft >= 0 ? Math.min(indicatorLeft, this.maxIndicatorBarLeft) : indicatorLeft;
    // TODO: 知识点: 背景条产生的多余距离作为页签条滑动距离
    let listOffset: number = indicatorLeft - finalIndicatorLeft;
    // TODO: 知识点: 当页签条偏移大于页签条可偏移量，选取页签条可偏移量作为页签条实际偏移
    let finalListOffset: number = Math.min(listOffset, this.maxListOffset);
    // TODO: 知识点: 页签条多余的偏移作为背景条后续的滑动距离
    finalIndicatorLeft += listOffset - finalListOffset;
    return [finalIndicatorLeft, finalListOffset];
  };

// tab
Swiper(this.swiperController) {
  // 布局实现
}
.onChange((index: number) => {
  // 点击事件且发生页签切换
  if (this.listTouchState === 1 && index !== this.curIndex) {
    let indexInfo: Record<string, number> = this.getElementInfo(this.curIndex);
    let targetIndexInfo: Record<string, number> = this.getElementInfo(index);
    this.clickAnimation(this.curIndex, index, indexInfo, targetIndexInfo, this.elementsInfo);
  }
  this.curIndex = index;
  console.log(`curIndex: ${this.curIndex}`)
})

clickAnimation: (targetIndex: number, targetIndexInfo: Record<string, number>, elementsInfo: IndicatorAnimationInfo[]) => void =
  (targetIndex: number, targetIndexInfo: Record<string, number>, elementsInfo: IndicatorAnimationInfo[]): void => {
    // 根据targetIndex页签当前位置获取对应的背景条位置
    this.animationAttribute.left = targetIndexInfo.center - this.elementsInfo[targetIndex].width / 2;
    this.animationAttribute.indicatorBarWidth = this.elementsInfo[targetIndex].width;
    this.animationAttribute.indicatorBarHeight = this.elementsInfo[targetIndex].height;
    this.scroller!.scrollTo({xOffset: elementsInfo[targetIndex].offset, yOffset: 0, animation: {duration: this.animationDuration, curve: Curve.Linear}});
  };

// 页签点击事件
ListItem() {
  // 布局实现
}
.onClick(() => {
  this.listTouchState = 1;
  this.tabController.changeIndex(index);
})

Swiper(this.swiperController) {
  // 布局实现
}
.onGestureSwipe((index: number, event: TabsAnimationEvent) => {
  this.listTouchState = 0;
  let curOffset: number = event.currentOffset;
  let targetIndex: number = index;
  this.isReachBorder = false;
  // tab组件到达边界使背景条和页签条跳转到终点位置
  // TODO: 知识点: 这里不能判断到边界直接退出，因为onGestureSwipe每一帧触发回调，当手势滑动较快，上一帧背景条没有到达边界
  // TODO(接上): 知识点: 下一帧content超出边界，这时候背景条没有更新，退出将导致背景条停滞在上一帧位置无法更新。
  if ((index === 0 && curOffset > 0) ||
    (index === this.innerBarData.length - 1 && curOffset < 0)) {
    this.isReachBorder = true;
    curOffset = 0;
  }

  let ratio: number = Math.abs(curOffset / this.tabsWidth); // tab滑动比例
  if (curOffset < 0) { // tab右滑
    targetIndex = index + 1;
  } else if (curOffset > 0) { // tab左滑
    targetIndex = index - 1;
  }
  // 获取背景条位置及页签条偏移
  // 获取背景条位置及页签条偏移
  this.gestureAnimation(index, targetIndex, this.elementsInfo, ratio);
})

/**
 * 手势滑动动效
 * @param index - 起始页签索引
 * @param targetIndex - 目标页签索引
 * @param elementsInfo - 页签信息[背景条左端位置, 页签条偏移]
 * @param ratio - 当前手势滑动比例
 * @returns
 */
gestureAnimation: (index: number, targetIndex: number, elementsInfo: IndicatorAnimationInfo[], ratio: number) => void =
  (index: number, targetIndex: number, elementsInfo: IndicatorAnimationInfo[], ratio: number): void => {
    this.animationAttribute.left = elementsInfo[index].left + (elementsInfo[targetIndex].left - elementsInfo[index].left) * ratio;
    this.scroller!.scrollTo({xOffset: elementsInfo[index].offset + (elementsInfo[targetIndex].offset - elementsInfo[index].offset) * ratio, yOffset: 0});
    let indicatorSize: [number, number] = this.getIndicatorSize(ratio, index, targetIndex);
    this.animationAttribute.indicatorBarWidth = indicatorSize[0];
    this.animationAttribute.indicatorBarHeight = indicatorSize[1];
  };

Swiper(this.swiperController) {
  // 布局实现
}
.onContentDidScroll((selectedIndex: number, index: number, position: number, mainAxisLength: number) => {
  // 动画启动，选取当前index索引页签的属性来执行背景条和页签条滑动
  if (this.isAnimationStart && index === this.innerCurrnetIndex) {
    // 使用选中页签相对于Swiper主轴起始位置的移动比例判断滑动的目标页签targetIndex的位置
    let targetIndex: number = position < 0 ? index + 1 : index - 1;
    if (targetIndex >= this.innerBarData.length || targetIndex < 0) {
      console.warn(`Error: targetIndex exceeds the limit range:
            selectedIndex: ${selectedIndex}, curIndex: ${this.innerCurrnetIndex}, index: ${index},
            targetIndex: ${targetIndex}, position: ${position}, mainAxisLength: ${mainAxisLength}`);
      return;
    }
    let ratio: number = Math.abs(position);
    // 通过页签比例计算当前页签条和背景条的位置
    this.autoAnimation(index, targetIndex, this.elementsInfo, ratio);
  }
})
.onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
  if (this.isReachBorder) { // 若tab到达边界，则不继续执行动画
    return;
  }

  this.isAnimationStart = true;
  this.listTouchState = 0;
})
.onAnimationEnd(() => {
  this.isAnimationStart = false;
})

/**
 * 自动滑动动效
 * @param index - 起始页签索引
 * @param targetIndex - 目标页签索引
 * @param elementsInfo - 页签动效信息[背景条左端位置, 页签条偏移]
 * @param ratio - 当前tab滑动比例
 * @returns
 */
autoAnimation: (index: number, targetIndex: number, elementsInfo: IndicatorAnimationInfo[], ratio: number) => void =
  (index: number, targetIndex: number, elementsInfo: IndicatorAnimationInfo[], ratio: number): void => {
    this.animationAttribute.left = elementsInfo[index].left + (elementsInfo[targetIndex].left - elementsInfo[index].left) * ratio;
    this.scroller!.scrollTo({
      xOffset: elementsInfo[index].offset + (elementsInfo[targetIndex].offset - elementsInfo[index].offset) * ratio,
      yOffset: 0
    });
    let indicatorSize: [number, number] = this.getIndicatorSize(ratio, index, targetIndex);
    this.animationAttribute.indicatorBarWidth = indicatorSize[0];
    this.animationAttribute.indicatorBarHeight = indicatorSize[1];
  };

customAnimationTabs                          // har类型
|---common
|   |---CommonConstants.ets                  // 内置常量定义 
|---model
|   |---AnimationAttribute.ets               // 动效属性
|   |---BaseInterface.test                   // 基础信息接口
|   |---ComponentFactory.ets                 // 组件工厂
|   |---CustomAniamtionTabController.ets     // 自定义tab控制器
|   |---IndicatorBarAttribute.ets            // 背景条属性
|   |---TabBarAttribute.ets                  // 页签条属性
|   |---TabBarItemInterface.ets              // 页签信息接口
|   |---TabInfo.ets                          // tab项信息
|---utils
|   |---CustomAnimationTab.ets               // customAnimationTab组件 
|---view
|   |---BasePage.ets                         // tab页面内容及页签
|   |---CustomAnimationTabConfigure.ets      // 用户配置
|   |---CustomAnimationTabView.ets           // 样例页面
|   |---DyEffectPage.ets                     // tab页面内容及页签
|   |---LazyDataSource.ets                   // 懒加载数据
|   |---NativePage.ets                       // tab页面内容及页签
|   |---OtherPage.ets                        // tab页面内容及页签 
|   |---SkeletonLayout.ets                   // 骨架页面
|   |---ThirdPartyPage.ets                   // tab页面内容及页签
|   |---UIPage.ets                           // tab页面内容及页签
|---FeatureComponent.ets                     // AppRouter入口文件