使用zIndex来改变图片层级思路

class CardItem { 
  img: Resource = $r("app.media.startIcon") 
  zIndex: number = 0 
} 
 
@Entry 
@Component 
struct ImageBanner { 
  @State translateX: number = 0 
  @State themeCardLength: number = 3 
  @State firstCardOpacity: number = 0 
  @State zIndexArr: number[] = [0, 1, 2] 
  @State imgList: CardItem[] = [ 
    { 
      img: $r("app.media.img1"), 
      zIndex: 0 
    }, { 
    img: $r("app.media.img2"), 
    zIndex: 1 
  }, { 
    img: $r("app.media.img3"), 
    zIndex: 2 
  }] 
 
  aboutToAppear() { 
    this.zIndexArr = this.imgList.map(item => item.zIndex) 
  } 
 
  anim() { 
    animateTo({ 
      duration: 2000, onFinish: () => { 
        this.changeCards() 
        this.anim() 
        this.translateX = 0 
      } 
    }, () => { 
      this.translateX = -300 
    }) 
 
    animateTo({ 
      duration: 1000, delay: 1000, onFinish: () => { 
        this.firstCardOpacity = 0 
      } 
    }, () => { 
      this.firstCardOpacity = 100 
    }) 
  } 
 
  changeCards() { 
    for (let i = 0; i < this.zIndexArr.length; i++) { 
      if (this.zIndexArr[i] == 2) { 
        this.zIndexArr[i] = 0 
        this.imgList[i].zIndex = 0 
      } else { 
        this.zIndexArr[i]++ 
        this.imgList[i].zIndex++ 
      } 
    } 
    console.log(JSON.stringify(this.zIndexArr), JSON.stringify(this.imgList.map(item => item.zIndex))) 
  } 
 
  build() { 
    Column() { 
      Button("开始动画").onClick(() => { 
        this.anim() 
        // this.changeCards() 
      }) 
      Stack() { 
        ForEach(this.imgList, (item: CardItem, index: number) => { 
          Image(item.img) 
            .onAppear(() => { 
              console.log("onAppear" + index) 
            }) 
            .zIndex(this.zIndexArr[index]) 
            .width(300) 
            .borderRadius(10) 
            .translate({ x: 2 == item.zIndex ? this.translateX : 0 }) 
          // .opacity(index == 0 ? this.firstCardOpacity * 1.0 / 100 : 1) 
        }) 
      }.padding(8) 
    } 
  } 
}