collectionView实现无限循环滚动卡片

github源码地址

效果展示

show.gif

前言

去年因为项目中有个切换学校的功能，要求以卡片浮动效果展示，并且能够无限循环滚动。

之前找了个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号更新：

• 因为这个文章是第一次写的，所以之前表述的不大好，今天重新修改了一下，希望能对大家有所帮助😆

• 刚写了一个类似的重叠卡片滚动的动画，有兴趣的可以看下:

重叠卡片滚动动画

ScrollCard.gif