HarmonyOS 如何实现ring进度条由白色逐渐变成透明色？

Question

使用progress无法满足

Answer 1

可参考：

@Entry
@Component
struct ProgressExample {
  @State progressValue: number = 100
  @State animationId: number | null = null
  private gradientColor: LinearGradient = new LinearGradient([{ color: Color.Transparent, offset: 0.2 },
    { color: Color.White, offset: 0.5 }])
  build() {
    Column({ space: 15 }) {
      Progress({ value: 0, total: 100, type: ProgressType.Ring })
        // .color(this.gradientColor)
        .color(Color.Gray)
        .value(this.progressValue)
        .width(100)
        .style({ strokeWidth: 10, scaleCount: 20, scaleWidth: 5, enableSmoothEffect: true })
        .backgroundColor(Color.White)
        .rotate({
          x: 0,
          y: 1,
          z: 0,
          centerX: '50%',
          centerY: '50%',
          angle: 180
        })
      Button('开始动画').onClick(() => {
        if (this.animationId === null) {
          this.animationId = setInterval(() => {
            this.progressValue--
            if (this.progressValue == 0) {
              this.progressValue = 100
            }
          }, 10)
        }
        console.log(this.animationId.toString())
      })
      Button('结束动画').onClick(() => {
        clearInterval(this.animationId)
        this.animationId = null
        this.progressValue = 100
      })
    }.width('100%').padding({ top: 5 }).backgroundColor(Color.Red)
  }
}