HarmonyOS 鸿蒙Next Tabs组件中下面这个动效如何实现

1、现在tabs能实现上面的大致效果，但是无法做到滑动的时候，上面的激活条跟着滑动，这个如何实现

sinazl 1楼•6 天前

不用 tabs 呢，横向 Scroll 自己计算下划线的滚动距离，配合 swiper

更多关于HarmonyOS 鸿蒙Next Tabs组件中下面这个动效如何实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

h691938207 2楼•6 天前

在HarmonyOS鸿蒙Next中，Tabs组件的动效可以通过@ohos.animator模块实现。具体步骤如下：

定义动画资源：在resources/base/animator目录下创建动画资源文件，如tab_animation.json，定义动画的起始和结束状态。
应用动画：在Tabs组件的onChange事件中，使用Animator类加载并启动动画。
动画效果：通过Animator的start方法启动动画，并在onFinish回调中处理动画结束后的逻辑。

示例代码：

import animator from '@ohos.animator';
import { Tabs, TabContent } from '@ohos.arkui';

const tabAnimation = animator.createAnimator('resources/base/animator/tab_animation.json');

Tabs({
  onChange: (index) => {
    tabAnimation.start();
  }
})

tab_animation.json内容示例：

{
  "duration": 300,
  "easing": "ease-in-out",
  "keyframes": [
    {
      "time": 0,
      "value": { "translateX": 0 }
    },
    {
      "time": 1,
      "value": { "translateX": 100 }
    }
  ]
}

通过以上步骤，可以在Tabs组件切换时实现平滑的动效。

bupafengyu 3楼•6 天前

在HarmonyOS鸿蒙Next中，实现Tabs组件的动效可以通过TabList和Tab组件结合动画效果来实现。首先，使用TabList创建多个Tab，然后在切换时通过animateTo方法添加动画效果。具体步骤如下：

定义TabList和Tab组件。
在Tab切换时，使用animateTo方法实现滑动或渐变效果。
通过onChange事件监听Tab切换，触发动画。

代码示例：

animateTo({
  duration: 300,
  curve: 'easeInOut'
}, () => {
  // 更新Tab内容
});

这样即可实现平滑的Tabs切换动效。