通過(guò)ArkUI實(shí)現(xiàn)波紋進(jìn)度條
作者：野生菌君
應(yīng)用開(kāi)發(fā)過(guò)程中經(jīng)常用到波紋進(jìn)度條，常見(jiàn)的如充電進(jìn)度、下載進(jìn)度、上傳進(jìn)度等，本例即為大家介紹如何實(shí)現(xiàn)上述場(chǎng)景。
效果呈現(xiàn)
本示例最終效果如下：
運(yùn)行環(huán)境
本例基于以下環(huán)境開(kāi)發(fā)，開(kāi)發(fā)者也可以基于其他適配的版本進(jìn)行開(kāi)發(fā)：
- IDE: DevEco Studio 3.1 Beta2
- SDK: Ohos_sdk_public 3.2.11.9(API Version 9 Release)
實(shí)現(xiàn)思路
本示例涉及4個(gè)主要特性及其實(shí)現(xiàn)方案如下：
- 進(jìn)度條的圓形外框：使用Circle組件繪制外層圓環(huán),實(shí)現(xiàn)外層框架。
- 圓框內(nèi)進(jìn)度數(shù)值變化：使用setInterval()讓進(jìn)度值持續(xù)遞增控制進(jìn)度數(shù)據(jù)變化（本案例未提供實(shí)時(shí)數(shù)據(jù)來(lái)源，所以直接通過(guò)數(shù)據(jù)遞增來(lái)呈現(xiàn)效果）。
- 圓框水紋區(qū)域繪制：通過(guò)Path組件的繪制命令（M、Q、T）去繪制水紋形狀并對(duì)中間進(jìn)行填充。
- 底部進(jìn)度條展示（主要用于跟波紋進(jìn)度對(duì)比展示，方便大家理解）：使用Slider組件繪制進(jìn)度條。
開(kāi)發(fā)步驟
針對(duì)上述所提到的內(nèi)容，具體實(shí)現(xiàn)步驟如下:
先使用Cricle組件繪制外層的圓環(huán).
具體代碼塊如下：
...
// 外框圓環(huán)
Circle({ width: BIG_DIAMETER, height: BIG_DIAMETER })
.fill(COLOR_TRANSPARENT) // 填充：透明
.stroke('#007DFF') //圓環(huán)顏色
.strokeWidth(5) //圓環(huán)環(huán)寬
...通過(guò)setInterval()方法讓outSetValue值一直增加到100，使進(jìn)度在規(guī)定時(shí)間內(nèi)完成，最后通過(guò)clearInterval結(jié)束自增。
具體代碼塊如下：
...
aboutToAppear() {
this.test()
}
test() {
let timer = setInterval(() => { //開(kāi)始定時(shí)
if (this.outSetValue < 100) {
//進(jìn)度值每次+1
this.outSetValue += 1
//進(jìn)度顯示
if (this.outSetValue == 100) {
this.backGroundColor = COLOR_BACKGROUND_FILL
this.pathCommands = '';
} else {
this.backGroundColor = COLOR_TRANSPARENT
this.pathCommands = this.calPathCommands(this.outSetValue);
}
} else {
clearInterval(timer) //取消定時(shí)
}
}, 100)
}
...通過(guò)方程表達(dá)進(jìn)度百分比和y的關(guān)系，通過(guò)Path組件的路徑繪制命令（M、Q、T）去繪制路徑生成封閉的自定義形狀并對(duì)中間進(jìn)行填充。
中間的填充有兩個(gè)狀態(tài)：
- 在進(jìn)度100%時(shí)時(shí)填充顏色的圓形。
- 在進(jìn)度不是100%時(shí)，使用Path組件繪制閉合曲線實(shí)現(xiàn)。
在使用Path組件繪制路徑時(shí)的計(jì)算過(guò)程和相關(guān)函數(shù)的使用如下（坐標(biāo)系以Path組件的左上角為坐標(biāo)原點(diǎn)）：
- 進(jìn)度百分比和y的關(guān)系：y = （1-k）* 2r。
- 圓心點(diǎn)的坐標(biāo)是（r, r）,使用圓方程就可以計(jì)算出圓弧的起點(diǎn)和終點(diǎn)。
- 使用 A(rx ry x-axis-rotation large-arc-flag sweep-flag x y) 繪制圓弧，注意點(diǎn)就是在過(guò)圓心之后，需要反轉(zhuǎn)下繪制角度。
- 使用 Q(x1 y1 x y) 和 T(x, y) 繪制對(duì)應(yīng)的波浪，最后閉合路徑然后填充顏色。
具體代碼塊如下:
...
onPageShow() {
//校準(zhǔn)的路徑指令與進(jìn)度值
this.pathCommands = this.calPathCommands(this.outSetValue);
}
calXSquare(y: number) {
return RADIUS_IN_PX * RADIUS_IN_PX - (y - RADIUS_IN_PX) * (y - RADIUS_IN_PX);
}
calY(k: number) {
return (1 - k) * RADIUS_IN_PX * 2;//返回值為百分比
}
formatPathCommands(x1: number, x2: number, y: number, radius: number) {
//填充區(qū)域波浪線
return `M${x1} ${y} A${radius} ${radius} 0 ${y > RADIUS_IN_PX ? 0 : 1} 0 ${x2} ${y} `
+ `Q${(x1 + 3 * x2) / 4} ${y + 12.5 * (x2 - x1) / radius}, ${(x1 + x2) / 2} ${y} T${x1} ${y}`
}
calPathCommands(value: number) {
let y = this.calY(value / 100.0)
let squareX = this.calXSquare(y)
if (squareX >= 0) {
let x = Math.sqrt(squareX);
let x1 = RADIUS_IN_PX - x;
let x2 = RADIUS_IN_PX + x;
return this.formatPathCommands(x1, x2, y, RADIUS_IN_PX);
}
return "";
}
...繪制下方滑動(dòng)條組件.
具體代碼塊如下：
...
Row() {
Slider({
value: this.outSetValue,
min: 0,
max: 100,
step: 1,
style: SliderStyle.OutSet
})
.blockColor('#FFFFFF')
.trackColor('#182431')
.selectedColor('#007DFF')
.showSteps(true)
.showTips(true)
.onChange((value: number, mode: SliderChangeMode) => {
if(this.outSetValue == 0) {
this.test()
}
this.outSetValue = value //初始狀態(tài)
if (this.outSetValue == 100) {
this.backGroundColor = COLOR_BACKGROUND_FILL //進(jìn)度為100時(shí)，滑動(dòng)條拉滿，背景全滿
this.pathCommands = '';
} else {
this.backGroundColor = COLOR_TRANSPARENT 、
this.pathCommands = this.calPathCommands(this.outSetValue);
}
console.log(`value = ${value} ->` + this.pathCommands);
//進(jìn)度顯示
})
Text(this.outSetValue.toFixed(0)).fontSize(16)
}
...完整代碼
具體代碼如下：
const COLOR_TRANSPARENT = '#00000000'
const COLOR_BACKGROUND_FILL = '#7ebede'
const DIAMETER = 200;
const RADIUS_IN_PX = vp2px(DIAMETER / 2.0);
const BIG_DIAMETER = 220;
@Entry
@Component
struct Page3 {
@State outSetValue: number = 0
@State pathCommands: string = ''
@State backGroundColor: string = '#00000000'
onPageShow() {
this.pathCommands = this.calPathCommands(this.outSetValue);
}
calXSquare(y: number) {
return RADIUS_IN_PX * RADIUS_IN_PX - (y - RADIUS_IN_PX) * (y - RADIUS_IN_PX);
}
calY(k: number) {
return (1 - k) * RADIUS_IN_PX * 2;
}
formatPathCommands(x1: number, x2: number, y: number, radius: number) {
return `M${x1} ${y} A${radius} ${radius} 0 ${y > RADIUS_IN_PX ? 0 : 1} 0 ${x2} ${y} `
+ `Q${(x1 + 3 * x2) / 4} ${y + 12.5 * (x2 - x1) / radius}, ${(x1 + x2) / 2} ${y} T${x1} ${y}`
}
calPathCommands(value: number) {
let y = this.calY(value / 100.0)
let squareX = this.calXSquare(y)
if (squareX >= 0) {
let x = Math.sqrt(squareX);
let x1 = RADIUS_IN_PX - x;
let x2 = RADIUS_IN_PX + x;
return this.formatPathCommands(x1, x2, y, RADIUS_IN_PX);
}
return "";
}
aboutToAppear() {
this.test()
}
test() {
let timer = setInterval(() => {
if (this.outSetValue < 100) {
this.outSetValue += 1
if (this.outSetValue == 100) {
this.backGroundColor = COLOR_BACKGROUND_FILL
this.pathCommands = '';
} else {
this.backGroundColor = COLOR_TRANSPARENT
this.pathCommands = this.calPathCommands(this.outSetValue);
}
} else {
clearInterval(timer)
}
}, 100)
}
build() {
Column() {
Column() {
Stack() {
// 外框圓環(huán)
Circle({ width: BIG_DIAMETER, height: BIG_DIAMETER })
.fill(COLOR_TRANSPARENT)
.stroke('#007DFF')
.strokeWidth(5)
// 進(jìn)度顯示
Circle({ width: DIAMETER, height: DIAMETER })
.fill(this.backGroundColor)
Path()
.width(DIAMETER)
.height(DIAMETER)
.commands(this.pathCommands)
.fill(COLOR_BACKGROUND_FILL)
// 進(jìn)度
Text(this.outSetValue.toFixed(0) + "%")
.fontSize(60)
}.width(BIG_DIAMETER)
.height(BIG_DIAMETER)
Row() {
Slider({
value: this.outSetValue,
min: 0,
max: 100,
step: 1,
style: SliderStyle.OutSet
})
.blockColor('#FFFFFF')
.trackColor('#182431')
.selectedColor('#007DFF')
.showSteps(true)
.showTips(true)
.onChange((value: number, mode: SliderChangeMode) => {
if(this.outSetValue == 0) {
this.test()
}
this.outSetValue = value
if (this.outSetValue == 100) {
this.backGroundColor = COLOR_BACKGROUND_FILL
this.pathCommands = '';
} else {
this.backGroundColor = COLOR_TRANSPARENT
this.pathCommands = this.calPathCommands(this.outSetValue);
}
console.log(`value = ${value} ->` + this.pathCommands);
})
Text(this.outSetValue.toFixed(0)).fontSize(16)
}
.padding({ top: 50 })
.width('80%')
}.width('100%')
}
.height('100%')
.justifyContent(FlexAlign.Center)
}
}責(zé)任編輯：姜華
來(lái)源：
鴻蒙開(kāi)發(fā)者社區(qū)
