Tab动效切换鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

本项目实现了点击、滑动都可实现Tab切换动效，包含文字切换。

Tab动效切换源码链接

效果预览

使用说明

安装完成后可以通过点击、滑动查看效果。

实现思路

1. 切换动画开始与结束时触发回调。

   .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
     // 切换动画开始时触发该回调。下划线跟着页面一起滑动，同时宽度渐变。
     this.currentIndex = targetIndex
     let targetIndexInfo = this.getTextInfo(targetIndex)
     this.startAnimateTo(this.animationDuration, targetIndexInfo.left, targetIndexInfo.width)
   })
   .onAnimationEnd((index: number,event: TabsAnimationEvent) => {
     // 切换动画结束时触发该回调。下划线动画停止。
     let currentIndicatorInfo = this.getCurrentIndicatorInfo(index,event)
     this.startAnimateTo(0,currentIndicatorInfo.left,currentIndicatorInfo.width)
   })

2. 在页面跟手滑动过程中，逐帧触发该回调。

   .onGestureSwipe((index: number,event: TabsAnimationEvent) => {
     let currentIndicatorInfo = this.getCurrentIndicatorInfo(index,event)
     this.currentIndex = currentIndicatorInfo.index
     this.indicatorLeftMargin = currentIndicatorInfo.left
     this.indicatorWidth = currentIndicatorInfo.width
   })