Swiper轮播图带放大缩小动效实践

class MyDataSource implements IDataSource { 
  private list: string[] = [] 
  constructor(list: string[]) { 
    this.list = list 
  } 
  totalCount(): number { 
    return this.list.length 
  } 
  getData(index: number): string { 
    return this.list[index] 
  } 
  registerDataChangeListener(listener: DataChangeListener): void { 
  } 
  unregisterDataChangeListener() { 
  } 
}

private data: MyDataSource = new MyDataSource([]) 
aboutToAppear(): void { 
  let list: string[] = [] 
  for (let i = 0; i <= 5; i++) { 
    list.push(i.toString()); 
  } 
  this.data = new MyDataSource(list) 
}

private swiperController: SwiperController = new SwiperController()

Swiper(this.swiperController) { 
  LazyForEach(this.data, (item: string, index: number) => { 
    Column() { 
      Text(item) 
        .width(40) 
        .height(40) 
        .textAlign(TextAlign.Center) 
        .fontSize(30) 
    } 
    .width("100%") 
    .height('100%') 
    .backgroundColor(0xFFFF00) 
  }, (item: string, index: number) => item) 
}

@State  currentIndex: number = 0

.index(this.currentIndex)

.displayCount(1)

.nextMargin(40)  
.prevMargin(40)

.autoPlay(true) 
.loop(true) 
.duration(500) 
.curve(Curve.Linear)

@State scaleArray:   number[] = [];

const MAX_SCALE = 1    // 最大缩放  const MIN_SCALE = 0.8  // 最小缩放

this.scaleArray.push(i == 0 ? MAX_SCALE : MIN_SCALE)

.onChange((index: number) => {   this.currentIndex = index   this.scaleArray[this.currentIndex] = MAX_SCALE;   if (this.currentIndex == 0) {     this.scaleArray[this.scaleArray.length - 1] = MIN_SCALE   } else     this.scaleArray[this.currentIndex -1] = MIN_SCALE   if (this.currentIndex == this.scaleArray.length - 1) {     this.scaleArray[0] = MIN_SCALE   } else     this.scaleArray[this.currentIndex + 1] = MIN_SCALE })

startSwiperOffset:  number = 0

.onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => { 
  if (this.startSwiperOffset == 0) this.startSwiperOffset = extraInfo.currentOffset; 
  let offset: number = extraInfo.currentOffset 
  let currentScale: number = this.scaleArray[index] 
  let nextIndex = (index == this.scaleArray.length - 1 ? 0 : index + 1) 
  let preIndex = (index == 0 ? this.scaleArray.length - 1 : index - 1) 
  let nextScale: number = this.scaleArray[nextIndex] 
  let preScale: number = this.scaleArray[preIndex] 
  // 滑动距离 
  let distance = Math.abs(this.startSwiperOffset - offset) 
  currentScale = MAX_SCALE - Math.min(distance / DRAGGING_MAX_DISTANCE, MAX_SCALE - MIN_SCALE) 
  if (this.startSwiperOffset > offset) { 
    nextScale = MIN_SCALE + Math.min(distance / DRAGGING_MAX_DISTANCE, MAX_SCALE - MIN_SCALE) 
    preScale = MIN_SCALE 
  } else { 
    preScale = MIN_SCALE + Math.min(distance / DRAGGING_MAX_DISTANCE, MAX_SCALE - MIN_SCALE) 
    nextScale = MIN_SCALE 
  } 
  this.scaleArray[this.currentIndex] = currentScale 
  this.scaleArray[nextIndex] = nextScale 
  this.scaleArray[preIndex] = preScale 
})

.onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => { 
  if (index == targetIndex) { 
    let nextIndex = (index == this.scaleArray.length - 1 ? 0 : index + 1) 
    let preIndex = (index == 0 ? this.scaleArray.length - 1 : index - 1) 
    this.scaleArray[index] = MAX_SCALE 
    this.scaleArray[nextIndex] = MIN_SCALE 
    this.scaleArray[preIndex] = MIN_SCALE 
  } else { 
    let nextIndex = (targetIndex == this.scaleArray.length - 1 ? 0 : targetIndex + 1) 
    let preIndex = (targetIndex == 0 ? this.scaleArray.length - 1 : targetIndex - 1) 
    this.scaleArray[targetIndex] = MAX_SCALE 
    this.scaleArray[nextIndex] = MIN_SCALE 
    this.scaleArray[preIndex] = MIN_SCALE 
  } 
})

this.startSwiperOffset  = 0

.scale({ x: this.scaleArray[index], y: this.scaleArray[index] })

.animation({duration:PAGE_DURATION, curve:Curve.Linear })