这次迭代开发时，项目中有个选课功能，产品设计大哥要求以左右滑动重叠的书籍来选择课程（跟以前那次做的选择机构动画类似），最后点击选择后书本有个翻页的动画效果，如下：
ScrollCard.gif
之前那次做的是无限循环的卡片滚动效果动画，详情可以看：
《collectionView实现无限循环滚动卡片》
通过对比可以发现，本次动画跟上次的区别在于：
- 卡片不需要无限滚动
- 卡片之间没有间距，有部分重叠
- 卡片之间有上下层次的区分
- 卡片不在同一水平线上，有高有低
由于collectionView实现无限循环滚动卡片中已经写过了如何实现的卡片滚动动画效果，所以本文不再啰嗦，主要是写我在改写之前的demo过程中遇到的几个问题，分享给大家~
实现卡片重叠
之前的卡片之所以有间距，是因为我设置了item之间的间距，所以我想这次只要把间距设置成负数不就重叠了嘛，这一步很简单
然后就是按照UI图调整item的大小，使其同时展示5个卡片。
layout.minimumLineSpacing = -40
实现卡片上下层次的区分
在上一步中卡片实现了部分的重叠，但是它们并不是像下面的UI图设计的那样使得最中间的浮在最上层，其次两侧的两个在第二层，最两侧的两个处于最下层。
UI.png
然后我想到的办法就是在卡片滑动过程中，把最中心两侧的两个视图调到最上层，然后再把最中间的视图放到最上层。
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let pointInView = self.convert(collectionView.center, to: collectionView)
let index = collectionView.indexPathForItem(at: pointInView)?.row ?? 0
if let cell = collectionView.cellForItem(at: IndexPath.init(row: index - 2, section: 0)) {
collectionView.bringSubview(toFront: cell)
}
if let cell = collectionView.cellForItem(at: IndexPath.init(row: index + 2, section: 0)) {
collectionView.bringSubview(toFront: cell)
}
if let cell = collectionView.cellForItem(at: IndexPath.init(row: index - 1, section: 0)) {
collectionView.bringSubview(toFront: cell)
}
if let cell = collectionView.cellForItem(at: IndexPath.init(row: index + 1, section: 0)) {
collectionView.bringSubview(toFront: cell)
}
if let cell = collectionView.cellForItem(at: IndexPath.init(row: index, section: 0)) {
collectionView.bringSubview(toFront: cell)
}
}
通过这个方法，就让5个卡片实现了预定的层次结构。但是我感觉这样好像有些麻烦，不知道有没有其他的方法可以实现，如果有知道的大神，敬请指点😆
实现当滚动至第一个或最后一个卡片时，使其居中
由于collectionView的区域比较大，所以cell的分布也是在它的区域宽度范围内，这样的话，当cell个数比较多的时候，最两侧的cell就无法滑动到视图中间的位置了。
于是开始的时候我想到的办法是头尾各填充两个假数据，并把它们隐藏掉，这样就可以把第1个（实际上也就是第3个）cell滚动至中间位置了。但是这样写就弄的代码很烂，毕竟数据模型中多了4个假数据，很多地方都要做处理。
又于是，我突然想到了可以设置section的间距啊，把section的左右间距设置成刚才两个cell的宽度不就既可以达到填充的效果又不用侵染模型数组了吗。。。
layout.sectionInset = UIEdgeInsetsMake(0, 107 * 2, 0, 107 * 2)
实现卡片上下位置区分
常规的collectionView中所有的cell横向排列时，肯定都是在同一水平线上的，但是UI图既然要求有高有低，那么就要想办法调整cell的y值。
之前在《collectionView实现无限循环滚动卡片》中，实现卡片滚动过程中放大的效果时，是重写了UICollectionViewFlowLayout中的layoutAttributesForElements in rect方法，在该方法中通过根据偏移量来计算出缩小系数，使得卡片在偏离中间位置时逐渐变小，在靠近中间位置时逐渐变大，恢复成原本尺寸。
同样，可以根据这个缩小的系数乘以x轴的偏移量得出一个y轴的偏移量，然后赋给y值，这样就可以让卡片随着偏离中间位置时逐渐下移，反之靠近中间时逐渐上移。
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
let array = getCopyOfAttributes(attributes: super.layoutAttributesForElements(in: rect))
var visibleRect = CGRect()
visibleRect.origin = self.collectionView!.contentOffset
visibleRect.size = self.collectionView!.bounds.size
for attributes in array! {
let distance = visibleRect.midX - attributes.center.x
let normalizedDistance = abs(distance/ActiveDistance)
let zoom = 1 - ScaleFactor * normalizedDistance
// 缩放大小
attributes.transform3D = CATransform3DMakeScale(zoom, zoom, 1.0)
// y轴偏移
attributes.frame.origin.y = abs(distance * ScaleFactor)
}
return array
}
实现书页翻动效果
我在cell上面添加了一个容器视图containerView，然后在它上边添加的书皮imageView以及书名label，这样只需要把动画添加到containerView的layer上就可以实现书皮整体翻动的效果了。
这个页面翻动的动画效果用的是大苹果原生提供的CATransition核心动画，实现起来非常简单~
let cell = collectionView.cellForItem(at: indexPath) as! CourseCardCell
let ca = CATransition()
ca.delegate = self
ca.type = "pageCurl"
ca.subtype = kCATransitionFromRight
ca.duration = 1
cell.containerView.layer.add(ca, forKey: nil)
顺便说一下，除了以上用到的pageCurl，还有以下其他几种类型的转场动画效果：
ca.type = kCATransitionFade
ca.type = kCATransitionMoveIn
ca.type = kCATransitionPush
ca.type = kCATransitionReveal
ca.type = "cube"
ca.type = "suckEffect"
ca.type = "oglFlip"
ca.type = "rippleEffect"
ca.type = "pageCurl"
ca.type = "pageUnCurl"
ca.type = "cameraIrisHollowOpen"
ca.type = "cameraIrisHollowClose"
以上几点，就是我在开发中遇到的几个问题的解决方案，如有更好的解决方法，欢迎指教~
如有不详细之处，请参考demo源码：
github demo源码
最后附上demo中那几本书名的来源😆
程序员的自我修养:
第一阶段：
《C语言程序与设计》
《Java通识》
《C++进阶宝典》
《Swift入门与实践》
第二阶段：
《教你怎么不生气》
《佛经》
《老子》
《沉默的愤怒》
第三阶段：
《颈椎病康复指南》
《腰椎间盘突出日常护理》
《心脏病的预防与防治》
《高血压降压宝典》
《强迫症的自我恢复》
《精神病症状学》
第四阶段：
《活着》
网友评论