#鸿蒙通关秘籍#如何在HarmonyOS Next中实现轮播图的缩放动画？

自定义缩放动画可以通过customContentTransition事件实现。结合position属性计算缩放比例，在中间图片为重点显示状态，左右两边图片缩小：

@Entry
@Component
struct ScaleTransitionSwiper {
  controller: SwiperController = new SwiperController()
  imageList: string[] = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg'
  ]

  build() {
    Column() {
      Swiper(this.controller) {
        ForEach(this.imageList, (item: string, index: number) => {
          Image(item).height(300).borderRadius(10).scale({
            y: 1 - Math.abs(this.positionList[index]),
          })
        }, (index: number) => index.toString())
      }
      .width('100%')
      .customContentTransition({
        timeout: 1000,
        transition: (proxy: SwiperContentTransitionProxy) => {
          let scale = 1 - Math.abs(proxy.position) * 0.2
          this.positionList[proxy.index] = proxy.position
          console.log(`Scale for index ${proxy.index}: ${scale}`)
        }
      })
    }
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.