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

2023年4月23日发(作者：家用空调工作原理图解)

IOS-通过⾃定义iCarousel来⾼仿⼟巴兔选择装修风格

效果（中间选中项放⼤）

这是的姐妹篇，上篇通过⾃定义ViewPager来实现了选中的⼀项居中并放⼤的效果，这⾥通过来实现这个效果，是我最喜欢的⼀个IOS开源库之⼀，我⼏乎每个

IOS项⽬都⽤到了它，真的是⾮常的赞。好了，废话不多说，马上进⼊主题，在开始之前，先看下我们⾼仿后的效果图：

要实现这个效果，总体难度上要⽐Android上轻松不少，你不需要关⼼点击左右边缘切换到相应的Item，iCarousel都已经帮你实现了，⽽且iCarousel的每个

View都是⽀持复⽤。

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

⾸先，我们需要把iCarousel的type值设置成iCarouselTypeCustom，看代码

[js]

1. -(iCarousel *)iCarousel{

2. CGFloat height = ScreenWidth - 2 *PAGE_OFFSET;

3. if (_iCarousel == nil) {

4. _iCarousel = [[iCarousel alloc] initWithFrame:CGRectMake(0, (ScreenHeight-height)*0.5, ScreenWidth, height)];

5. _te = self;

6. _urce = self;

7. _s = NO;

8. _Enabled = YES;

9. _ = iCarouselTypeCustom;

10. }

11. return _iCarousel;

12. }

然后，我们设置iCarousel两个必须的代理⽅法viewForItemAtIndex和numberOfItemsInCarousel，看代码：

[js]

1. #pragma mark - iCarousel代理

2. -(UIView *)carousel:(iCarousel *)carousel viewForItemAtIndex:(NSInteger)index reusingView:(UIView *)view{

3. if (view == nil) {

4. CGFloat viewWidth = ScreenWidth - 2*PAGE_OFFSET;

5. view = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, viewWidth, viewWidth)];

6. }

7.

8. ((UIImageView *)view).image = [UIImage imageNamed:[st objectAtIndex:index]];

9.

10. return view;

11. }

12.

13. -(NSInteger)numberOfItemsInCarousel:(iCarousel *)carousel{

14. return ;

15. }

经过上⾯设置后，我们的iCarousel就加进来了，但是你会发现，加进来的iCarousel不能滑动了，这是什么⿁。。。。

这是为什么呢？这是因为我们有⼀个⾮常重要的⽅法没有实现，这个⽅法是:

[js]

1. -(CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform

这个⽅法就是整个iCarousel的核⼼所在，所有的动画效果都是这个⽅法来实现的

这⾥稍微讲解下iCarousel的原理：

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

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

iCarousel本⾝并不会改变itemView的位置 ⽽是靠修改itemView的orm来实现位移和形变

为了实现我们想要中间放⼤的效果，就必须重写这个⽅法，看下我们的代码：

[js]

1. -(CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform{

2. static CGFloat max_sacle = 1.0f;

3. static CGFloat min_scale = 0.6f;

4. if (offset <= 1 && offset >= -1) {

5. float tempScale = offset < 0 ? 1+offset : 1-offset;

6. float slope = (max_sacle - min_scale) / 1;

7.

8. CGFloat scale = min_scale + slope*tempScale;

9. transform = CATransform3DScale(transform, scale, scale, 1);

10. }else{

11. transform = CATransform3DScale(transform, min_scale, min_scale, 1);

12. }

13.

14. return CATransform3DTranslate(transform, offset * dth * 1.4, 0.0, 0.0);

15. }

核⼼的算法和我们Android版本的是⼀样的，只不过这⾥加了这个形变，⼀个是Scale形变，⼀个是移动Translate形变。经过上⾯的代码就实现我们想要的结果

了。

⼩结

总体实现来说，这个要⽐Android版本的要简单多了，核⼼代码就是改变orm属性值。

这也说明是多么优秀的⼀个开源库，说到这⾥，我个⼈是⾮常不喜欢重复造轮⼦的，能⽤最少的代码达到所需的要求是我⼀直以来的准则，⽽且很多经典的轮⼦

库(⽐如iCarousel)也值得你去深⼊探索和学习，了解作者的想法和思路(站在巨⼈的肩膀)是⼀种⾮常不错的学习⽅法和开阔视野的途径