HarmonyOS 鸿蒙Next叠卡动效

import curves from '@ohos.curves';

@Preview
@Entry
@Component
struct Index241009112752036 {
  @State message: string = 'Hello World'
  @State backgroundColors: Color[] = [Color.Pink, Color.Gray, Color.Orange]
  @State aheadIndex: number = 0;
  @State offsetX: number | string = 0;
  @State distanceInfo: number = 0;
  @State opacityInfo: number = 1
  @State isShow: Visibility = Visibility.Visible

  build() {
    Row() {
      Stack({ alignContent: Alignment.Start }) {
        ForEach(this.backgroundColors, (item: Color, index: number) {
          Row() {
            Text("1111")
              .width('100%')
              .height('100%')
              .fontSize(50)
              .textAlign(TextAlign.Center)
              .backgroundColor(item)
              .border({ width: 2, color: Color.Blue, radius: 10 })
              .opacity(this.getOpacityInfo(index))
              .scale({ x: this.getScale(index), y: this.getScale(index), centerX: 0 }) // 两轴尺寸缩放比例
          }
          .offset({ x: this.getOffsetX(index), y: 0 }) // 偏移距离
          .zIndex(this.getZIndex(index)) // z序控制stack层级关系，越大越靠上
        }, (item: Color) => item.toString())
      }
      .width("100%")
      .gesture(
        PanGesture({ direction: PanDirection.Horizontal, distance: 1 })
          .onActionStart((event?: GestureEvent) => {
            this.handlePanGestureStart(event?.offsetX);
          })
          .onActionUpdate((event?: GestureEvent) => {
            this.handlePanGestureUpdate(event?.offsetX);
          })
          .onActionEnd((event?: GestureEvent) => {
            this.handlePanGestureEnd(event?.offsetX);
          })
      )
    }
    .height("20%")
    .padding({ top: 5, left: 5, right: 5 })
  }

  getRealIndex(index: number): number {
    if (index < this.aheadIndex) {
      if (index === 0) {
        if (this.aheadIndex === 1) {
          return 2
        } else if (this.aheadIndex === 2) {
          return 1
        }
      } else if (index === 1) {
        return 2
      }
    }
    return index - this.aheadIndex;
  }

  getOpacityInfo(index: number): number {
    if (index == this.aheadIndex) {
      if (this.offsetX > 0 && this.offsetX <= 10) {
        this.opacityInfo = 0
        return this.opacityInfo
      }
      if (this.offsetX > 10) {
        animateTo({ curve: Curve.Linear, duration: 1 }, () => {
          this.opacityInfo = 1
        })
        return this.opacityInfo
      }
    }
    return 1
  }

  getScale(index: number): number {
    let width = 1 - (this.getRealIndex(index) + 1) * 0.05;
    if (index !== this.aheadIndex) {
      width = width + (this.distanceInfo / 180) * 0.05
    }
    return width;
  }

  getOffsetX(index: number): number | string {
    let realIndex = this.getRealIndex(index);
    console.log(`===indexIndex:${index}`)
    console.log(`===realIndex:${realIndex}`)
    console.log(`===offsetX:${this.offsetX}`)
    if (index == this.aheadIndex) {
      if (this.offsetX < 0) {
        return this.offsetX;
      }
      if (this.offsetX > 0) {
        return Number(this.offsetX) - 500
      }
    }
    let dis = realIndex * 25
    dis = dis - (this.distanceInfo / 180) * 25
    return dis;
  }

  getZIndex(index: number): number {
    console.log(`-zIndex:${this.aheadIndex}`)
    console.log(`zIndex:${-this.getRealIndex(index)}`)
    return -this.getRealIndex(index);
  }

  handlePanGestureStart(offsetX?: number): void {
    if (!offsetX) {
      return;
    }
    console.log(`Start offsetX:${offsetX}`)

    if (offsetX > 0) {
      this.aheadIndex = this.aheadIndex == 0 ? 2 : this.aheadIndex - 1;
 
    }
  }

  handlePanGestureUpdate(offsetX?: number): void {
    if (!offsetX) {
      return
    }
    if (offsetX > 0) {
      this.distanceInfo = offsetX
      animateTo({ curve: curves.springMotion() }, () => {
        this.offsetX = offsetX;
        console.log(`Update offsetX00:${this.offsetX}`)
      })
    }

    if (offsetX < 0) {
      console.log(`Update offsetX:${offsetX}`)
      this.distanceInfo = -offsetX
      animateTo({ curve: curves.springMotion() }, () => {
        this.offsetX = offsetX!;
        console.log(`Update offsetX00:${this.offsetX}`)
      })
    }
  }

  handlePanGestureEnd(offsetX?: number): void {
    if (!offsetX) {
      return;
    }
    console.log(`End offsetX:${offsetX}`)
    if (offsetX < 0) {
      if (offsetX < -180) {
        animateTo({ curve: curves.springMotion(), duration: 100 }, () => {
          this.offsetX = "-100%";
          console.log("swipe next")
          this.aheadIndex = this.aheadIndex == this.backgroundColors.length - 1 ? 0 : this.aheadIndex + 1;
          this.offsetX = 0;
          this.distanceInfo = 0
        }) 
      } else {
        animateTo({ curve: curves.springMotion() }, () => {
          this.offsetX = 0;
          this.distanceInfo = 0
        })
      }
    }
    if (offsetX > 0) {
      if (offsetX > 180) {
        animateTo({ curve: curves.springMotion(), duration: 100 }, () => {
          this.offsetX = "100%";     
          this.distanceInfo = 0
        })
      } else {
        animateTo({ curve: curves.springMotion() }, () => {
          this.aheadIndex = this.aheadIndex == this.backgroundColors.length - 1 ? 0 : this.aheadIndex + 1;
          this.offsetX = 0;
          this.distanceInfo = 0
        })
      }
    }
  }
}