HarmonyOS 鸿蒙Next 循环Image，图片抖闪问题

HarmonyOS 鸿蒙Next 循环Image，图片抖闪问题

要实现头像循环轮播控件

Android:是这个思路

https://blog.csdn.net/hongli_sun/article/details/125878468?spm=1001.2014.3001.5506

鸿蒙把Text换成了Image，会出现图片抖闪现象

@ObservedV2

class HeadItem {

  title: string = ''

  @Trace scale: number = 1

  @Trace visible: boolean = true

  color: number = 0xFFFFFF * Math.random()

  imageUrl:string = ''

}

@Entry

@Component

export struct CatePage {

  @State headList:HeadItem[] = []

  scroller: Scroller = new Scroller()

  @State showIndex:number = 1

  intervalNum = -1

  @State ImageWidth:number = 50

  hotCrazyAvatarList: Array<string> = [];



  aboutToAppear(): void {

    this.hotCrazyAvatarList.push("http://file.bangruijituan.com/87ce36ddaade0f2814c12ab72fb2139e477d7de228fcfb8d32b7adfacce642af.png")

    this.hotCrazyAvatarList.push("https://pxmpic.cnrmall.com/matter/ad/8f/ad8fad7a7add568e178240ce63595b4f.png")

    this.hotCrazyAvatarList.push("https://pxmpic.cnrmall.com/matter/1e/73/1e73dc286dee292374fdf4b50bad18b2.png")

    this.hotCrazyAvatarList.push("https://pxmpic.cnrmall.com/matter/70/ac/70ac1fb6059cb1f8bb66a553268c0b8d.png")

    this.hotCrazyAvatarList.push("https://pxmpictest.cnrmall.com/matter/32/ea/32ea0aaede3aad42b151988f8708d3e2.png")

    this.hotCrazyAvatarList.push("http://file.bangruijituan.com/87ce36ddaade0f2814c12ab72fb2139e477d7de228fcfb8d32b7adfacce642af.png")

    this.hotCrazyAvatarList.push("https://pxmpic.cnrmall.com/matter/ad/8f/ad8fad7a7add568e178240ce63595b4f.png")

    this.hotCrazyAvatarList.push("https://pxmpic.cnrmall.com/matter/1e/73/1e73dc286dee292374fdf4b50bad18b2.png")

    this.hotCrazyAvatarList.push("https://pxmpic.cnrmall.com/matter/70/ac/70ac1fb6059cb1f8bb66a553268c0b8d.png")

    this.hotCrazyAvatarList.push("https://pxmpictest.cnrmall.com/matter/32/ea/32ea0aaede3aad42b151988f8708d3e2.png")

    for (let index = 0; index < this.hotCrazyAvatarList.length; index++) {

      let item = new HeadItem()

      item.title = index.toString()

      item.imageUrl  = this.hotCrazyAvatarList[index]

      this.headList.push(item)

    }

    this.showIndex = Math.floor(this.hotCrazyAvatarList.length / 2)

    this.showNext()

    this.intervalNum = setInterval(()=>{

      this.showNext()

    },2000)

  }

  aboutToDisappear(): void {

    clearInterval(this.intervalNum)

  }

  build() {

    Column() {

      Scroll(this.scroller){

        Row(){

          ForEach(this.headList,(item:HeadItem,index)=>{

            Image(item.imageUrl)

              .width(this.ImageWidth)

              .height(this.ImageWidth)

              .borderRadius('50%')

              .clip(true)

              .margin({left:-10})

              .scale({ x: item.scale, y: item.scale })

              .visibility(item.visible ? Visibility.Visible : Visibility.Hidden)

          })

        }

        .margin({left:-50})

      }

      .scrollBar(BarState.Off)

      .scrollable(ScrollDirection.Horizontal)

      .width(155)

      .height(100)

      .align(Alignment.Center)

      .hitTestBehavior(HitTestMode.None)

    }

  }

  showNext(){

    animateTo({

      duration: 1000,

      curve: Curve.EaseOut,

      iterations: 1,

      playMode: PlayMode.Normal,

      onFinish:()=>{

        this.headList.push(this.headList[0])

        this.headList.shift()

        this.scroller.scrollBy(-this.ImageWidth + 10,0)

      }

    }, () => {

      console.info("加入头像"+this.headList[this.showIndex].title)

      this.headList[this.showIndex].visible = true

      this.headList[this.showIndex + 1].visible = false

      this.headList[this.showIndex].scale = 1.1

      if(this.showIndex >= 3){

        this.headList[this.showIndex - 3].scale = 0.8

        this.headList[this.showIndex - 3].visible = false

      }

      this.scroller.scrollBy(this.ImageWidth - 10,0)

      if(this.showIndex === 0){

        this.headList[this.headList.length - 1].scale = 1

      }else{

        this.headList[this.showIndex - 1].scale = 1

      }

    })

  }

}