HarmonyOS CoverFlow效果自定义组件实现

@Entry  
@Component  
struct SwiperDemo {  
  private swiperController: SwiperController = new SwiperController();  
  @State currentIndex: number = 0;  
  @State TargetIndex: number = 0;  
  @State currentOffset: number = 0;  
  @State isCurrent: Boolean = false;  
  @State isFirst: number = 0.5;  
  @State isSecond: number = 1;  
  @State isThird: number = 0.5;  
  @State isFourth: number = 0.5;  
  build() {  
    Column() {  
      Swiper(this.swiperController) {  
        Image($r('app.media.scenery1'))  
          .width(250)  
          .height(250)  
          .scale({ x: this.isFirst, y: this.isFirst })  
        Image($r('app.media.scenery2'))  
          .width(250)  
          .height(250)  
          .scale({ x: this.isSecond, y: this.isSecond })  
        Image($r('app.media.scenery3'))  
          .width(250)  
          .height(250)  
          .scale({ x: this.isThird, y: this.isThird })  
        Image($r('app.media.scenery4'))  
          .width(250)  
          .height(250)  
          .scale({ x: this.isFourth, y: this.isFourth })  
      }  
      .displayCount(3)  
      .indicator(true)  
      .itemSpace(30)  
      .onAnimationEnd((index: number) => {  
        animateTo({  
          duration: 500,  
          curve: Curve.EaseOut,  
          iterations: 1,  
          playMode: PlayMode.Normal,  
          onFinish: () => {  
            console.info('play end')  
          }  
        }, () => {  
          if (index == 0) {  
            this.isFirst = 0.5;  
            this.isSecond = 1;  
            this.isThird = 0.5;  
            this.isFourth = 0.5;  
          } else if (index == 1) {  
            this.isFirst = 0.5;  
            this.isSecond = 0.5;  
            this.isThird = 1;  
            this.isFourth = 0.5;  
          } else if (index == 2) {  
            this.isFirst = 0.5;  
            this.isSecond = 0.5;  
            this.isThird = 0.5;  
            this.isFourth = 1;  
          } else if (index == 3) {  
            this.isFirst = 1;  
            this.isSecond = 0.5;  
            this.isThird = 0.5;  
            this.isFourth = 0.5;  
          }  
        })  
      })  
    }.width('100%')  
    .border({ width: 1 })  
    .backgroundColor(Color.Pink)  
    .margin({ top: 5 })  
  }  
}