经常使用美团团购电影票，看到海报切换动画挺好玩的。就想着开始仿写一下

image

分页的实现

网上查找UIScrollView分页实现，有类代码是这样的:
根据偏移量计算出pageIndex，然后设置偏移量切换到那一页

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    NSLog(@"scrollViewDidScroll");
    float pageWidth = CGRectGetWidth(scrollView.frame);
    NSInteger pageIndex = floor((scrollView.contentOffset.x - pageWidth/2)/pageWidth)+1;
    scrollView.contentOffset = CGPointMake(pageIndex*pageWidth, 0);
}

这种也可以实现效果，但有个问题就是每一次的偏移量需要超过pageWidth的一半时才会切换到下一个页面，影响用户体验。

好的做法是直接设置pagingEnabled = YES;不用在delegate methods中作任何其他处理。轻扫、拖拽都可以出发响应。

我们看这个动效会发现PageWidth小于CGRectGetWidth(scrollView.frame)，所以需要解决的第一个问题是如何实现小于UIScrollview宽度的翻页切换效果:
设置UIScrollview的宽度为pageWidth, pagingEnable = YES。这样就可以实现分页
效果。frame区域外无法响应触摸事件，只需利用runtime扩大scrollview的响应区域即可。
美团滑动cell是用UICollectionView实现的，这里为了方便简单的用UIScrollview实现：
UIScrollview中加载6个UILabel作为"cell",宽度为60，cell间的间距space=10，则每一页的宽度为70。UIScrollView在storyboard中水平居中，宽度为70.
storyboard布局如下：

image

利用runtime重写hittest方扩大uiscrollview的相应区域代码如下

#import "UIScrollView+LargeArea.h"
#import <objc/runtime.h>
static NSString *const topNameKey = @"topNameKey";
static NSString *const leftNameKey = @"leftNameKey";
static NSString *const bottomNameKey = @"bottomNameKey";
static NSString *const rightNameKey = @"rightNameKey";
static NSString *const nextResponser = @"nextResponser";

@implementation UIScrollView (LargeArea)

- (void)setEnlargeEdgeWithTop:(CGFloat)top left:(CGFloat)left bottom:(CGFloat)bottom right:(CGFloat)right {
    objc_setAssociatedObject(self, &topNameKey, [NSNumber numberWithFloat:top], OBJC_ASSOCIATION_COPY_NONATOMIC);
    objc_setAssociatedObject(self, &leftNameKey, [NSNumber numberWithFloat:left], OBJC_ASSOCIATION_COPY_NONATOMIC);
    objc_setAssociatedObject(self, &bottomNameKey, [NSNumber numberWithFloat:bottom], OBJC_ASSOCIATION_COPY_NONATOMIC);
    objc_setAssociatedObject(self, &rightNameKey, [NSNumber numberWithFloat:right], OBJC_ASSOCIATION_COPY_NONATOMIC);
}

- (CGRect) enlargedRect
{
    NSNumber* topEdge = objc_getAssociatedObject(self, &topNameKey);
    NSNumber* rightEdge = objc_getAssociatedObject(self, &rightNameKey);
    NSNumber* bottomEdge = objc_getAssociatedObject(self, &bottomNameKey);
    NSNumber* leftEdge = objc_getAssociatedObject(self, &leftNameKey);
    if (topEdge && rightEdge && bottomEdge && leftEdge)
    {
        return CGRectMake(self.bounds.origin.x - leftEdge.floatValue,
                          self.bounds.origin.y - topEdge.floatValue,
                          self.bounds.size.width + leftEdge.floatValue + rightEdge.floatValue,
                          self.bounds.size.height + topEdge.floatValue + bottomEdge.floatValue);
    }
    else
    {
        return self.bounds;
    }
}
//优于pointInside:withEvent方法
- (UIView*)hitTest:(CGPoint)point withEvent:(UIEvent*)event
{
    CGRect rect = [self enlargedRect];
    if (CGRectEqualToRect(rect, self.bounds))
    {
        
        return [super hitTest:point withEvent:event];
    }
    UIView *nextView = objc_getAssociatedObject(self, &nextResponser);
    if (nextView) {
        return CGRectContainsPoint(rect, point) ? self : nextView;
    } else {
        return CGRectContainsPoint(rect, point) ? self : nil;
    }
}

我们只需要在工程中作如下设置就实现了分页宽度小于scrollview宽度的效果：

#import "ViewController.h"
#import "UIScrollView+LargeArea.h"
#define cellPageWidth 60
#define space 10
#define ScrollViewEnlargeLeftSpace ( CGRectGetWidth([UIScreen mainScreen].bounds)/2 - cellPageWidth/2 )

#define ScrollViewEnlargeRightSpace ( CGRectGetWidth([UIScreen mainScreen].bounds)/2 - (cellPageWidth/2+space) )

@interface ViewController () <UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *myScroolView;
@property (strong, nonatomic) IBOutletCollection(UILabel) NSArray *contentLabels;
@end

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.pageCount = self.contentLabels.count;
    self.customPageWidth = space + cellPageWidth;
    // Do any additional setup after loading the view, typically from a nib.
    [self.myScroolView setEnlargeEdgeWithTop:0 left:ScrollViewEnlargeLeftSpace bottom:0 right:ScrollViewEnlargeRightSpace];
    self.myScroolView.layer.masksToBounds = NO;
    self.myScroolView.pagingEnabled = YES;
    self.myScroolView.delegate = self;
}
@end

滑动时跟随的放大缩小效果实现

仔细观察动画效果，我们会发现同时进行动画的最多只有两个cell,每次当两个cell的spac的中线越过屏幕中线时当前pageIndex切换。分析过程如下：

image

代码处理过程如下：

-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
    NSInteger index = floor((scrollView.contentOffset.x - self.customPageWidth/2)/self.customPageWidth)+1;
    double currentOffX = scrollView.contentOffset.x;
    double DIF = (currentOffX - index *self.customPageWidth);
    
    if (currentOffX > self.lastScollPosition) {
        if (DIF >= 0 && DIF <=35) {
            UILabel *labelA;
            if (-1< index < self.pageCount) {
                labelA = self.contentLabels[index];
            } else {
                labelA = nil;
            }
            labelA.transform = CGAffineTransformMakeScale(1, (150- 50.0*fabs(DIF)/self.customPageWidth)/100.0);
            UILabel *labelB;
            if (index+1 >= self.pageCount) {
                labelB = nil;
            } else {
                labelB = self.contentLabels[index+1];
            }
            labelB.transform = CGAffineTransformMakeScale(1, (100 + 50*fabs(DIF)/self.customPageWidth )/100.0);
        }
        if (-35<= DIF && DIF <0) {
            UILabel *labelA;
            if (-1< index && index < self.pageCount) {
                labelA = self.contentLabels[index];
            } else {
                labelA = nil;
            }
            labelA.transform = CGAffineTransformMakeScale(1, (150- 50.0*fabs(DIF)/self.customPageWidth)/100.0);
            UILabel *labelC;
            if (index-1 < 0) {
                labelC = nil;
            } else {
                labelC = self.contentLabels[index-1];
            }
            labelC.transform = CGAffineTransformMakeScale(1, (100 + 50*fabs(DIF)/self.customPageWidth )/100.0);
        }
    } else {
        if (DIF <0 && DIF >=-35) {
            UILabel *labelA;
            if (-1< index && index < self.pageCount) {
                labelA = self.contentLabels[index];
            } else {
                labelA = nil;
            }
            labelA.transform = CGAffineTransformMakeScale(1, (150- 50.0*fabs(DIF)/self.customPageWidth)/100.0);
            UILabel *labelC;
            if (index-1 < 0) {
                labelC = nil;
            } else {
                labelC = self.contentLabels[index-1];
            }
            labelC.transform = CGAffineTransformMakeScale(1, (100 + 50*fabs(DIF)/self.customPageWidth )/100.0);
        } else if (DIF >= 0 && DIF <= 35) {
            UILabel *labelA;
            if (-1< index && index < self.pageCount) {
                labelA = self.contentLabels[index];
            } else {
                labelA = nil;
            }
            labelA.transform = CGAffineTransformMakeScale(1, (150- 50.0*fabs(DIF)/self.customPageWidth)/100.0);
            UILabel *labelB;
            if (index+1 >= self.pageCount) {
                labelB = nil;
            } else {
                labelB = self.contentLabels[index+1];
            }
            labelB.transform = CGAffineTransformMakeScale(1, (100 + 50*fabs(DIF)/self.customPageWidth )/100.0);
        }
    }
}

//注意offset<0及offset>contensize.width时继续drag时的临界处理

基本效果实现了但是在scrollview上轻扫时会有些cell的高度高度异常，拖动时不会有这个问题。后续解决吧，大家知道怎么处理的评论里指点下哈。先谢谢了
Demo地址

---

2017年2月6日追加

以上方式有局限性，由于UIColleciotionView的复用机制超出显示区域的Cell是不会被创建的无法显示超出frame的cell，故此方法不适用于UIcollectionview。
更通用的做法是设置pagingEnable属性为NO，同时在

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset  {}

方法中改变targetContentOffset偏移量即可。
具体参考这篇文章自定义UICollectionView横向滑动分页功能