鸿蒙(HarmonyOS)应用开发实战——使用绘制组件实现自定义进度动画

最新推荐文章于 2025-08-14 09:09:04 发布

原创

最新推荐文章于 2025-08-14 09:09:04 发布 · 1.2k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #鸿蒙开发 #组件化 #移动开发 #ArkUI #自定义控件 #实战开发

往期知识点整理

鸿蒙（HarmonyOS）北向开发知识点记录~
被裁员后，踏上了鸿蒙开发求职之路
持续更新中……

介绍

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

效果预览图

使用说明

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

实现思路

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

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

绘制中间的进度的填充。中间的填充有两个状态：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