HarmonyOS Next 使用绘制组件实现自定义进度动画

最新推荐文章于 2024-09-29 19:27:55 发布

2401_84181731

最新推荐文章于 2024-09-29 19:27:55 发布

阅读量1.2k

点赞数 14

分类专栏： 2024年程序员学习文章标签： harmonyos 信息可视化人工智能

本文链接：https://blog.csdn.net/2401_84181731/article/details/137653079

版权

本文介绍如何在HarmonyOS Next中利用Circle组件和Path组件创建自定义的进度动画，详细阐述实现思路，包括点击按钮时进度动态变化的逻辑。还提供了鸿蒙开发的学习路线和相关资源。

摘要由CSDN通过智能技术生成

加载完成后初始显示进度为0%，颜色为红色，且有充电、放电两个按钮。
点击充电按钮，进度会持续增长，直到100%时绿色填充满整个圆形，当到达20%以上和80%以上时，颜色动态变化。
点击耗电按钮，进度会持续下降，直到0%恢复1中的初始效果，当到达20%以下和80%以下时，颜色动态变化。

实现思路

使用Circle组件绘制外层的圆环。源码参考PaintComponent.ets。

  // 外框圆环
  Circle({ width: Constants.BIG_DIAMETER, height: Constants.BIG_DIAMETER })
    .fill(Constants.COLOR_TRANSPARENT)
    .stroke(this.colorBackgroundFill)
    .strokeWidth($r("app.integer.outer_circle_stroke_width"))

绘制中间的进度的填充。中间的填充有两个状态：1、在进度100%时是填充颜色的圆形；2、在进度不足100%时，使用Path组件绘制闭合曲线实现。源码参考PaintComponent.ets。

  // 进度展示
  Circle({ width: Constants.DIAMETER, height: Constants.DIAMETER })
    .fill(this.bgColor)

  // TODO:知识点:使用Path组件绘制封闭曲线，实现水位线效果
  Path()
    .width(Constants.DIAMETER)
    .height(Constants.DIAMETER)
    .commands(this.pathCommands)
    .fill(this.colorBackgroundFill)
    .antiAlias(true)
    .stroke(this.colorBackgroundFill)
    .strokeWidth($r("app.integer.path_stroke_width"))

计算封闭曲线。水位线的端点的纵坐标y与进度k的关系为：y=(1-k)*2r，而圆心坐标为(r,r)，以此确定水位线的坐标，然后拼接成绘制封闭曲线的commands。源码参考PaintComponent.ets。

  /**
   * 根据进度拿到水位线的端点的纵坐标
   *
   * @param progressPercent 进度百分比
   * @returns 水位线的端点的纵坐标
   */
  getOrdinate(progressPercent: number): number {
    return (Constants.UNIT_ONE - progressPercent) * (Constants.RADIUS_IN_PX + Constants.RADIUS_IN_PX);
  }

  /**
   * 根据圆心，以及纵坐标拿到水位线两个端点的距离的平方
   *
   * @param ord