OpenHarmony图表如何做动画

在 OpenHarmony（ArkUI / eTS） 中，实现图表动画主要有 三种常见方式，取决于你使用的是 系统组件、第三方图表库，还是自定义 Canvas 绘制。

下面按实用程度给你讲清楚。

一、使用第三方图表库（最推荐 ✅）

1. 使用官方/社区图表库（如 @ohos/mpchart 或类似 ECharts 封装）

特点

• 自带动画（入场、更新、过渡）
• 使用成本低
• 适合业务图表

示例（伪代码，基于常见图表库）

LineChart()
  .data(lineData)
  .animation(true)        // 开启动画
  .animationDuration(800)

不同库 API 不同，但基本都有 animation / animate / duration

二、使用 ArkUI 属性动画（适合简单图表）

适用场景

• 柱状图
• 进度图
• 简单状态变化

示例：柱状图增长动画

@State height: number = 0

aboutToAppear() {
  animateTo({ duration: 1000 }, () => {
    this.height = 200
  })
}

build() {
  Column() {
    Rect()
      .width(40)
      .height(this.height)
      .backgroundColor(Color.Blue)
  }
}

✅ 优点：简单
❌ 缺点：不适合复杂图表

三、Canvas 自定义图表 + requestAnimationFrame（高级 ✅）

适用场景

• 曲线图
• 实时数据
• 高度定制动画

核心思路

1. 用 Canvas 绘制
2. 用 requestAnimationFrame 持续重绘
3. 用插值算法做过渡

示例：折线动画

drawFrame(progress: number) {
  ctx.clearRect(0, 0, width, height)
  ctx.beginPath()
  for (let i = 0; i <= progress * points.length; i++) {
    ctx.lineTo(points[i].x, points[i].y)
  }
  ctx.stroke()
}

startAnimation() {
  let p = 0
  const step = () => {
    p += 0.02
    this.drawFrame(p)
    if (p < 1) requestAnimationFrame(step)
  }
  requestAnimationFrame(step)
}

四、动画类型总结

五、推荐方案

✅ 业务项目：第三方图表库
✅ 轻量 UI：ArkUI 属性动画
✅ 复杂可视化：Canvas 自绘

如果你愿意，可以告诉我：

• OpenHarmony 版本（3.x / 4.x）
• 图表类型（折线 / 柱状 / 饼图）
• 是否使用 ArkTS 或 JS

我可以直接给你 可运行示例代码。