HarmonyOS 鸿蒙Next 实现底部TabBar动画图标效果

发布于 1周前 作者 eggper 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 实现底部TabBar动画图标效果

实现底部TabBar动画图标效果

介绍

本示例使用TabBar集成lottie动画实现APP中常见的底部TabBar动画图标效果。

实现底部TabBar动画图标效果源码链接

使用说明

进入应用，点击底部导航栏会显示不同的动画图标效果。

实现效果

实现思路

动画图标效果

先创建自定义函数组件TabBar，在其画布组件与文本组件中分别关联将要展示的lottie动画和文本信息。在TabContent对应的tabBar属性中传入自定义函数组件TabBar，并传递相应的动画和文本所需的参数。在Tabs的onChange属性的回调函数中触发lottie动画的控制方法lottieController，实现动画播放。核心代码如下，源码参考

Index.ets

private tabBarOption1: TabBarOption = {
    index: 0,
    text: 'tabBar1',
    name: 'tab1',
    path: 'common/lottie/tabBar2.json',
    canvasRenderingContext: this.canvasRenderingContext1
  }
  private tabBarOption2: TabBarOption = {
    index: 1,
    text: 'tabBar2',
    name: 'tab2',
    path: 'common/lottie/tabBar3.json',
    canvasRenderingContext: this.canvasRenderingContext2
  }
  private tabBarOption3: TabBarOption = {
    index: 2,
    text: 'tabBar3',
    name: 'tab3',
    path: 'common/lottie/tabBar4.json',
    canvasRenderingContext: this.canvasRenderingContext3
  }

lottieController() {
if (this.currentIndex === 0) {
lottie.stop();
lottie.play(this.tabBarOption1.name);
}
if (this.currentIndex === 1) {
lottie.stop();
lottie.play(this.tabBarOption2.name);
}
if (this.currentIndex === 2) {
lottie.stop();
lottie.play(this.tabBarOption3.name);
}
}

工程结构&模块类型

entry/src/main/ets/
|---common
|   |---tabBar2.json
|   |---tabBar3.json
|   |---tabBar4.json
|---pages
|   |---Index.ets               //首页

模块依赖

无

参考资料

lottie


更多关于HarmonyOS 鸿蒙Next 实现底部TabBar动画图标效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
1 回复

更多关于HarmonyOS 鸿蒙Next 实现底部TabBar动画图标效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中实现底部TabBar动画图标效果，可以通过以下步骤进行：

  1. 定义TabBar组件：在XML布局文件中定义TabBar组件，并设置其相关属性，如位置、大小等。

  2. 设置图标资源：为TabBar的每个Tab项设置不同的图标资源，这些图标资源可以是静态图片，也可以是动画资源（如GIF或Lottie动画）。

  3. 实现动画效果：若使用静态图片作为图标，可通过监听Tab的选中状态变化事件，动态切换图标资源来实现简单的动画效果。若使用动画资源，则直接设置动画资源即可。

  4. 动画触发逻辑：在JavaScript或eTS（Enhanced TypeScript）代码中，通过监听TabBar的change事件或其他相关事件，获取当前选中的Tab项，并触发相应的动画效果。

  5. 优化性能：确保动画效果流畅，避免卡顿。可以通过减少动画复杂度、优化资源加载等方式来提升性能。

示例代码（简化版，具体实现需根据实际需求调整）：

<!-- XML布局文件 -->
<TabBar>
    <Tab>
        <Image src="{{selected ? 'icon_selected.png' : 'icon_normal.png'}}"/>
    </Tab>
    <!-- 其他Tab项 -->
</TabBar>

// JavaScript或eTS代码
this.$watch('selectedTab', (newValue) => {
    // 更新图标资源或触发动画
});

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部