UICollectionView 实现横向分页滑动动效

作者: 思想猿 | 来源:发表于2018-03-01 16:27 被阅读3266次

一个简单的横向滑动功能，可以通过UIScrollView来实现，如果涉及到分页滑动效果或者更进一步的动画实现，就需要通过设置scrollview的各种滑动状态对应的Delegate，来控制相关动效果实现。其实通过系统提供的UICollectionView，就能够省去一大部分关于控制滑动状态的工作，最近由于项目需要，研究了下UICollectionView的一些特性，以下就来说说具体的实现。

最终效果.gif

1.自定义分页效果

UICollectionView通过设置pageEnable = YES可以提供简单的分页滑动效果，不过这种设置只适用于内部cell之间的间距与边距一致的情况，如果需要自定义间距/边距，那么就需要我们自己去控制具体的移动距离了。

首先我们需要通过继承UICollectionViewFlowLayout类来自定义其子类，在子类中我们就能对UICollectionView的各种属性进行控制了：


@interface MHBannerCVFlowLayout()

@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 MHSquareBannerCVFlowLayout
/*初始化部分*/
- (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;
    }
    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;
}

完成UICollectionViewFlowLayout子类的初始化后，接下来就可以开始着手分析滑动效果了。UICollectionView是UIScrollView的子类，所以UIScrollView拥有的delegate在UICollectionView中都能使用，但是由于状态繁多，加上很多功能在UICollectionView中系统已经帮我们实现了，所以我们只用去关心UICollectionViewLayout是否能提供更加高度抽象的方法给我们来操作即可。当然，系统这里已经给出了两个测算滑动停止位置的方法：

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity;
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset NS_AVAILABLE_IOS(7_0);

两个方法都能获取系统给出的滑动预计停止点，第一个方法里面多出了一个速率值，这里我们使用第一个方法来自定义出pageEnable=YES的效果：

/**
 * 这个方法的返回值，就决定了collectionView停止滚动时的偏移量
 */
-(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{    
    CGFloat pageSpace = [self stepSpace];//计算分页步距
    CGFloat offsetMax = self.collectionView.contentSize.width - (pageSpace + self.sectionInset.right + self.miniLineSpace);
    CGFloat offsetMin = 0;
    /*修改之前记录的位置，如果小于最小contentsize或者大于最大contentsize则重置值*/
    if (_lastOffset.x<offsetMin)
    {
        _lastOffset.x = offsetMin;
    }
    else if (_lastOffset.x>offsetMax)
    {
        _lastOffset.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/8. && _lastOffset.x>=offsetMin && _lastOffset.x<=offsetMax)
    {
        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);
    }

    //记录当前最新位置
    _lastOffset.x = proposedContentOffset.x;
    return proposedContentOffset;
}

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

ok，到此为止，分页滑动的效果已经出来了，简单来说，重点在3个方面：

设定好固定翻页距离
计算并限制翻页数量
设定翻页触发条件(这里我设置的触发点是，滑动距离超过翻页距离的1/8即可翻页)

通过以上3个数据就可以计算得到自定义滑动停止点的值，直接修改系统给出的值即可。

2.简单的切换效果

ok，分页滑动已经搞定了，接下来就加入点效果，给分页滑动锦上添花。

所有涉及到手势动效的，都会涉及到两个概念：位移量、动画算法，前者好说，基于UIScrollView的子类控件都可以很方便的获取手指在屏幕上的位移量，但是对于动画算法，就需要相关的数学知识了，一个简单的缩放动画我们可以通过这篇文章来了解下相关概念，这里不在赘述。

再来看看UICollectionViewFlowLayout类中有没有可以捕获到手势位移量的方法，我们会发现，除了上述的- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity;方法外，没有其他有关于位移量描述的方法了，那么换个思路来想，在滑动UICollectionView时，其中的Cell是会不停的刷新，那么只要找到控制SubView刷新的方法，其实就能解决这个问题。那么我们在UICollectionViewFlowLayout中就找到了这个方法：-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect此方法给出了一个当前滑动范围，通过这个值，我们能得到对应区域内的所有subview的UICollectionViewLayoutAttributes，进一步转换就能获取到对应的subview实例，那么在此基础上进行动画设定就很容易了。

下面放代码，动画算法我就直接套用上面链接文章中现成的：

/**
 * 当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;
}

到此为止，整个分页滑动加切换效果都已经完成了，对于这部分难点，还是在于想法和对应动画的算法，我尝试了几种仿3D切换效果，找准位移量和动画效果之间的关系不太容易，除了根据对应数学方法之外，只能依靠直觉慢慢调试了，哈哈哈，不太推荐这么做。

UICollectionView 实现横向分页滑动动效

1.自定义分页效果

2.简单的切换效果

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

iOS锦囊

iOS技术点

iOS开发

iOS