这个是我几个月前写的一个类似喵街首页的一个翻页效果,是用iCarousel来实现的(本文先只针对iCarousel的一个简单的使用,后续有机会我在和大家比较详细的分析下iCarousel的实现细节)
iCarousel的使用其实很简单,就当这个是一个UICollectionView来使用,但是不需要自己写那个复杂的自定义布局就可以实现很好的翻页效果,而且性能也很高,内部cell都是复用的,更重要的是扩展性很高,本文的例子就是针对iCarousel的自定义扩展类型的一个简单应用。
之前看过一篇文章,是分析IOS9的任务切换动画的(http://www.cocoachina.com/ios/20150804/12878.html),他的实现也就用iCarousel来实现,效果也很好,而且配备了大量的图和数学公式来说明,做这两个例子的复杂点在于如何利用iCarousel的iCarouselTypeCustom自定义布局类型、以及我们所需要的布局的数据计算;
先上一个图片(卡顿不是因为性能,是因为鼠标操作模拟器的缘故):
1. 首先,引入iCarousel,并在ViewController中实现iCarouselDataSource,iCarouselDelegate协议,并创建iCarousel;
这里面类型用iCarouselTypeCustom,就是我们要的自定义类型,vertical设置为YES,竖着排列;
2. iCarousel默认是横着排列,首先我们先通过旋转转换为竖着排列;
- (CATransform3D)carousel:(iCarousel*)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform,这个方法就是针对每一个cell做3D转换的,需要旋转90度,CATransform3DRotate(transform,M_PI/2,0,0,1)
3. 下面就是计算我们的这个效果的一些数学模型数据了:
a) index: 最上面的cell的index是0,往下依次+1,往上依次-1(需要说明的是,如果所有的cell都不做平移、旋转、缩放,则所有的cell都是居中,下面默认整个屏幕高度为一个单位来描述)
b) cell 0的高度占据了0.5的比例,位置在最上面,也就是说向上平移了0.5个单位高度;
c) cell 1的高度没有变化,也是0.5的比例,位置紧贴着cell 0的下方,显露出的高度是5/12个单位,可以得出cell 1是向下平移了0.5个单位;
d) cell 2的高度也没有变,位置比cell 1低5/12个单位,也就是cell 1显露出的高度,显露出的高度也是5/12个单位,可以得出cell 2是向下平移了0.5+5/12个单位;
e) cell index<0的情形,是当滑动的时候,上移的速度减半;
f) cell 3的高度也不变,位置比cell 2低5/12个单位,也是cell 2显露出的高度,自己只能显露出2/12个单位的高度,可以得出cell 3是向下平移了0.5+2*5/12个单位;
由上面几个规律,得出下面的结果:
g) 还可以针对每一个cell做缩放计算,本例子中,没有做缩放计算,就是1倍率缩放
h) 最终针对每一个cell的实时的位置和缩放计算出的CATransform3D是:
i) 如果再想针对每一个cell内部在某个offset条件下做自定义的动画,就在下面的方法中,本例子中只是简单的改变下蒙版透明度:
4) 完整的例子代码是在github上:https://github.com/ShakeShakeMe/iCarousel-miaojie.git