鸿蒙Next swiper切换，改变背景图（淡入淡出效果）

@Entry
@Component
struct TabPage {
  private swiperController: SwiperController = new SwiperController();
  private arr: string[] = ['关注', '推荐', '热点', '上海', '视频', '新时代', '新歌', '新碟', '新片'];
  //测试数据
  private bg:Resource[]=[$r('app.media.background'),$r('app.media.icon1'),$r('app.media.icon2'),$r('app.media.icon3'),
    $r('app.media.icon4'),$r('app.media.icon5'),$r('app.media.icon6',$r('app.media.icon7'),$r('app.media.icon8'),$r('app.media.icon9'))]
  @State currentBg :Resource= $r('app.media.background')
  @State @Watch('bgWatch') newBg :Resource= $r('app.media.icon8')
  @State opacity1:number =1
  @State opacity2:number =0.8

  bgWatch(){
    //背景改变开始动画
    this.start()
  }

  build() {
    Stack() {
      Image(this.newBg).width('100%').height('100%')
        .opacity(this.opacity2)
      Image(this.currentBg).width('100%').height('100%')
        .opacity(this.opacity1)

      Swiper(this.swiperController) {
        ForEach(this.arr, (item:string) => {
          Text(item).width('100%').height('100%').textAlign(TextAlign.Center)
        }, (item: string) => item)
      }
      .onChange((index: number) => {
        this.newBg =this.bg[index]
      })
      .indicator(false)
      .loop(false)
    }
    .height('100%')
    .width('100%')
  }


  start(){
    animateTo({
      // 执行动画
      duration: 400, // 设置动画持续时间
      onFinish: () => { // 动画结束时执行的操作
        this.currentBg = this.newBg // 设置当前图片为下一张图片
        animateTo({
          duration:100,
          curve: Curve.Linear,onFinish: () => {
            this.opacity1 = 1 // 设置当前图片透明度为1
            this.opacity2 = 0.8 // 设置下一张图片透明度为0

          }},()=>{
        })

      }
    }, () => {
      this.opacity1 = 0 // 设置当前图片透明度为0
      this.opacity2 = 1 // 设置下一张图片透明度为1
    })
  }

}