ETS如何实现幻灯片的浅入浅出

@Entry
@Component
struct SwiperExample {
  private swiperController: SwiperController = new SwiperController()
  @State auto: boolean = false
  @State widthSize: number = 300 //图片宽
  @State heightSize: number = 160 //图片高
  @State opacity: number = 1 //清晰度
  private images: string[] = ['/pages/comment/1.jpg', '/pages/comment/2.jpg', '/pages/comment/3.jpg',
                              '/pages/comment/4.jpg', '/pages/comment/5.jpg']

  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        ForEach(this.images, item => {
          Image(item).width(this.widthSize).height(this.heightSize).opacity(this.opacity)
          .animation({
            duration: 4000, // 动画时长
            curve: Curve.EaseOut, // 动画曲线
            iterations: -1, // 播放次数
            playMode: PlayMode.Normal // 动画模式
          })
        }, item => item)
      }
      .index(0)
      .autoPlay(this.auto)
      .interval(3000)
      .indicator(false) // 默认开启指示点
      .loop(true) // 默认开启循环播放
      .duration(2000)
      .vertical(false) // 默认横向切换
      .itemSpace(0)
      .margin({bottom:20})
      .onChange((index: number) => {
        console.info(index.toString())
      })

      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('preview')
          .onClick(() => {
            this.opacity = 0
            this.swiperController.showPrevious()
          })

        Button('next')
          .onClick(() => {
            if(this.opacity === 0) {
              this.opacity = 1
            }else {
              this.opacity = 0
            }
            this.swiperController.showNext()
          })
        Button('Auto')
        .onClick(() => {
          if(!this.auto){
            this.auto = !this.auto
            console.info('auto play')
          }else{
            this.auto = !this.auto
            console.info('stop')
          }
        })
      }
    }.margin({ top: 50 })
  }
}