IOS-通过自定义iCarousel来高仿土巴兔选择装修风格效果(中间选中项放大)

本文主要是介绍IOS-通过自定义iCarousel来高仿土巴兔选择装修风格效果(中间选中项放大)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这是Android-通过自定义ViewPager来高仿土巴兔选择装修风格效果的姐妹篇，上篇通过自定义ViewPager来实现了选中的一项居中并放大的效果，这里通过iCarousel来实现这个效果，iCarousel是我最喜欢的一个IOS开源库之一，我几乎每个IOS项目都用到了它，真的是非常的赞。好了，废话不多说，马上进入主题，在开始之前，先看下我们高仿后的效果图：

要实现这个效果，总体难度上要比Android上轻松不少，你不需要关心点击左右边缘切换到相应的Item，iCarousel都已经帮你实现了，而且iCarousel的每个View都是支持复用。

总体难点就一个地方，那就是自定义iCarousel，然后设置相应的缩放动画。

首先，我们需要把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的原理：

1. iCarousel不是基于UIScrollView实现的，而是直接继承UIView来实现

2. iCarousel通过UIPanGestureRecognizer来计算和维护scrollOffset这个变量

3. 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)也值得你去深入探索和学习，了解作者的想法和思路(站在巨人的肩膀)是一种非常不错的学习方法和开阔视野的途径

这篇关于IOS-通过自定义iCarousel来高仿土巴兔选择装修风格效果(中间选中项放大)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---