输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心
全部文档版本说明工具设计指南与API参考开发与测试上架分发与运营问题处理与运维最佳实践行业解决方案
问题处理与运维
您当前正在浏览新版开发者文档中心，目录分类和层级有所调整。点击左侧当前文档分类名称前的“☰”图标，可切换文档分类。 了解新版目录
问题处理与运维开发与测试问题应用框架开发UI框架UI界面如何设置TabBar切换动画

如何设置TabBar切换动画

更新时间: 2026-06-26 09:07
复制页面
本文导读
展开章节

问题现象

场景一：切换TabBar如何实现先放大后缩小复原动效？

场景二：如何实现点击空白区域实现Tab栏下滑隐藏动效？

场景三：切换TabBar如何实现背景跟随手指拖动效果？

背景知识

  • Tabs：进行内容视图切换的容器组件，每个页签对应一个内容视图。
  • tabBar：设置TabBar上显示内容。
  • barHeight：设置TabBar的高度值。
  • onAnimationEnd：切换动画结束时触发该回调，包括动画过程中手势中断。当animationDuration为0时动画关闭，不触发该回调。
  • onGestureSwipe：在页面跟手滑动过程中，逐帧触发该回调。
  • animateTo：用于为闭包代码中的状态变化添加过渡动画效果。
  • translate：设置组件平移。
  • visibility：控制组件的显示或隐藏。
  • onAreaChange：组件区域变化时触发该回调。仅会响应由布局变化所导致的组件大小、位置发生变化时的回调。

解决方案

展开

实现场景

实现方案

场景一：实现先放大后缩小复原动效。

使用Stack将自定义Tab栏与Tabs的TabBar区域重合，并通过 if/else 控制自定义Tab栏的渲染。通过animateTo的onFinish回调实现Tab内容的先放大后缩小，最后复原的动画效果。

场景二：点击空白区域实现Tab栏下滑隐藏动效。

使用animateTo和translate方法控制Tab栏内容在y轴上的下滑动画效果。通过onClick事件触发动画，实现Tab栏的隐藏和显示。

场景三：实现背景跟随手指拖动效果。

使用Stack将Tabs与背景组件堆叠，通过onAreaChange获取Tab宽度，计算中心位置。滑动时触发onGestureSwipe，背景跟随手指移动。滑动结束触发onAnimationEnd，根据移动距离判断是否吸附到目标Tab中心或回弹。

场景一：实现先放大后缩小复原动效

使用Stack将自定义Tab栏与Tabs的TabBar区域重合，并通过if/else对自定义Tab栏进行渲染控制。通过animateTo中onFinish回调实现Tab内容的先放大后缩小，最后复原的动画效果。参考代码如下所示：

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct OutFrame {
  4.   fontColor: string = '#182431';
  5.   selectedFontColor: string = '#007DFF';
  6.   iconMinHeight: number = 640;
  7.   // 图片资源仅供参考，开发者可替换成所需资源
  8.   iconList: Resource[] = [
  9.     $r('app.media.person'),
  10.     $r('app.media.ellipsis_message'),
  11.     $r('app.media.envelope'),
  12.     $r('app.media.magnifyingglass')
  13.   ];
  14.   iconX: number = 20; // 图片位置x
  15.   iconY: number = 65; // 图片位置Y
  16.   private controller: TabsController = new TabsController();
  17.   @State currentIndex: number = 0;
  18.   @State iconWidth: number = 80; // 图片宽度
  19.   @State iconHeight: number = 80; // 图片高度
  20.   @State showAnimation: boolean = false; // 控制动画显示
  21.   @State showTabIcon: boolean = true; // 控制Tab栏图标显隐
  22. 

  23.   @Builder
  24.   tabBuilder(img: Resource, index: number) {
  25.     Column() {
  26.       Image(img)
  27.         .width(30)
  28.         .height(30)
  29.         .visibility((this.showTabIcon && index === this.currentIndex) || index !== this.currentIndex ?
  30.           Visibility.Visible : Visibility.Hidden);
  31.     }
  32.     .width('100%')
  33.     .padding({ top: 5, bottom: 5 });
  34.   }
  35. 

  36.   build() {
  37.     Stack({ alignContent: Alignment.Bottom }) {
  38.       if (this.showAnimation) {
  39.         Row() {
  40.           ForEach(this.iconList, (item: Resource, index: number) => {
  41.             ListItem() {
  42.               Image(item)
  43.                 .width(this.iconWidth)
  44.                 .height(this.iconHeight)
  45.                 .visibility(this.currentIndex === index ? Visibility.Visible : Visibility.Hidden);
  46.             }
  47.             .margin({ top: -20 });
  48.           });
  49.         }
  50.         .width('90%')
  51.         .justifyContent(FlexAlign.SpaceAround)
  52.         .zIndex(1)
  53.         .position({ x: this.iconX, y: this.iconY + this.iconMinHeight });
  54.       }
  55.       Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
  56.         ForEach(this.iconList, (item: Resource, index: number) => {
  57.           TabContent() {
  58.             Text(`页签${index + 1}的内容`)
  59.               .fontSize(20)
  60.               .fontColor('#000000');
  61.           }
  62.           .backgroundColor('#ffffff')
  63.           .tabBar(this.tabBuilder(item, index));
  64.         });
  65.       }
  66.       .zIndex(0)
  67.       .vertical(false)
  68.       .barMode(BarMode.Fixed)
  69.       .barWidth(360)
  70.       .barHeight('auto')
  71.       .animationDuration(400)
  72.       .onChange((index: number) => {
  73.         // currentIndex控制TabContent显示页签
  74.         this.currentIndex = index;
  75.         this.showAnimation = true;
  76.         this.showTabIcon = false;
  77.         this.iconWidth = 70;
  78.         this.iconHeight = 70;
  79.         this.iconY = 65;
  80.         // 设置动画实现效果
  81.         this.getUIContext().animateTo({
  82.           delay: 0,
  83.           duration: 500,
  84.           onFinish: () => {
  85.             this.getUIContext().animateTo({
  86.               delay: 0,
  87.               duration: 500,
  88.               onFinish: () => {
  89.                 this.showAnimation = false;
  90.                 this.showTabIcon = true;
  91.               }
  92.             }, () => {
  93.               this.iconWidth = 5;
  94.               this.iconHeight = 5;
  95.               this.iconY = 80;
  96.             });
  97.           }
  98.         }, () => {
  99.           this.iconY = 45;
  100.         });
  101.       })
  102.       .onAnimationStart((index: number, targetIndex: number) => {
  103.         if (index === targetIndex) {
  104.           return;
  105.         }
  106.       })
  107.       .width('100%')
  108.       .height('100%')
  109.       .backgroundColor('#F1F3F5');
  110.     }
  111.     .width('100%');
  112.   }
  113. }

效果图如下：

场景二：点击空白区域实现Tab栏下滑隐藏动效

使用animateTo和translate方法控制Tab栏内容在y轴上的下滑动画效果。参考代码如下所示：

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct HideTabBar {
  4.   // 图片资源仅供参考，开发者可替换成所需资源
  5.   iconList: Resource[] = [
  6.     $r('app.media.person'),
  7.     $r('app.media.ellipsis_message'),
  8.     $r('app.media.envelope'),
  9.     $r('app.media.magnifyingglass')
  10.   ];
  11.   barHeight: number = 70;
  12.   @State transY: number = 0;
  13.   @State showTabBar: boolean = true;
  14. 

  15.   @Builder
  16.   tabBuilder(img: Resource) {
  17.     Column() {
  18.       Image(img)
  19.         .width(30)
  20.         .height(30);
  21.     }
  22.     .width('100%')
  23.     .padding({ top: 5, bottom: 5 })
  24.     .translate({ y: this.transY });
  25.   }
  26. 

  27.   build() {
  28.     Tabs({ barPosition: BarPosition.End }) {
  29.       ForEach(this.iconList, (item: Resource, index: number) => {
  30.         TabContent() {
  31.           Text(`页签${index + 1}的内容`)
  32.             .fontSize(20);
  33.         }
  34.         .tabBar(this.tabBuilder(item))
  35.         .backgroundColor('#ffffff');
  36.       });
  37.     }
  38.     .barHeight(this.barHeight)
  39.     .vertical(false)
  40.     .height('100%')
  41.     .width('100%')
  42.     .onClick(() => {
  43.       // 添加消失动画
  44.       this.getUIContext().animateTo({
  45.         delay: 0,
  46.         duration: 500,
  47.         curve: Curve.EaseOut,
  48.         iterations: 1
  49.       }, () => {
  50.         if (this.showTabBar) {
  51.           this.transY = this.barHeight;
  52.         } else {
  53.           this.transY = 0;
  54.         }
  55.         this.showTabBar = !this.showTabBar;
  56.       });
  57.     });
  58.   }
  59. }

效果图如下：

场景三：实现背景跟随手指拖动效果

  1. 使用Stack将Tabs与背景组件堆叠，并通过onAreaChange获取页面和单个Tab的宽度，计算每个Tab的中心位置。
  2. 滑动过程中触发onGestureSwipe，根据页面滑动的比例让背景跟随手指移动。
  3. 页面滑动结束触发onAnimationEnd，根据背景移动距离占总切换距离的比例判断是否超过设定阈值，超过则吸附到目标Tab的中心，未超过则回弹至原Tab的中心。

参考代码如下所示：

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct DragAction {
  4.   // 图片资源仅供参考，开发者可替换成所需资源
  5.   iconList: Resource[] = [
  6.     $r('app.media.person'),
  7.     $r('app.media.ellipsis_message'),
  8.     $r('app.media.envelope'),
  9.     $r('app.media.magnifyingglass')
  10.   ];
  11.   private controller: TabsController = new TabsController();
  12.   threshold: number = 0.7; // 吸附阈值
  13.   barHeight: number = 56;
  14.   circleHeight: number = 50;
  15.   circleWidth: number = 50;
  16.   @State barWidth: number = 0; // 单个TabBar的宽度值
  17.   @State currentIndex: number = 0;
  18.   @State bgTransX: number = 0; // 背景的X偏移量
  19.   @State pageWidth: number = 0; // tabContent内页面的宽度
  20. 

  21.   @Builder
  22.   tabBuilder(img: Resource) {
  23.     Column() {
  24.       Image(img)
  25.         .width(30)
  26.         .height(30);
  27.     }
  28.     .width('100%');
  29.   }
  30. 

  31.   // 计算背景的X偏移量
  32.   getBgOffset(index: number) {
  33.     return index * this.barWidth + (this.barWidth - this.circleWidth) / 2;
  34.   }
  35. 

  36.   build() {
  37.     Stack({ alignContent: Alignment.BottomStart }) {
  38.       Circle()
  39.         .width(this.circleWidth)
  40.         .height(this.circleHeight)
  41.         .zIndex(3)
  42.         .fillOpacity(0.05)
  43.         .animation({ duration: 200, curve: Curve.EaseOut })
  44.         .translate({
  45.           x: this.bgTransX,
  46.           y: -(this.barHeight - this.circleHeight) / 2
  47.         });
  48.       Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
  49.         ForEach(this.iconList, (item: Resource, index: number) => {
  50.           TabContent() {
  51.             Text(`页签${index + 1}的内容`)
  52.               .fontSize(20);
  53.           }
  54.           .tabBar(this.tabBuilder(item))
  55.           .backgroundColor('#ffffff');
  56.         });
  57.       }
  58.       // 获取单个TabBar的宽度值、背景的X偏移量、tabContent内页面的宽度
  59.       .onAreaChange((old, current) => {
  60.         console.info(`Succeeded in getting info.Old:${old.width},current:${current.width}.`);
  61.         this.barWidth = Number(current.width) / this.iconList.length;
  62.         this.bgTransX = this.getBgOffset(0);
  63.         this.pageWidth = Number(current.width);
  64.       })
  65.       .id('tabs')
  66.       .zIndex(1)
  67.       .barMode(BarMode.Fixed)
  68.       .scrollable(true)
  69.       .animationDuration(200)
  70.       .onChange((index: number) => {
  71.         this.getUIContext().animateTo({
  72.           delay: 0,
  73.           duration: 200,
  74.           curve: Curve.EaseOut,
  75.           iterations: 1
  76.         }, () => {
  77.           this.currentIndex = index;
  78.           // 重新偏移
  79.           this.bgTransX = this.getBgOffset(index);
  80.           this.currentIndex = index;
  81.         });
  82.       })
  83.       .vertical(false)
  84.       .height('100%')
  85.       .width('100%')
  86.       .backgroundColor('#ffffff')
  87.       // 滑动过程中：跟随手指滑动
  88.       .onGestureSwipe((index: number, event: TabsAnimationEvent) => {
  89.         if (this.pageWidth <= 0 || this.barWidth <= 0) {
  90.           return;
  91.         }
  92.         const ratio = event.currentOffset / this.pageWidth;
  93.         const from = this.getBgOffset(index);
  94.         this.bgTransX = from - ratio * this.barWidth;
  95.       })
  96.       // 松手后
  97.       .onAnimationEnd((index: number) => {
  98.         const targetIndex = index + 1;
  99.         const from = this.getBgOffset(index); // 当前Tab的中心位置
  100.         const to = this.getBgOffset(targetIndex); // 目标Tab的中心位置
  101.         const totalMove = to - from;
  102.         const currentMove = this.bgTransX - from;
  103.         const progress = Math.abs(currentMove / totalMove); // 滑动进度
  104.         this.getUIContext().animateTo({
  105.           delay: 0,
  106.           duration: 200,
  107.           curve: Curve.EaseOut,
  108.           iterations: 1
  109.         }, () => {
  110.           // 超过阈值，吸附到目标图标中心
  111.           if (progress >= this.threshold) {
  112.             this.bgTransX = to;
  113.           } else {
  114.             // 回弹原位置
  115.             this.bgTransX = from;
  116.           }
  117.         });
  118.       });
  119.     }
  120.     .height('100%')
  121.     .width('100%');
  122.   }
  123. }

效果图如下：

常见FAQ

Q：为什么对SVG和PNG使用animateTo，最终动画效果不同？

A：SVG的矢量特性支持属性级动画，PNG作为栅格图像，仅能通过组件的通用动画属性。设置SVG图片的动画，开发者可参考svg动画。

Q：如何优化动画效果？

A：优化动画效果可通过减少动画的复杂性、优化代码实现、使用硬件加速、调整动画帧率、缓存和重用动画资源等方式实现。

HarmonyOS下HdsNavigation与HdsTabs实现滚动模糊及沉浸光感材质效果的解决方案
HarmonyOS应用侧基于Tabs组件实现胶囊样式、悬浮留空及重叠毛玻璃等常见TabBar自定义样式
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明