OpenHarmony实战开发-如何使用绘制组件实现自定义进度动画。

本文链接：https://blog.csdn.net/2401_82546228/article/details/137869901

本文详细介绍了如何在鸿蒙开发环境中使用Circle和Path组件创建实时进度指示器，包括颜色变化和按钮控制，适用于电池电量、油量等场景，并提供了代码实现和学习资源链接。

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

介绍

本示例介绍使用绘制组件中的Circle组件以及Path组件实现实时进度效果。该场景多用于手机电池电量、汽车油量、水位变化等动态变化中。

效果预览图

在这里插入图片描述

使用说明

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

实现思路

1.使用Circle组件绘制外层的圆环。

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

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

// 进度展示
  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