前言
本文基于Api13
Swiper组件默认情况下是无论是从左往右，还是从右往左，都是平移滑动，效果如下：
以上的效果是最常见的，基本上都够满足大部分的场景需求，也是很多主流App首选效果，但是，仍然有一部分需求，会不按常理出牌，这不，让实现一个层叠滑动的效果就来了，所谓的层叠，就是，在滑动条目的时候，上一个不动，下一个覆盖到上一个的上面进行滑动，为了更好的便于大家理解，简单的做一个小动画，模拟演示一下。
正常的平移滑动效果，两个条目会一起进行平移。
层叠效果滑动，可以看到，上一个条目是不会跟随移动的。
那么如何实现上一个条目不随着手势进行移动呢？这里就需要用到自定义页面切换动画了，也就是在手势滑动的时候，保持当前条目不动，让下一个条目进行移动，还有一点需要注意的是，那就是需要设置组件的堆叠顺序，使其要滑动的组件层级高于前一个组件。
实现之前，我们先了解一下自定义Swiper页面切换动画customContentTransition。
customContentTransition
customContentTransition是Swiper组件中的一个属性，主要用于页面切换动画，接收一个SwiperContentAnimatedTransition参数；它的作用，主要在于，在页面随着手势进行切换动画的过程中，会对视窗内所有页面进行逐帧触发回调，在这个回调中，我们就可以针对条目进行设置透明度、缩放比例、位移等属性来自定义切换动画。
/** * Custom swiper content transition animation. * * @param { SwiperContentAnimatedTransition } transition - custom content transition animation. * @returns { SwiperAttribute } the attribute of the swiper. * @syscap SystemCapability.ArkUI.ArkUI.Full * @crossplatform * @atomicservice * @since 12 */ customContentTransition(transition: SwiperContentAnimatedTransition): SwiperAttribute;
有一点需要注意的是，customContentTransition是自定义切换动画，但不会取消原有的动画，也就是说，我们在自定义动画的时候，原有的动画也是同步的执行的，为了让原有的动画不执行，我们可以设置主轴方向上负的位移（translate属性）来抵消页面滑动，这也是我们这个需求的主要实现方式。
准备数据
通过前边，我们已经知道，要实现前言中的需求，我们需要做的有两个动作，动作一，动态修改子元素的位移，我们可以通过translate属性来控制，动作二，动态改变子元素的层级权重，通过属性zIndex来设置。
基本UI如下，当然了，这只是一个简单的Demo案例，实际开发中，属性以及数据设置，要根据实际情况而定。
Swiper() { ForEach(this.backgroundColors, (backgroundColor: Color, index: number) => { Text(index.toString()) .width("100%") .height("100%") .backgroundColor(backgroundColor) .textAlign(TextAlign.Center) .translate({ x: this.translateList[index] }) .zIndex(this.zIndexList[index]) }) } .height(200)
以上的案例，我简单定义了三个数组，一个用于数据加载的backgroundColors，一个用于位移的translateList，最后一个是用于设置层级权重的zIndexList。
实现自定义切换动画
实现这个层叠滑动，实现customContentTransition方法之前，有一点需要知道，那就是我们目前是往左滑动还是往右滑动，因为在最后一个条目节点需要做特殊的逻辑判断，往左还是往右，我们可以通过onGestureSwipe方法中偏移量进行判断。
extraInfo.currentOffset小于0，往左，否则往右。
.onGestureSwipe((_: number, extraInfo: SwiperAnimationEvent) => { let currentOffset = extraInfo.currentOffset this.isScrollLeft = currentOffset < 0 })
在customContentTransition方法中，我们正常执行滑动抵消即可，首先是在同组页面往左滑或往右完全滑出视窗外时，我们需要重置属性值，这是非常重要的。
如何把当前的滑动进行抵消呢，很简单，当往左滑动时，使用页面在主轴方向上的长度减去移动比例乘以主轴长度即可，代码如下：viewIndex是当前的索引。
this.translateList[viewIndex] = proxy.mainAxisLength - proxy.position * proxy.mainAxisLength
往右滑动，直接负的移动比例乘以主轴长度，代码如下：
this.translateList[proxy.index] = -(proxy.position) * proxy.mainAxisLength
整个切换动画代码如下，在往左滑动的过程中，由于最后一个，需要动态切换为第一个索引，所以这里做了单独的逻辑处理。
.customContentTransition({ timeout: 0, transition: (proxy: SwiperContentTransitionProxy) => { if (proxy.position <= 0 || proxy.position >= 1) { if (this.isScrollLeft) { if (proxy.index != this.translateList.length - 1) { this.translateList[proxy.index+1] = 0.0 this.zIndexList[proxy.index+1] = 0 } } else { this.translateList[proxy.index] = 0.0 this.zIndexList[proxy.index] = 0 } } else { if (this.isScrollLeft) { let viewIndex = proxy.index - 1 if (viewIndex == -1) { this.translateList[this.translateList.length-1] = proxy.mainAxisLength - proxy.position * proxy.mainAxisLength this.translateList[0] = 0 this.zIndexList[0] = 1 } else { this.translateList[viewIndex] = proxy.mainAxisLength - proxy.position * proxy.mainAxisLength this.zIndexList[viewIndex] = -1 } } else { this.translateList[proxy.index] = -(proxy.position) * proxy.mainAxisLength this.zIndexList[proxy.index] = -1 } } } })
通过以上的代码，一个层叠滑动效果就实现了，我们一起来看下最终的效果：
相关总结
customContentTransition不仅仅可以实现平移上的改变，很多的效果，我们都可以实现，比如放大缩小，旋转等等。
本文标签：HarmonyOS/ArkUI
