[UI动效] HarmonyOS鸿蒙Next数字滚动组件（没小数，没分隔符，可以加前缀后缀）

[UI动效] HarmonyOS鸿蒙Next数字滚动组件（没小数，没分隔符，可以加前缀后缀） 运行效果

思考：如果我要做分隔符，一定会做4位分隔符，符合中国人习惯。。。最好人家来适应我们。。。

@Entry
@Component
struct 滚动数字 {
  @State g滚:boolean=true

  build() {
    Column({space:20}) {
      Row(){
        Button('重置').type(ButtonType.Normal).borderRadius(6).fontSize(25)
          .onClick(async () =>{
            this.g滚=false
            await new Promise(resolve=>{
              setTimeout(()=>resolve(this.g滚=true),50)
            })
          })
      }.width('60%').height(60).justifyContent(FlexAlign.SpaceEvenly)
      .zIndex(200)

      if(this.g滚){
        szgd数字滚动({
          sz数字:'163',
          hz后缀:'%',
          ztdx字体大小:20,ztcx字体粗细:800,ztys字体颜色: '#fff30000'
        })

        szgd数字滚动({
          qz前缀:'￥',qzztdx前缀字体大小:20,
          sz数字:'82087',
          hz后缀:'元', hzztdx后缀字体大小:20,
          ztdx字体大小:40, ztcx字体粗细:800, ztys字体颜色: '#ffffffff'
        })

        szgd数字滚动({sz数字:'99287',hz后缀:' 千克', ztdx字体大小:15, ztcx字体粗细:200, ztys字体颜色: '#ff0099ff'})

        szgd数字滚动({
          qz前缀:'+',qzztdx前缀字体大小:30,
          sz数字:'19985654',
          ztdx字体大小:40, ztcx字体粗细:800, ztys字体颜色: '#ffff5009'
        })

      }

    }.width('100%').height('100%').backgroundColor('#000').padding({top:20,bottom:20}).justifyContent(FlexAlign.Start)

  }
}

//从高位到低位滚动
@Component
struct szgd数字滚动 {
  @State sz数字:string=''
  qz前缀:string=''
  qzztdx前缀字体大小:number=0
  hz后缀:string=''
  hzztdx后缀字体大小:number=0
  ztdx字体大小:number=20
  ztcx字体粗细:number=600
  ztys字体颜色:string='#ddd'
  @State tempsz:string = ''
  @State szsz数字数组:string[] = []
  @State tempszsz数字数组:string[]=[]
  @State py偏移数组:number=[]
  yc延迟:number=300
  nb:number[]=[0,1,2,3,4,5,6,7,8,9,0]
  @State kg开滚:boolean=false
  zg字高:number=0

  fgsz分割数字(sz:string){
    let szsz:string[]=[]
    let py:number[]=[]
    let temp:string[]=[]
    for (let i = 0; i < sz.length; i++) {
      szsz.push(sz.charAt(i))
      py.push(0)
      temp.push('')
    }
    this.szsz数字数组=szsz
    this.py偏移数组=py
    this.tempszsz数字数组=temp
    this.kg开滚=false
  }

  async gun正向滚(){
    this.zg字高=fp2px(this.ztdx字体大小 * 0.6)
    if(this.qzztdx前缀字体大小==0){this.qzztdx前缀字体大小=this.ztdx字体大小}
    if(this.hzztdx后缀字体大小==0){this.hzztdx后缀字体大小=this.ztdx字体大小}
    const gun = await new Promise(resolve =>{
      setTimeout(()=>{
        resolve(this.fgsz分割数字(this.sz数字));
      }, 100);
    }).then(()=>{
      setTimeout(()=>{
        this.kg开滚 = true
        for (let i = 0; i < this.szsz数字数组.length; i++) {
          setTimeout(()=>{
            this.tempszsz数字数组[i] = this.szsz数字数组[i].toString()
          }, 200)
        }
      },300)
    })
  }

  jspy计算偏移(i:number):number{
    let py
    animateTo({
      duration:800,
      curve:Curve.LinearOutSlowIn,
      delay:i*20
    },()=>{
      let nb=this.tempszsz数字数组[i]
      py=-nb*this.zg字高
    })
    return py
  }

  build() {
    Row({space:5}){
      if(this.kg开滚) {
        Text(this.qz前缀)
          .fontSize(this.qzztdx前缀字体大小).fontColor(this.ztys字体颜色)
          .fontWeight(this.ztcx字体粗细)
          .height(this.zg字高)

        ForEach(this.szsz数字数组,(nb:string,i:number)=>{
          Row () {
            Column () {
              ForEach(this.nb, (i: number) =>{
                Text(i.toString())
                  .fontSize(this.ztdx字体大小).fontColor(this.ztys字体颜色)
                  .fontWeight(this.ztcx字体粗细)
                  .height(this.zg字高)
              })
            }.justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Center)
            .translate({ y: this.jspy计算偏移(i) })
            .animation({
              duration: 500 * (i + 1),
              delay: 500 * i,
              curve: Curve.FastOutSlowIn
            })
          }.height(this.zg字高).justifyContent(FlexAlign.Center).clip(true)
          .transition({opacity:0})
        })

        Text(this.hz后缀)
          .fontSize(this.hzztdx后缀字体大小).fontColor(this.ztys字体颜色)
          .fontWeight(this.ztcx字体粗细)
          .height(this.zg字高)
      }

    }.justifyContent(FlexAlign.Center).zIndex(10)
    .onAppear(()=>this.gun正向滚())
    .onClick(()=>this.gun正向滚())
  }
}