这是 Android-通过自定义ViewPager来高仿土巴兔选择装修风格效果 的姐妹篇,上篇通过自定义ViewPager来实现了选中的一项居中并放大的效果,这里通过 iCarousel 来实现这个效果, iCarousel 是我最喜欢的一个IOS开源库之一,我几乎每个IOS项目都用到了它,真的是非常的赞。好了,废话不多说,马上进入主题,在开始之前,先看下我们高仿后的效果图:
要实现这个效果,总体难度上要比Android上轻松不少,你不需要关心点击左右边缘切换到相应的Item,iCarousel都已经帮你实现了,而且iCarousel的每个View都是支持复用。
首先,我们需要把iCarousel的type值设置成 iCarouselTypeCustom ,看代码
-(iCarousel *)iCarousel{ CGFloat height = ScreenWidth - 2 *PAGE_OFFSET; if (_iCarousel == nil) { _iCarousel = [[iCarousel alloc] initWithFrame:CGRectMake(0, (ScreenHeight-height)*0.5, ScreenWidth, height)]; _iCarousel.delegate = self; _iCarousel.dataSource = self; _iCarousel.bounces = NO; _iCarousel.pagingEnabled = YES; _iCarousel.type = iCarouselTypeCustom; } return _iCarousel; }
然后,我们设置iCarousel两个必须的代理方法 viewForItemAtIndex 和 numberOfItemsInCarousel ,看代码:
#pragma mark - iCarousel代理 -(UIView *)carousel:(iCarousel *)carousel viewForItemAtIndex:(NSInteger)index reusingView:(UIView *)view{ if (view == nil) { CGFloat viewWidth = ScreenWidth - 2*PAGE_OFFSET; view = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, viewWidth, viewWidth)]; } ((UIImageView *)view).image = [UIImage imageNamed:[self.dataList objectAtIndex:index]]; return view; } -(NSInteger)numberOfItemsInCarousel:(iCarousel *)carousel{ return self.dataList.count; }
经过上面设置后,我们的iCarousel就加进来了,但是你会发现,加进来的iCarousel不能滑动了,这是什么鬼。。。。
这是为什么呢?这是因为我们有一个非常重要的方法没有实现,这个方法是:
-(CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform
这个方法就是整个iCarousel的核心所在,所有的动画效果都是这个方法来实现的
这里稍微讲解下iCarousel的原理:
iCarousel不是基于UIScrollView实现的,而是直接继承UIView来实现
iCarousel通过UIPanGestureRecognizer来计算和维护scrollOffset这个变量
iCarousel本身并不会改变itemView的位置 而是靠修改itemView的layer.transform来实现位移和形变
为了实现我们想要中间放大的效果,就必须重写这个方法,看下我们的代码:
-(CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform{ static CGFloat max_sacle = 1.0f; static CGFloat min_scale = 0.6f; if (offset <= 1 && offset >= -1) { float tempScale = offset < 0 ? 1+offset : 1-offset; float slope = (max_sacle - min_scale) / 1; CGFloat scale = min_scale + slope*tempScale; transform = CATransform3DScale(transform, scale, scale, 1); }else{ transform = CATransform3DScale(transform, min_scale, min_scale, 1); } return CATransform3DTranslate(transform, offset * self.iCarousel.itemWidth * 1.4, 0.0, 0.0); }
核心的算法和我们Android版本的是一样的,只不过这里加了这个形变,一个是Scale形变,一个是移动Translate形变。经过上面的代码就实现我们想要的结果了。
总体实现来说,这个要比Android版本的要简单多了,核心代码就是改变layer.transform属性值。
这也说明 iCarousel 是多么优秀的一个开源库,说到这里,我个人是非常不喜欢重复造轮子的,能用最少的代码达到所需的要求是我一直以来的准则,而且很多经典的轮子库(比如iCarousel)也值得你去深入探索和学习,了解作者的想法和思路(站在巨人的肩膀)是一种非常不错的学习方法和开阔视野的途径。
最后附上源码 github