HarmonyOS 如何实现跑分效果

参考示例如下：

index.ets

@State @Watch("scoreChange") value: number = 0
@State score:string[] = []
aboutToAppear(): void {
  this.scoreChange()
}

scoreChange() {
  this.score = this.value.toString().split("")
  console.log("this.score.toString():" + this.score.toString())
}

SwiperNums({ score: this.score, value: this.value })

SwiperNums.ets

@Component
export struct SwiperNums {
  swiperData: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  @Link @Watch("valueChange") value: number;
  @Link score: string[];
  @State stop: boolean[] = []

  aboutToAppear(): void {
    for (let i = 0; i < this.score.length; i++) {
      this.stop[i] = false
    }
  }

  valueChange() {
    for (let i = 0; i < this.stop.length; i++) {
      this.stop[i] = false
    }
  }

  build() {
    if (this.value === 0) {
      Column() {
        Text("0")
          .fontSize(18)
          .width("80%")
          .fontColor(Color.White)
      }
    } else {
      Row() {
        ForEach(this.score, (item1: string, index1: number) => {
          Swiper() {
            ForEach(this.swiperData, (item: number) => {
              Column() {
                Text(`${item}`)
                  .fontSize(18)
                  .width("80%")
                  .fontColor(Color.White)
              }.alignItems(HorizontalAlign.Start)
            }, (item: number) => JSON.stringify(item))
          }
          .width(10)
          .loop(true)
          .autoPlay(!this.stop[index1])
          .vertical(true)
          .indicator(false)
          .interval(100 / (index1 + 1))
          .duration(200 / (index1 + 1))
          .curve(Curve.EaseOut)
          .index(Number.parseInt(item1))
          .onChange((index: number) => {
            if (item1 === index + "") {
              setTimeout(() => {
                this.stop[index1] = true
                console.log(`onChange:第${index1}个的数字为${index}}`)
              }, 500)
            }
          })
        })
      }
    }
  }
}