一、背景
效果：

video_22.gif

原本以为用collectionView实现很方便，发现使用page属性或者自己控制都达不到理想效果。下面通过修改flowLayout的方式实现：

#import "FDMBannerFlowLayout.h"

@interface FDMBannerFlowLayout()
@property (nonatomic, assign) UIEdgeInsets sectionInsets;
@property (nonatomic, assign) CGFloat miniLineSpace;
@property (nonatomic, assign) CGFloat miniInterItemSpace;
@property (nonatomic, assign) CGSize eachItemSize;
@property (nonatomic, assign) BOOL scrollAnimation;/**<是否有分页动画*/
@property (nonatomic, assign) CGPoint lastOffset;/**<记录上次滑动停止时contentOffset值*/
@end

@implementation FDMBannerFlowLayout

/*初始化部分*/
- (instancetype)initWithSectionInset:(UIEdgeInsets)insets andMiniLineSapce:(CGFloat)miniLineSpace andMiniInterItemSpace:(CGFloat)miniInterItemSpace andItemSize:(CGSize)itemSize
{
    self = [self init];
    if (self) {
        //基本尺寸/边距设置
        self.sectionInsets = insets;
        self.miniLineSpace = miniLineSpace;
        self.miniInterItemSpace = miniInterItemSpace;
        self.eachItemSize = itemSize;
//        self.scrollAnimation = YES;
    }
    return self;
}

- (instancetype)init
{
    self = [super init];
    if (self) {
        _lastOffset = CGPointZero;
    }
    return self;
}

-(void)prepareLayout
{
    [super prepareLayout];
    self.scrollDirection = UICollectionViewScrollDirectionHorizontal;// 水平滚动
    /*设置内边距*/
    self.sectionInset = _sectionInsets;
    self.minimumLineSpacing = _miniLineSpace;
    self.minimumInteritemSpacing = _miniInterItemSpace;
    self.itemSize = _eachItemSize;
    /**
     * decelerationRate系统给出了2个值：
     * 1. UIScrollViewDecelerationRateFast（速率快）
     * 2. UIScrollViewDecelerationRateNormal（速率慢）
     * 此处设置滚动加速度率为fast，这样在移动cell后就会出现明显的吸附效果
     */
    self.collectionView.decelerationRate = UIScrollViewDecelerationRateFast;
}

/**
 * 这个方法的返回值，就决定了collectionView停止滚动时的偏移量
 */
-(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
    CGFloat pageSpace = [self stepSpace];//计算分页步距
    //最后一页左边的offsetX的值，实际滑不到这个值，用它是为了滑到最后一个时，往回滑可以正确计算前一个值
    CGFloat contentWidth = self.collectionView.contentSize.width-(self.sectionInset.right+self.sectionInset.left);
    CGFloat offsetMax = contentWidth - self.eachItemSize.width;
    //x实际能到达的最大距离
    CGFloat realOffsetMax = contentWidth - (self.collectionView.size.width-self.sectionInset.right);
    CGFloat offsetMin = 0;
    /*修改之前记录的位置，如果小于最小contentsize或者大于最大contentsize则重置值*/
    if (proposedContentOffset.x<offsetMin)
    {
        proposedContentOffset.x = offsetMin;
    }
    if (proposedContentOffset.x>=realOffsetMax)
    {
        //已经是最后一页了
        //就算设置的x值大于realOffsetMax，最终也是滑到realOffsetMax的位置
        proposedContentOffset.x = offsetMax;
    }
    
    CGFloat offsetForCurrentPointX = ABS(proposedContentOffset.x - _lastOffset.x);//目标位移点距离当前点的距离绝对值
    CGFloat velocityX = velocity.x;
    BOOL direction = (proposedContentOffset.x - _lastOffset.x) > 0;//判断当前滑动方向,手指向左滑动：YES；手指向右滑动：NO
    
    if (offsetForCurrentPointX > pageSpace/6.0)
    {
        NSInteger pageFactor = 0;//分页因子，用于计算滑过的cell个数
        if (velocityX != 0)
        {
            //不是拖动，就有速度，速度为滑动多少页
            pageFactor = ABS(velocityX);//速率越快，cell滑过数量越多
        }
        else
        {
            //拖动
            pageFactor = ABS(offsetForCurrentPointX/pageSpace);
        }

        /*设置pageFactor上限为2, 防止滑动速率过大，导致翻页过多*/
        pageFactor = pageFactor<1?1:(pageFactor<3?1:2);

        CGFloat pageOffsetX = pageSpace*pageFactor;
        proposedContentOffset = CGPointMake(_lastOffset.x + (direction?pageOffsetX:-pageOffsetX), proposedContentOffset.y);
    }
    else
    {
        /*滚动距离，小于翻页步距一半，则不进行翻页操作*/
        proposedContentOffset = CGPointMake(_lastOffset.x, _lastOffset.y);
    }
    if (proposedContentOffset.x>offsetMax)
    {
        proposedContentOffset.x = offsetMax;
    }
    //记录当前最新位置
    _lastOffset.x = proposedContentOffset.x;
    
    return proposedContentOffset;
}

/**
 *计算每滑动一页的距离：步距
 */
-(CGFloat)stepSpace
{
    return self.eachItemSize.width + self.miniLineSpace;
}

/**
 * 当collectionView的显示范围发生改变的时候，是否需要重新刷新布局
 * 一旦重新刷新布局，就会重新调用 layoutAttributesForElementsInRect:方法
 */
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}

/**
 *防止报错先复制attributes
 */
- (NSArray *)getCopyOfAttributes:(NSArray *)attributes
{
    NSMutableArray *copyArr = [NSMutableArray new];
    for (UICollectionViewLayoutAttributes *attribute in attributes) {
        [copyArr addObject:[attribute copy]];
    }
    return copyArr;
}

/**
 *设置放大动画
 */
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    /*获取rect范围内的所有subview的UICollectionViewLayoutAttributes*/
    NSArray *arr = [self getCopyOfAttributes:[super layoutAttributesForElementsInRect:rect]];

    /*动画计算*/
    if (self.scrollAnimation)
    {
        /*计算屏幕中线*/
        CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.bounds.size.width/2.0f;
        /*刷新cell缩放*/
        for (UICollectionViewLayoutAttributes *attributes in arr) {
            CGFloat distance = fabs(attributes.center.x - centerX);
            /*移动的距离和屏幕宽度的的比例*/
            CGFloat apartScale = distance/self.collectionView.bounds.size.width;
            /*把卡片移动范围固定到 -π/4到 +π/4这一个范围内*/
            CGFloat scale = fabs(cos(apartScale * M_PI/4));
            /*设置cell的缩放按照余弦函数曲线越居中越趋近于1*/
            CATransform3D plane_3D = CATransform3DIdentity;
            plane_3D = CATransform3DScale(plane_3D, 1, scale, 1);
            attributes.transform3D = plane_3D;
        }
    }
    return arr;
}
@end

使用collectionView加载flowLayout：

#import "FDMBaseBannerView.h"
#import "FDMBannerFlowLayout.h"

@interface FDMBaseBannerView()
{
    
}
@property(nonatomic) FDMBannerFlowLayout *flowLayout;
@property(nonatomic) UICollectionView *collectionView;

@end

@implementation FDMBaseBannerView

- (instancetype)initWithSectionInset:(UIEdgeInsets)insets andMiniLineSapce:(CGFloat)miniLineSpace andItemSize:(CGSize)itemSize{
    if(self = [super init]){
        self.flowLayout = [[FDMBannerFlowLayout alloc] initWithSectionInset:insets andMiniLineSapce:miniLineSpace andMiniInterItemSpace:0 andItemSize:itemSize];
        [self setupUI];
    }
    return self;
}

- (void)setupUI{
    self.dataArr = @[@"page1",@"page2",@"page3",@"page4",@"page5",@"page6",@"page7",@"page8"];
    [self addSubview:self.collectionView];
    [self.collectionView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.mas_equalTo(0);
    }];
}

#pragma -mark UICollectionViewDelegate
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return self.dataArr.count;
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell * cell  = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellid" forIndexPath:indexPath];
    cell.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];
    NSInteger row = indexPath.row%self.dataArr.count;
    NSString *str = self.dataArr[row];
//
    UILabel *lab = [cell.contentView viewWithTag:10];
    if(!lab){
        lab = [[UILabel alloc] init];
        lab.tag = 10;
        [cell.contentView addSubview:lab];
        [lab mas_makeConstraints:^(MASConstraintMaker *make) {
            make.center.mas_equalTo(0);
        }];
    }
    
    lab.text = str;
    
    return cell;
}

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@">>>>>>>>>>%zi",indexPath.row);
}


#pragma -mark getting
- (UICollectionView *)collectionView{
    if(!_collectionView){
        UICollectionView *collect = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:self.flowLayout];
        //代理设置
        collect.delegate = self;
        collect.dataSource = self;
        collect.showsVerticalScrollIndicator = NO;
        collect.showsHorizontalScrollIndicator = NO;
        collect.decelerationRate = UIScrollViewDecelerationRateFast;
    //    collect.pagingEnabled = YES;
    //    collect.delaysContentTouches = NO;
    //    collect.canCancelContentTouches = NO;
    //    layout.itemSize = CGSizeMake(collect.frame.size.width-100, collect.frame.size.height);
        //注册item类型 这里使用系统的类型
        [collect registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellid"];
        
        _collectionView = collect;
    }
    return _collectionView;
}

@end

运用：

    CGFloat collectH = 120;
    CGFloat itemW = 200;
//    UIEdgeInsets sectionInset = UIEdgeInsetsMake(0, (iScreenW-itemW)/2, 0, (iScreenW-itemW)/2);
    UIEdgeInsets sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);
    
    self.bannerView = [[FDMBaseBannerView alloc] initWithSectionInset:sectionInset andMiniLineSapce:10 andItemSize:CGSizeMake(itemW, collectH)];
    [self.view addSubview:self.bannerView];
    [self.bannerView mas_makeConstraints:^(MASConstraintMaker *make) {
       
        make.leading.trailing.mas_equalTo(0);
        make.top.mas_equalTo(100);
        make.height.mas_equalTo(collectH);
    }];

如果想实现滑动过程中可以看到左边划走的内容，可以通过控制edgeInset.left和right实现