自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

如何實(shí)現(xiàn)波紋進(jìn)度條（ArkUI）

作者：野生菌君
系統(tǒng) OpenHarmony
應(yīng)用開發(fā)過程中經(jīng)常用到波紋進(jìn)度條，常見的如充電進(jìn)度、下載進(jìn)度、上傳進(jìn)度等，本例即為大家介紹如何實(shí)現(xiàn)上述場景。

想了解更多關(guān)于開源的內(nèi)容，請?jiān)L問：

51CTO 開源基礎(chǔ)軟件社區(qū)

https://ost.51cto.com

場景說明

應(yīng)用開發(fā)過程中經(jīng)常用到波紋進(jìn)度條，常見的如充電進(jìn)度、下載進(jìn)度、上傳進(jìn)度等，本例即為大家介紹如何實(shí)現(xiàn)上述場景。

效果呈現(xiàn)

本示例最終效果如下：

運(yùn)行環(huán)境

本例基于以下環(huán)境開發(fā)，開發(fā)者也可以基于其他適配的版本進(jìn)行開發(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ù)來源，所以直接通過數(shù)據(jù)遞增來呈現(xiàn)效果）。
  • 圓框水紋區(qū)域繪制：通過Path組件的繪制命令（M、Q、T）去繪制水紋形狀并對中間進(jìn)行填充。
  • 底部進(jìn)度條展示（主要用于跟波紋進(jìn)度對比展示，方便大家理解）：使用Slider組件繪制進(jìn)度條。

開發(fā)步驟

針對上述所提到的內(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)寬
...

通過setInterval()方法讓outSetValue值一直增加到100，使進(jìn)度在規(guī)定時(shí)間內(nèi)完成，最后通過clearInterval結(jié)束自增。

具體代碼塊如下：

...
aboutToAppear() {
  this.test()
}
test() {
  let timer = setInterval(() => {  //開始定時(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)
}
...

通過方程表達(dá)進(jìn)度百分比和y的關(guān)系，通過Path組件的路徑繪制命令(M、Q、T)去繪制路徑生成封閉的自定義形狀并對中間進(jìn)行填充。

中間的填充有兩個(gè)狀態(tài)：

  • 在進(jìn)度100%時(shí)時(shí)填充顏色的圓形。
  • 在進(jìn)度不是100%時(shí)，使用Path組件繪制閉合曲線實(shí)現(xiàn)。

在使用Path組件繪制路徑時(shí)的計(jì)算過程和相關(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)就是在過圓心之后，需要反轉(zhuǎn)下繪制角度。
  • 使用 Q(x1 y1 x y) 和 T(x, y) 繪制對應(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 "";
}
...

繪制下方滑動條組件。

具體代碼塊如下：

...
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í)，滑動條拉滿，背景全滿
        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)
  }
}
場景說明
應(yīng)用開發(fā)過程中經(jīng)常用到波紋進(jìn)度條，常見的如充電進(jìn)度、下載進(jìn)度、上傳進(jìn)度等，本例即為大家介紹如何實(shí)現(xiàn)上述場景。

效果呈現(xiàn)
本示例最終效果如下：

如何實(shí)現(xiàn)波紋進(jìn)度條（ArkUI）-鴻蒙開發(fā)者社區(qū)

運(yùn)行環(huán)境
本例基于以下環(huán)境開發(fā)，開發(fā)者也可以基于其他適配的版本進(jìn)行開發(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ù)來源，所以直接通過數(shù)據(jù)遞增來呈現(xiàn)效果）。
圓框水紋區(qū)域繪制：通過Path組件的繪制命令（M、Q、T）去繪制水紋形狀并對中間進(jìn)行填充。
底部進(jìn)度條展示（主要用于跟波紋進(jìn)度對比展示，方便大家理解）：使用Slider組件繪制進(jìn)度條。
開發(fā)步驟
針對上述所提到的內(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)寬
...
1.
2.
3.
4.
5.
6.
7.
通過setInterval()方法讓outSetValue值一直增加到100，使進(jìn)度在規(guī)定時(shí)間內(nèi)完成，最后通過clearInterval結(jié)束自增。
具體代碼塊如下：

...
aboutToAppear() {
  this.test()
}
test() {
  let timer = setInterval(() => {  //開始定時(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)
}
...
1.
2.
3.
4.
5.
通過方程表達(dá)進(jìn)度百分比和y的關(guān)系，通過Path組件的路徑繪制命令（M、Q、T）去繪制路徑生成封閉的自定義形狀并對中間進(jìn)行填充。

中間的填充有兩個(gè)狀態(tài)：

1.在進(jìn)度100%時(shí)時(shí)填充顏色的圓形。

2.在進(jìn)度不是100%時(shí)，使用Path組件繪制閉合曲線實(shí)現(xiàn)。

在使用Path組件繪制路徑時(shí)的計(jì)算過程和相關(guān)函數(shù)的使用如下（坐標(biāo)系以Path組件的左上角為坐標(biāo)原點(diǎn)）：

如何實(shí)現(xiàn)波紋進(jìn)度條（ArkUI）-鴻蒙開發(fā)者社區(qū)

進(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)就是在過圓心之后，需要反轉(zhuǎn)下繪制角度。
使用 Q(x1 y1 x y) 和 T(x, y) 繪制對應(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 "";
}
...
1.
2.
3.
4.
5.
繪制下方滑動條組件
具體代碼塊如下：

...
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í)，滑動條拉滿，背景全滿
        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)
}
...
1.
2.
3.
4.
5.
完整代碼
具體代碼如下：

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)
  }
}

想了解更多關(guān)于開源的內(nèi)容，請?jiān)L問：

51CTO 開源基礎(chǔ)軟件社區(qū)

https://ost.51cto.com

責(zé)任編輯：jianghua 來源： 51CTO 開源基礎(chǔ)軟件社區(qū)
應(yīng)用開發(fā)波紋進(jìn)度條ArkUI
相關(guān)推薦

2024-06-13 08:15:00

2024-08-06 14:29:37

2022-09-09 14:47:50

CircleArkUI

2015-07-31 11:19:43

數(shù)字進(jìn)度條源碼

2009-08-17 15:48:47

C# WinForm進(jìn)

2009-08-17 14:41:47

C#進(jìn)度條實(shí)現(xiàn)

2024-12-02 09:37:51

2023-11-30 11:38:29

CSS網(wǎng)頁進(jìn)度條

2009-07-21 14:49:55

XmlHttpRequ文件上傳進(jìn)度條

2011-07-05 15:16:00

QT 進(jìn)度條

2024-07-25 08:55:47

進(jìn)度條水缸進(jìn)度動畫效果

2009-11-24 15:23:50

PHP文件上傳進(jìn)度條

2009-08-17 17:15:48

C# 進(jìn)度條效果

2012-07-13 13:52:54

Canvas

2009-08-17 14:36:15

C#進(jìn)度條實(shí)現(xiàn)

2009-06-06 18:54:02

JSP編程進(jìn)度條

2012-01-17 13:58:17

JavaSwing

2023-07-18 15:49:22

HTMLCSS

2021-12-02 09:31:22

Python 代碼進(jìn)度條

2015-01-12 12:13:03

Android進(jìn)度條ProgressDia
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號