ios 扑克牌效果轮播_iOS 封装跑马灯和轮播效果

功能概述和预览

功能描述：WSL_RollView 是基于UICollectionView实现的支持水平和垂直两个方向上的的分页和渐进循环轮播效果，可以设置时间间隔、渐进速率、是否循环、分页宽度和间隔，还支持高度自定义分页视图的控件。

一、实现方法

1.1、 首先用UICollectionView和计时器实现一个基本的水平滚动效果，如下图，这个太简单就不在此详述。

1.2、对比上面的效果图，我们还需要解决分页的宽度和循环滚动的问题。

自定义分页宽度：默认的分页宽度是UICollectionView的宽度，所以当分页宽度的不等于UICollectionView的宽度或分页间隔不等于0时会出现错误，这时就需要我们通过自定义UICollectionViewFlowLayout来实现效果。

/** 返回值决定了collectionView停止滚动时的偏移量 手指松开后执行

* proposedContentOffset：原本情况下，collectionView停止滚动时最终的偏移量

* velocity 滚动速率，通过这个参数可以了解滚动的方向

*/

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity{

if (_scrollStyle == WSLRollViewScrollStylePage) {

CGSize size = self.collectionView.frame.size;

// 计算可见区域的面积

CGRect rect = CGRectMake(proposedContentOffset.x, proposedContentOffset.y, size.width, size.height);

NSArray *array = [super layoutAttributesForElementsInRect:rect];

// 标记 cell 的中点与 UICollectionView 中点最小的间距

CGFloat minDetal = MAXFLOAT;

if (self.scrollDirection == UICollectionViewScrollDirectionHorizontal){

// 计算 CollectionView 中点值

CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;

for (UICollectionViewLayoutAttributes *attrs in array){

if (ABS(minDetal) > ABS(centerX - attrs.center.x)){

minDe