如何实现圆形进度条？

【问题描述】

应用开发过程中经常用到波纹进度条，常见的如充电进度、下载进度、上传进度等，这种是如何实现的呢？

【运行环境】

硬件：rk3568；  

IDE: DevEco Studio 3.1 Beta2；

SDK: Ohos_sdk_public 3.2.11.9(API Version 9 Release)；

运行环境

本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：

• IDE: DevEco Studio 3.1 Beta2
• SDK: Ohos_sdk_public 3.2.11.9(API Version 9 Release)
  

实现思路：

• 进度条的圆形外框：使用Circle组件绘制外层圆环,实现外层框架。
• 圆框内进度数值变化：使用setInterval()让进度值持续递增控制进度数据变化（本案例未提供实时数据来源，所以直接通过数据递增来呈现效果）。
• 圆框水纹区域绘制：通过Path组件的绘制命令（M、Q、T）去绘制水纹形状并对中间进行填充。
• 底部进度条展示（主要用于跟波纹进度对比展示，方便大家理解）：使用Slider组件绘制进度条。
  

展示效果

完整代码

1. const COLOR_TRANSPARENT = '#00000000'
   
2. const COLOR_BACKGROUND_FILL = '#7ebede'
   
3. 
   
4. const DIAMETER = 200;
   
5. const RADIUS_IN_PX = vp2px(DIAMETER / 2.0);
   
6. const BIG_DIAMETER = 220;
   
7. 
   
8. 
   
9. @Entry
   
10. @Component
    
11. struct Page3 {
    
12.   @State outSetValue: number = 0
    
13.   @State pathCommands: string = ''
    
14.   @State backGroundColor: string = '#00000000'
    
15. 
    
16.   onPageShow() {
    
17.     this.pathCommands = this.calPathCommands(this.outSetValue);
    
18.   }
    
19. 
    
20.   calXSquare(y: number) {
    
21.     return RADIUS_IN_PX * RADIUS_IN_PX - (y - RADIUS_IN_PX) * (y - RADIUS_IN_PX);
    
22.   }
    
23. 
    
24.   calY(k: number) {
    
25.     return (1 - k) * RADIUS_IN_PX * 2;
    
26.   }
    
27. 
    
28.   formatPathCommands(x1: number, x2: number, y: number, radius: number) {
    
29.     return `M${x1} ${y} A${radius} ${radius} 0 ${y > RADIUS_IN_PX ? 0 : 1} 0  ${x2} ${y} `
    
30.     + `Q${(x1 + 3 * x2) / 4} ${y + 12.5 * (x2 - x1) / radius}, ${(x1 + x2) / 2} ${y} T${x1} ${y}`
    
31.   }
    
32. 
    
33.   calPathCommands(value: number) {
    
34.     let y = this.calY(value / 100.0)
    
35.     let squareX = this.calXSquare(y)
    
36.     if (squareX >= 0) {
    
37.       let x = Math.sqrt(squareX);
    
38.       let x1 = RADIUS_IN_PX - x;
    
39.       let x2 = RADIUS_IN_PX + x;
    
40.       return this.formatPathCommands(x1, x2, y, RADIUS_IN_PX);
    
41.     }
    
42.     return "";
    
43.   }
    
44. 
    
45.   aboutToAppear() {
    
46.     this.test()
    
47.   }
    
48.   test() {
    
49.     let timer = setInterval(() => {
    
50.       if (this.outSetValue < 100) {
    
51.         this.outSetValue += 1
    
52.         if (this.outSetValue == 100) {
    
53.           this.backGroundColor = COLOR_BACKGROUND_FILL
    
54.           this.pathCommands = '';
    
55.         } else {
    
56.           this.backGroundColor = COLOR_TRANSPARENT
    
57.           this.pathCommands = this.calPathCommands(this.outSetValue);
    
58.         }
    
59.       } else {
    
60.         clearInterval(timer)
    
61.       }
    
62.     }, 100)
    
63.   }
    
64.   build() {
    
65. 
    
66.     Column() {
    
67.       Column() {
    
68.         Stack() {
    
69.           // 外框圆环
    
70.           Circle({ width: BIG_DIAMETER, height: BIG_DIAMETER })
    
71.             .fill(COLOR_TRANSPARENT)
    
72.             .stroke('#007DFF')
    
73.             .strokeWidth(5)
    
74.           // 进度显示
    
75. 
    
76.           Circle({ width: DIAMETER, height: DIAMETER })
    
77.             .fill(this.backGroundColor)
    
78.           Path()
    
79.             .width(DIAMETER)
    
80.             .height(DIAMETER)
    
81.             .commands(this.pathCommands)
    
82.             .fill(COLOR_BACKGROUND_FILL)
    
83. 
    
84.           // 进度
    
85.           Text(this.outSetValue.toFixed(0) + "%")
    
86.             .fontSize(60)
    
87. 
    
88. 
    
89.         }.width(BIG_DIAMETER)
    
90.         .height(BIG_DIAMETER)
    
91. 
    
92. 
    
93.         Row() {
    
94.           Slider({
    
95.             value: this.outSetValue,
    
96.             min: 0,
    
97.             max: 100,
    
98.             step: 1,
    
99.             style: SliderStyle.OutSet
    
100.           })
     
101.             .blockColor('#FFFFFF')
     
102.             .trackColor('#182431')
     
103.             .selectedColor('#007DFF')
     
104.             .showSteps(true)
     
105.             .showTips(true)
     
106.             .onChange((value: number, mode: SliderChangeMode) => {
     
107.               if(this.outSetValue == 0) {
     
108.                 this.test()
     
109.               }
     
110.               this.outSetValue = value
     
111.               if (this.outSetValue == 100) {
     
112.                 this.backGroundColor = COLOR_BACKGROUND_FILL
     
113.                 this.pathCommands = '';
     
114.               } else {
     
115.                 this.backGroundColor = COLOR_TRANSPARENT
     
116.                 this.pathCommands = this.calPathCommands(this.outSetValue);
     
117.               }
     
118.               console.log(`value = ${value} ->` + this.pathCommands);
     
119.             })
     
120.           Text(this.outSetValue.toFixed(0)).fontSize(16)
     
121.         }
     
122.         .padding({ top: 50 })
     
123.         .width('80%')
     
124. 
     
125.       }.width('100%')
     
126.     }
     
127.     .height('100%')
     
128.     .justifyContent(FlexAlign.Center)
     
129.   }
     
130. }

复制代码

回复 三只小海豚: 单走一个666666666