场景一:Swiper页面支持自定义动画
方案:
- 给Swiper组件设置.nextMargin(50).prevMargin(50)属性。
- 给Swiper组件添加onChange事件,设置当前this.currentIndex=index,当currentIndex为首页或者尾页时,设置上一张以及下一张图片的缩放值。
核心代码:
.onChange((index) => {
console.info('changeIndex' + index)
this.currentIndex = index
// 设置当前index缩放值为最大值
this.scaleArray[this.currentIndex] = MAX_SCALE;
if (this.currentIndex == 0) {
// 当前index=0时,设置上一张图片的缩放值
this.scaleArray[this.scaleArray.length - 1] = MIN_SCALE
} else
// 当前index不为0时,设置上一张图片的缩放值
{
this.scaleArray[this.currentIndex -1] = MIN_SCALE
}
if (this.currentIndex == this.scaleArray.length - 1) {
// 当index为最后一张图片时,设置下一张图片的缩放值
this.scaleArray[0] = MIN_SCALE
} else
// 当index不为最后一张时,设置上一张图片的缩放值
{
this.scaleArray[this.currentIndex + 1] = MIN_SCALE
}
})
3.设置Swiper组件的.displayMode(SwiperDisplayMode.STRETCH)使其Swiper滑动一页的宽度为Swiper组件自身的宽度,如果displayMode属性为SwiperDisplayMode.AUTO_LINEAR时,customContentTransition接口不生效。
4.给Swiper添加customContentTransition(transition: SwiperContentAnimatedTransition)事件,设置页面移除视窗时超时1000ms下渲染树,然后对视窗内所有页面逐帧回调transition。想要实现显示在视窗内正中间的Index为正常状态,两边的index图片为缩小状态。通过事件回调的proxy获取下面数据,通过滑动的距离来计算滑动过程中图片的缩放值。
.customContentTransition({
// 页面移除视窗时超时1000ms下渲染树
timeout: 1000,
// 对视窗内所有页面逐帧回调transition,在回调中修改opacity、scale、translate、zIndex等属性值,实现自定义动画
transition: (proxy: SwiperContentTransitionProxy) => {
if (this.startSwiperOffset == 0) {
this.startSwiperOffset = proxy.position * proxy.mainAxisLength;
console.info('startSwiperOffset:' + this.startSwiperOffset)
}
console.info('proxy-selectedIndex:' + proxy.selectedIndex + '--index: