github源码地址
效果展示
前言
去年因为项目中有个切换学校的功能，要求以卡片浮动效果展示，并且能够无限循环滚动。
之前找了个demo它是通过自定义view动画实现的，卡片数量多的时候会比较卡顿，所以研究了一下，自己造了一个，现在把实现的思路分享一下~
好，开始正题~~~
技术调研
在实现之前，首先我想到的是如何实现无限循环的问题，以及多数量时如何复用的问题。关于view的无限循环滚动和复用问题，最经典的就是轮播图了，现在比较常用的两种方法就是UIScrollView或者UICollectionView实现的。
然后我决定选用UICollectionView，因为我们只需要给它提供数据源驱动，它自己就可以复用，实现应该比较简单。并且UICollectionView的layout的灵活性非常强，完全可以自定义出很多酷炫的效果。
横向滚动
设置滚动方向为水平，禁用分页属性(默认就是false)，这样就可以横向流畅滑动了
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
collectionView = UICollectionView(frame: frame, collectionViewLayout: layout)
collectionView.isPagingEnabled = false // default NO
无限循环
定义数组imageArr来存储图片作为数据源，在每次滚动结束后，都重新定位到第一张。
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
collectionView.scrollToItem(at: IndexPath(item: 0, section: 0), at:.centeredHorizontally, animated: false)
}
但是每次重定位的时候都会出现明显的突兀效果，所以我们可以把这个数组中的图片复制100份、200份、1000份。。。这样就有足够多的数据来供用户滑动期间来展示了。
但是直接存储图片的话，这个数组肯定会占用很大的内存，所以我们开辟一个新的数组indexArr，来存储imageArr中图片的下标，因为只是存储的是int，所以占用的内存是非常小的。
// 初始化数据源
imageArr = ["num_1", "num_2", "num_3", "num_4", "num_5"]
for _ in 0 ..< 100 {
for j in 0 ..< imageArr.count {
indexArr.append(j)
}
}
比如imageArr中是["pic1", "pic2", "pic3"]，那么indexArr中就是[0,1,2,0,1,2,0,1,2...]，这样就可以把数据源设置为indexArr。
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return indexArr.count
}
代码初始时我们把collectionView定位到中间那组（第50组，假设共设置了100组），每次滚动结束后也再次定位到中间组的第N张(N:上次滑动结束时的那张)。
// 定位到 第50组(中间那组)
override func viewDidLoad() {
super.viewDidLoad()
collectionView.scrollToItem(at: IndexPath(item: 50 * imageArr.count, section: 0) , at: UICollectionViewScrollPosition.centeredHorizontally, animated: false)
}
每次动画停止时，也重新定位到 第50组(中间那组) 模型
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
collectionView.scrollToItem(at: IndexPath(item: 50 * imageArr.count, section: 0) , at: UICollectionViewScrollPosition.centeredHorizontally, animated: false)
}
每张卡片(cell)的数据填充
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = self.collectionView.dequeueReusableCell(withReuseIdentifier: NSStringFromClass(CyclicCardCell.self), for: indexPath) as! CyclicCardCell
let index = indexArr[indexPath.row]
cell.index = index
cell.cardImgView.image = UIImage(named: imageArr[index])
cell.cardNameLabel.text = "奔跑吧，小蜗牛~"
return cell
}
滚动动画的平滑过渡
在每次重定位的时候，虽然设置的是回到中间组的对应下标的那个cell，并且animated也是设置的false，但是依然可以看出动画有些不连贯、突兀，显得不流畅自然。
这就需要我们自定义UICollectionViewFlowLayout，来重写targetContentOffset方法，通过遍历目标区域中的cell，来计算出距离中心点最近的cell，把它调整到中间，实现平缓流畅的滑动结束的效果。
override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
let targetRect = CGRect(x: proposedContentOffset.x, y: 0.0, width: self.collectionView!.bounds.size.width, height: self.collectionView!.bounds.size.height)
// 目标区域中包含的cell
let attriArray = super.layoutAttributesForElements(in: targetRect)! as [UICollectionViewLayoutAttributes]
// collectionView落在屏幕中点的x坐标
let horizontalCenterX = proposedContentOffset.x + (self.collectionView!.bounds.width / 2.0)
var offsetAdjustment = CGFloat(MAXFLOAT)
for layoutAttributes in attriArray {
let itemHorizontalCenterX = layoutAttributes.center.x
// 找出离中心点最近的
if(abs(itemHorizontalCenterX-horizontalCenterX) < abs(offsetAdjustment)){
offsetAdjustment = itemHorizontalCenterX-horizontalCenterX
}
}
//返回collectionView最终停留的位置
return CGPoint(x: proposedContentOffset.x + offsetAdjustment, y: proposedContentOffset.y)
}
卡片的缩放动画
在自定义的UICollectionViewFlowLayout中重写layoutAttributesForElements方法，通过该方法，可以获取到可视范围内的cell。
然后在cell的滑动过程中，通过cell偏移的距离来进行尺寸的缩放系数的设置，处于最中心的系数为1，则为原本的大小，随着中心距离的偏移，系数会逐渐变小为0.98，0.95，0.8...
因此卡片也会随之变小，从而达到在滚动过程中，滚动至中间的卡片最大，旁边的变小的效果。
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
let array = super.layoutAttributesForElements(in: rect)
var visibleRect = CGRect()
visibleRect.origin = self.collectionView!.contentOffset
visibleRect.size = self.collectionView!.bounds.size
for attributes in array!{
let distance = visibleRect.midX - attributes.center.x
let normalizedDistance = abs(distance/ActiveDistance)
let zoom = 1 - ScaleFactor * normalizedDistance
attributes.transform3D = CATransform3DMakeScale(1.0, zoom, 1.0)
attributes.zIndex = 1
// let alpha = 1 - normalizedDistance
// attributes.alpha = alpha
}
return array
}
OK，至此主要的核心实现就完成了，可能有些地方思路表述的可能不是太清楚，大家可以去github上下载源码看下，有不对的地方，欢迎指正~
9月28号更新：
因为这个文章是第一次写的，所以之前表述的不大好，今天重新修改了一下，希望能对大家有所帮助😆
刚写了一个类似的重叠卡片滚动的动画，有兴趣的可以看下:
重叠卡片滚动动画
