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

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

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

tubatu-viewpager-fang-ios.gif

要实现这个效果,总体难度上要比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两个必须的代理方法viewForItemAtIndexnumberOfItemsInCarousel,看代码:

#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来高仿土巴兔选择装修风格效果(中间选中项放大)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1034052

相关文章

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格(JTable)作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

一文详解Java Stream的sorted自定义排序

《一文详解JavaStream的sorted自定义排序》Javastream中的sorted方法是用于对流中的元素进行排序的方法,它可以接受一个comparator参数,用于指定排序规则,sorte... 目录一、sorted 操作的基础原理二、自定义排序的实现方式1. Comparator 接口的 Lam

如何自定义一个log适配器starter

《如何自定义一个log适配器starter》:本文主要介绍如何自定义一个log适配器starter的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录需求Starter 项目目录结构pom.XML 配置LogInitializer实现MDCInterceptor

python编写朋克风格的天气查询程序

《python编写朋克风格的天气查询程序》这篇文章主要为大家详细介绍了一个基于Python的桌面应用程序,使用了tkinter库来创建图形用户界面并通过requests库调用Open-MeteoAPI... 目录工具介绍工具使用说明python脚本内容如何运行脚本工具介绍这个天气查询工具是一个基于 Pyt

Druid连接池实现自定义数据库密码加解密功能

《Druid连接池实现自定义数据库密码加解密功能》在现代应用开发中,数据安全是至关重要的,本文将介绍如何在​​Druid​​连接池中实现自定义的数据库密码加解密功能,有需要的小伙伴可以参考一下... 目录1. 环境准备2. 密码加密算法的选择3. 自定义 ​​DruidDataSource​​ 的密码解密3

spring-gateway filters添加自定义过滤器实现流程分析(可插拔)

《spring-gatewayfilters添加自定义过滤器实现流程分析(可插拔)》:本文主要介绍spring-gatewayfilters添加自定义过滤器实现流程分析(可插拔),本文通过实例图... 目录需求背景需求拆解设计流程及作用域逻辑处理代码逻辑需求背景公司要求,通过公司网络代理访问的请求需要做请

Kotlin Compose Button 实现长按监听并实现动画效果(完整代码)

《KotlinComposeButton实现长按监听并实现动画效果(完整代码)》想要实现长按按钮开始录音,松开发送的功能,因此为了实现这些功能就需要自己写一个Button来解决问题,下面小编给大... 目录Button 实现原理1. Surface 的作用(关键)2. InteractionSource3.

使用WPF实现窗口抖动动画效果

《使用WPF实现窗口抖动动画效果》在用户界面设计中,适当的动画反馈可以提升用户体验,尤其是在错误提示、操作失败等场景下,窗口抖动作为一种常见且直观的视觉反馈方式,常用于提醒用户注意当前状态,本文将详细... 目录前言实现思路概述核心代码实现1、 获取目标窗口2、初始化基础位置值3、创建抖动动画4、动画完成后

uniapp小程序中实现无缝衔接滚动效果代码示例

《uniapp小程序中实现无缝衔接滚动效果代码示例》:本文主要介绍uniapp小程序中实现无缝衔接滚动效果的相关资料,该方法可以实现滚动内容中字的不同的颜色更改,并且可以根据需要进行艺术化更改和自... 组件滚动通知只能实现简单的滚动效果,不能实现滚动内容中的字进行不同颜色的更改,下面实现一个无缝衔接的滚动