HarmonyOS 鸿蒙Next中这个效果如何实现？

HarmonyOS 鸿蒙Next中这个效果如何实现？ cke_219.gif

有没有大佬能告诉我一下这个效果如何实现？上一条可能我的表述有些问题，重新发一下


更多关于HarmonyOS 鸿蒙Next中这个效果如何实现？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

使用分段按钮组件实现

分段按钮组件包含页签类分段按钮、胶囊类单选分段按钮和胶囊类多选分段按钮。

使用v1版本 SegmentButton

使用v2版本，要求API18+ SegmentButtonV2

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


谢谢大佬，

@Entry
@Component
struct CalendarTabs {
  @State currentIndex: number = 1 // 默认选中月视图
  private tabsController: TabsController = new TabsController()

  build() {
    Column() {
      // 自定义Tab栏
      Row() {
        Text('年')
          .onClick(() => this.changeTab(0))
          .backgroundColor(this.currentIndex === 0 ? '#F5F5F5' : '#FFFFFF')
        
        Text('月')
          .onClick(() => this.changeTab(1))
          .backgroundColor(this.currentIndex === 1 ? '#F5F5F5' : '#FFFFFF')

        Text('日')
          .onClick(() => this.changeTab(2))
          .backgroundColor(this.currentIndex === 2 ? '#F5F5F5' : '#FFFFFF')
      }
      .width('100%')
      .height(50)
      .justifyContent(FlexAlign.SpaceEvenly)

      // 视图容器
      Tabs({
        controller: this.tabsController
      }) {
        TabContent() { 

        }
        TabContent() { 
          
         }
        TabContent() { 
          
         }
      }
      .onChange((index: number) => {
        this.currentIndex = index
      })
    }
  }

  private changeTab(index: number) {
    this.tabsController.changeIndex(index)
  }
}

您试下这样可不可以

已经解决了，谢谢，这是一个分段按钮组件。

在HarmonyOS Next中实现该效果，需使用ArkTS声明式UI语法。通过自定义组件结合属性动画或转场动画API实现动态交互。利用组件状态管理驱动UI更新，配合弹性布局自动适配不同屏幕尺寸。具体实现涉及Canvas绘制、组件组合和动画插值器配置，无需依赖Java或C语言。

在HarmonyOS Next中实现这种动态效果，可以通过ArkUI的动画能力结合自定义组件来完成。具体步骤如下：

  1. 使用Canvas绘制基础图形
    通过CanvasRenderingContext2D绘制圆形、矩形等几何图形作为动态元素的基础。

  2. 属性动画实现形变与位移
    对图形的position、scale、opacity等属性应用animateTo方法，配置曲线函数（如Curves.EaseInOut）和动画时长，实现平滑过渡。

  3. 粒子系统模拟复杂运动
    若涉及粒子效果（如散点、流光），可封装粒子类，通过requestAnimationFrame逐帧计算粒子位置，并用Canvas批量渲染。

  4. 手势交互触发动画
    通过Gesture组件的onTouch或onClick事件启动动画序列，结合Promise链式调用实现多阶段动画衔接。

示例代码片段：

// 绘制圆形并添加缩放动画
@State scale: number = 1.0

Canvas(this.context)
  .onClick(() => {
    animateTo({ duration: 500, curve: Curve.EaseIn }, () => {
      this.scale = this.scale === 1.0 ? 1.5 : 1.0
    })
  })
  .scale({ x: this.scale, y: this.scale })

注意调整动画参数优化性能，避免频繁重绘。若需更复杂效果，可结合@Reusable装饰器提升渲染效率。

回到顶部