HarmonyOS 如何实现图片进度条彩色显示？ （API12+）

1.aboutToAppear生命周期中启动定时器，每500ms触发一次，通过增加状态变量progress从0.0到1.0控制图片变化进度。

aboutToAppear() {
  this.timer = setInterval(() => {
    this.progress = Math.min(1, this.progress + 0.1)
    if (this.progress >= 1) {
      clearInterval(this.timer)
    }
  }, 200)

2.使用Stack叠加两张内容相同但颜色不同的图片比如灰色和彩色，彩色图片始终完整显示在底层，灰色图片通过clipShape进行裁剪，裁剪宽度随progress变化：

Stack({ alignContent: Alignment.Start }) {
  Image(this.colorImage)
    .width('100%')
    .height('100%')
    .objectFit(ImageFit.Contain)
  Image(this.grayImage)
    .width('100%')
    .height('100%')
    .objectFit(ImageFit.Contain)
    .clip(true)
    .clipShape(new Rect({
      width: `${this.progress * 100}%`,
      height: '100%'
    }))
    .transform({ translateX: `${(1 - this.progress) * 300}px` })
}
.width(300)
.height(300)

完整示例代码如下：

@Entry
@Component
struct ImageProgress {
  @State progress: number = 0.0
  private grayImage: Resource = $r('app.media.start') // 对应彩色图片
  private colorImage: Resource = $r('app.media.final') // 对应灰色图片
  private timer: number = 0

  aboutToAppear() {
    this.timer = setInterval(() => {
      this.progress = Math.min(1, this.progress + 0.1)
      if (this.progress >= 1) {
        clearInterval(this.timer)
      }
    }, 200)
  }

aboutToDisappear() {
  clearInterval(this.timer)
}

build() {
  Column() {
    Stack({ alignContent: Alignment.Start }) {
      Image(this.colorImage)
        .width('100%')
        .height('100%')
        .objectFit(ImageFit.Contain)

      Image(this.grayImage)
        .width('100%')
        .height('100%')
        .objectFit(ImageFit.Contain)
        .clip(true)
        .clipShape(new Rect({
          width: `${this.progress * 100}%`,
          height: '100%'
        }))
        .transform({ translateX: `${(1 - this.progress) * 300}px` })
    }
    .width(300)
    .height(300)
  }
  .width('100%')
  .height('100%')
  .justifyContent(FlexAlign.Center)
}
}