OpenHarmony图表如何动画

在 OpenHarmony（ArkUI，eTS/ArkTS） 中，图表的“动画”通常有两种实现思路：

1. 使用官方/三方图表组件自带的动画能力
2. 通过 ArkUI 动画 API 自己驱动图表数据/属性变化

下面分别说明。

一、使用图表组件自带的动画（推荐）

1. 使用 OpenHarmony 官方图表（如 @ohos/arkui.charts）

OpenHarmony 提供了 图表组件（Chart），如：

• LineChart
• BarChart
• PieChart

这些组件 默认支持进场动画。

示例（柱状图动画）：

import { BarChart, BarData, BarChartModel } from '@ohos/arkui.charts'

@Entry
@Component
struct ChartExample {
  private model: BarChartModel = new BarChartModel()

  aboutToAppear() {
    let data: BarData[] = [
      { value: 10 },
      { value: 20 },
      { value: 30 }
    ]
    this.model.setData(data)
  }

  build() {
    Column() {
      BarChart({ model: this.model })
        .width('100%')
        .height(300)
    }
  }
}

✅ 特点：

• 数据设置后会自动播放动画
• 不用自己写动画逻辑

二、通过 ArkUI 动画驱动图表变化（更灵活）

适合：

• 自定义 Canvas 图表
• 动态更新数据
• 控制动画过程

1. 使用 animateTo

@Entry
@Component
struct AnimChart {
  @State heightList: number[] = [50, 100, 150]

  build() {
    Column() {
      Button('更新数据')
        .onClick(() => {
          animateTo({ duration: 800 }, () => {
            this.heightList = [120, 80, 200]
          })
        })

      Row() {
        ForEach(this.heightList, (h: number) => {
          Column()
            .width(40)
            .height(h)
            .backgroundColor(Color.Blue)
        })
      }
    }
  }
}

✅ 适用于：

• 柱状图
• 进度图
• 简单自定义图表

2. 使用 Canvas + requestAnimationFrame

适合复杂图表动画（折线、曲线、实时数据）。

@Entry
@Component
struct CanvasChart {
  private ctx: CanvasRenderingContext2D | null = null
  @State progress: number = 0

  aboutToAppear() {
    let last = Date.now()
    const loop = () => {
      const now = Date.now()
      this.progress += (now - last) / 1000
      last = now
      this.draw()
      if (this.progress < 1) {
        requestAnimationFrame(loop)
      }
    }
    requestAnimationFrame(loop)
  }

  draw() {
    if (!this.ctx) return
    this.ctx.clearRect(0, 0, 300, 300)
    this.ctx.fillStyle = '#007DFF'
    this.ctx.fillRect(0, 300 - this.progress * 200, 50, this.progress * 200)
  }

  build() {
    Canvas(this.ctx ? this.ctx : (this.ctx = new CanvasRenderingContext2D()))
      .width(300)
      .height(300)
  }
}

三、常见动画类型建议

四、开发建议

✅ 优先使用官方图表组件
✅ 动画时长控制在 300–800ms
✅ 避免频繁 setState 导致卡顿
✅ 复杂动画用 Canvas，不用组件堆叠

如果你能告诉我：

• 使用的 OpenHarmony 版本
• 图表类型（折线 / 柱状 / 饼图）
• 是否使用 ArkTS / eTS

我可以给你一份 可直接运行的完整示例代码。