iOS仿格瓦拉 轮播图 Parallax Rolling Banner
作者：yuan
前言
在上一篇中，我们实现了一个视差滚动的轮播图，但是它是由通过设置UIScrollView的pageEnable的属性来实现的。 然而你会发现他并没有像格瓦拉的滚动视图那样丝滑，减速动画阻尼巨大
格瓦拉的滚动视图：
优化思路
既然系统提供的分页方式不能满足我们，那么我们如何自己实现一个paging的效果呢？答案就在Apple的官方文档里面，在查阅UIScrollView的代理后，我们可以发现里面有这样一个代理方法：
//scrollView The scroll-view object where the user ended the touch..
//velocity The velocity of the scroll view (in points) at the moment the touch was released.
//targetContentOffset The expected offset when the scrolling action decelerates to a stop.
//Your application can change the value of the targetContentOffset parameter to adjust where the scrollview finishes its scrolling animation.
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView
withVelocity:(CGPoint)velocity
targetContentOffset:(inout CGPoint *)targetContentOffset
在这个方法中有一个targetContentOffset的参数，文档里指出，我们可以通过修改这个参数，来改变scrollView在滑动动画结束时的位置。 Bingo， 这就是我们想要的！通过修改targetContentOffset直接修改目标offset为整数页位置
实现
我们所需要的paging：
- 设置滑动阻尼，当滑动没有达到滑动阻尼位置时，标记这次滑动为
cancel，并修改targetContentOffset.x为起始位置self.bounds.size.width - 当已经超过滑动阻尼时， 标记这次滑动为
complete,并通过滑动方向计算相应的targetContentOffset.x结束位置为0或者self.bounds.size.width * 2
核心代码：
- (CGFloat)targetOffsetForMoveX:(CGFloat)moveX velocity:(CGFloat)velocity{
BOOL complete = fabs(moveX) >= self.bounds.size.width * 0.3 ||
(fabs(velocity) > 0 && fabs(moveX) >= self.bounds.size.width * 0.1 )? YES : NO;
BOOL leftDirection = moveX > 0 ? YES : NO;
if (complete) {
if (leftDirection) {
return self.bounds.size.width * 2;
}
return 0; //right Direction
}else {
return self.bounds.size.width;//cancel
}
}
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset {
if (self.pagingEnabled)return;
CGFloat moveX = scrollView.contentOffset.x - self.bounds.size.width;
CGFloat targetX = [self targetOffsetForMoveX:moveX velocity:velocity.x];
if (targetX == self.bounds.size.width) {//cancel
targetContentOffset->x = scrollView.contentOffset.x;
[self setContentOffset:CGPointMake(targetX, targetContentOffset->y) animated:YES];
} else {//complete
targetContentOffset->x = targetX;
}
}
注意在这里我们做了一些优化，当滑动被判断为cancel时，我们并没有直接把其实位置self.bounds.size.width赋值给targetContentOffset->x。那是因为，经常我们的滑动的时候会伴随加速度velocity.x。当targetContentOffset->x与scrollView的contentOffset.x非常相近，又伴随加速度velocity.x时，cancel的滑动动画的持续时间就会非常短。这带来的滑动体验非常不好。
在这里，我们放弃修改targetContentOffset->x为起始值，转而直接把他赋值为当前的contentOffset.x，这样滑动手势所带来的velocity.x就不会影响到cancel的滑动动画;同时我们再使用系统自带的方法来完成这个cancel的结束动画
[self setContentOffset:CGPointMake(targetX, targetContentOffset->y) animated:YES]
RunLoop 与 targetContentOffset
如果你注意观察，你会发现：当我们修改scrollView的targetContentOffset时，scrollView会有一次准确的contentOffset等于targetContentOffset的回调-scrollViewDidScroll:。我们暂时把这个回调叫作准确回调
由于RunLoop的原故，在代理方法
-(void)scrollViewDidScroll:中对于scrollView的contentOffset监听非常不精确。所以我们很可能拿到和我们所期望值不一样的contentOffset
如果我们在最接近准确回调的回调里修改了scrollView的contentOffset，ie: 设置contentOffset.x为self.bounds.size.width，同时紧接着在准确回掉里又把contentOffset.x设置为其它值。 那么-(void)scrollViewDidScroll:里面对于视图位置的修改可能就会出现错误。因此我们需要加一些处理：
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat moveX = scrollView.contentOffset.x - self.bounds.size.width;
if (fabs(self.lastMoveX)>= self.bounds.size.width) {
//prevent method scrollViewWillEndDragging: withVelocity: targetContentOffset: reload the image postion,
//so we reset scrollview to init postion and return,
[self resetSubViews];
self.lastMoveX = 0;
return;
}
[self adjustSubViews:moveX];
if (fabs(moveX) >= self.bounds.size.width) {
[self completedHandler];
}
self.lastMoveX = moveX;
}
到这里，我们使用targetContentOffset来实现Paging的效果就结束了。 我们来看一下效果对比：
<center>targetContentOffset</center>
<center>pageEnable</center>
GIF可能不是很明显，如果你下载了项目，运行起来。你将会看到非常明显的差异
总结
当你同时在-(void)scrollViewDidScroll:与- (void)scrollViewWillEndDragging:withVelocity:targetContentOffset:里面对contentOffset做修改时你需要格外小心。因为RunLoop的原故,contentOffset检测是十分不精确的.在你修改contentOffset时，-(void)scrollViewDidScroll:会被反复调起。
使用pageEnable实现分页，你将会失去：
- 如丝般的顺滑
- 只能以frame size为单位翻页，减速阻尼巨大，减速过程不超过一页
- 不能自由控制动画complete与cancel的的滑动比例
使用targetContentOffset实现Paging，减速过程流畅。并且可以实现一屏多页的效果。大家可以自行发挥。
想体验如丝般顺滑请戳这里
网友评论