如何实现iOS图书动画:第1部分(下)
- 原文链接 : How to Create an iOS Book Open Animation: Part 1
- 原文作者 : Vincent Ngo
- 译文出自 : 开发技术前线 www.devtf.cn
- 译者 : kmyhy
翻页布局
最终实现的效果如下：
这看起来就像是一本真正的书! :]
在Book文件夹下新建一个Layout文件夹。在Layout文件夹上右键，选择New File…，然后适用iOS\Source\Cocoa Touch Class模板，然后点Next。类名命名为BookLayout，继承于UICollectionViewFlowLayout，语言选择Swift。
同前面一样，图书所使用的Collection View需要适用新的布局。打开Main.storyboard，然后选择Book View Controller场景，展开并选中其中的Collection View，然后设置Layout属性为Custom。
然后，将Layout属性下的 Class属性设置为BookLayout：
打开BookLayout.swift，在类声明之上加入如下代码：
private let PageWidth: CGFloat = 362
private let PageHeight: CGFloat = 568
private var numberOfItems = 0这几个常量将用于设置单元格的大小，以及记录整本书的页数。
接着，在类声明内部加入代码：
override func prepareLayout() {
super.prepareLayout()
collectionView?.decelerationRate = UIScrollViewDecelerationRateFast
numberOfItems = collectionView!.numberOfItemsInSection(0)
collectionView?.pagingEnabled = true
}这段代码和我们在BooksLayout中所写的差不多，仅有以下几处差别：
- 将减速速度设置为UIScrollViewDecelerationRateFast，以加快Scroll View滚动速度变慢的节奏。
- 记住本书的页数。
- 启用分页，这样Scroll View滚动时将以其宽度的固定倍数滚动（而不是持续滚动）。
仍然在BookLayout.swift中，加入以下代码：
override func shouldInvalidateLayoutForBoundsChange(newBounds: CGRect) -> Bool {
return true
}跟前面一样，返回true，以表示用户每次滚动都会重新计算布局。
然后，覆盖collectionViewContentSize() ，以指定Collection View的contentSize：
override func collectionViewContentSize() -> CGSize {
return CGSizeMake((CGFloat(numberOfItems / 2)) * collectionView!.bounds.width, collectionView!.bounds.height)
}这个方法返回了内容区域的整个大小。内容区域的高度总是不变的，但宽度是随着页数变化的——即书的页数除以2倍，再乘以屏幕宽度。除以2是因为书页有两面，内容区域一次显示2页。
就如我们在BooksLayout中所做的一样，我们还需要覆盖layoutAttributesForElementsInRect(_:)方法，以便我们能够在单元格上增加翻页效果。
在collectionViewContentSize()方法后加入：
override func layoutAttributesForElementsInRect(rect: CGRect) -> [AnyObject]? {
//1
var array: [UICollectionViewLayoutAttributes] = []
//2
for i in 0 ... max(0, numberOfItems - 1) {
//3
var indexPath = NSIndexPath(forItem: i, inSection: 0)
//4
var attributes = layoutAttributesForItemAtIndexPath(indexPath)
if attributes != nil {
//5
array += [attributes]
}
}
//6
return array
}不同于在BooksLayout中的将所有计算布局属性的代码放在这个方法里面，我们这次将这个任务放到layoutAttributesForItemAtIndexPath(_:)中进行，因为在图书的实现中，所有单元格都是同时可见的。
以上代码解释如下：
- 声明一个数组，用于保存所有单元格的布局属性。
- 遍历所有的书页。
- 对于CollecitonView中的每个单元格，都创建一个NSIndexPath。
- 通过每个NSIndexPath来获得单元格的布局属性，在后面，我们会覆盖layoutAttributesForItemAtIndexPath(_:)方法。
- 把每个单元格布局属性添加到数组。
- 返回数组。
处理页面的几何计算
在我们开始实现layoutAttributesForItemAtIndexPath(_:)方法之前，花几分钟好好思考一下布局的问题，它是怎样实现的，如果能够写几个助手方法将会让我们的代码更漂亮和模块化。:]
上图演示了翻页时以书籍为轴旋转的过程。图中书页的”打开度“用-1到1来表示。为什么？你可以想象一下放在桌子上的一本书，书脊所在的位置代表0.0。当你从左向右翻动书页时，书页张开的程度从-1（最左）到1（最右）。因此，我们可以用下列数字表示“翻页”的过程：
- 0.0表示一个书页翻成90度，与桌面成直角。
- +/-0.5表示书页翻至于桌面成45度角。
- +/-1.0表示书页翻至与桌面平行。
注意，因为角度是按照反时针方向增加的，因此角度的符号和对应的打开度是相反的。
首先，在layoutAttributesForElementsInRect(_:)方法后加入助手方法：
//MARK: - Attribute Logic Helpers
func getFrame(collectionView: UICollectionView) -> CGRect {
var frame = CGRect()
frame.origin.x = (collectionView.bounds.width / 2) - (PageWidth / 2) + collectionView.contentOffset.x
frame.origin.y = (collectionViewContentSize().height - PageHeight) / 2
frame.size.width = PageWidth
frame.size.height = PageHeight
return frame
}对于每一页，我们都可以计算出相对于Collection View中心的frame。getFrame(_:)方法会将每一页的一边对齐到书脊。唯一会变的是Collectoin View的contentOffset在x方向上的改变。
然后，在getFrame(_:)方法后添加如下方法：
func getRatio(collectionView: UICollectionView, indexPath: NSIndexPath) -> CGFloat {
//1
let page = CGFloat(indexPath.item - indexPath.item % 2) * 0.5
//2
var ratio: CGFloat = -0.5 + page - (collectionView.contentOffset.x / collectionView.bounds.width)
//3
if ratio > 0.5 {
ratio = 0.5 + 0.1 * (ratio - 0.5)
} else if ratio < -0.5 {
ratio = -0.5 + 0.1 * (ratio + 0.5)
}
return ratio
}上面的方法计算书页翻开的程度。对每一段有注释的代码分别说明如下：
- 算出书页的页码——记住，书是双面的。 除以2就是你真正在翻读的那一页。
- 算出书页的打开度。注意，这个值被我们加了一个权重。
- 书页的打开度必须限制在-0.5到0.5之间。另外乘以0.1的作用，是为位了在页与页之间增加一条细缝，以表示它们是上下叠放在一起的。
一旦我们计算出书页的打开度，我们就可以将之转变为旋转的角度。
在getRation(_:indexPath:)方法后面加入代码：
func getAngle(indexPath: NSIndexPath, ratio: CGFloat) -> CGFloat {
// Set rotation
var angle: CGFloat = 0
//1
if indexPath.item % 2 == 0 {
// The book's spine is on the left of the page
angle = (1-ratio) * CGFloat(-M_PI_2)
} else {
//2
// The book's spine is on the right of the page
angle = (1 + ratio) * CGFloat(M_PI_2)
}
//3
// Make sure the odd and even page don't have the exact same angle
angle += CGFloat(indexPath.row % 2) / 1000
//4
return angle
}这个方法中有大量计算，我们一点点拆开来看：
- 判断该页是否是偶数页。如果是，则该页将翻到书脊的右边。翻到右边的页是反手翻转，同时书脊右边的页其角度必然是负数。注意，我们将打开度定义为-0.5到0.5之间。
- 如果当前页是奇数，则该页将位于书脊左边，当书页被翻到左边时，它的按正手翻转，书脊左边的页其角度为正数。
- 每页之间加一个小夹角，使它们彼此分离。
- 返回旋转角度。
得到旋转角度之后，我们可以操纵书页使其旋转。增加如下方法：
func makePerspectiveTransform() -> CATransform3D {
var transform = CATransform3DIdentity
transform.m34 = 1.0 / -2000
return transform
}修改转换矩阵的m34属性，已达到一定的立体效果。
然后应用旋转动画。实现下面的方法：
func getRotation(indexPath: NSIndexPath, ratio: CGFloat) -> CATransform3D {
var transform = makePerspectiveTransform()
var angle = getAngle(indexPath, ratio: ratio)
transform = CATransform3DRotate(transform, angle, 0, 1, 0)
return transform
}在这个方法中，我们用到了刚才创建的两个助手方法去计算旋转的角度，然后通过一个CATransform3D对象让书页在y轴上旋转。
所有的助手方法都实现了，我们最终需要配置每个单元格的属性。在layoutAttributesForElementsInRect(_:)方法后加入以下方法：
override func layoutAttributesForItemAtIndexPath(indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes! {
//1
var layoutAttributes = UICollectionViewLayoutAttributes(forCellWithIndexPath: indexPath)
//2
var frame = getFrame(collectionView!)
layoutAttributes.frame = frame
//3
var ratio = getRatio(collectionView!, indexPath: indexPath)
//4
if ratio > 0 && indexPath.item % 2 == 1
|| ratio < 0 && indexPath.item % 2 == 0 {
// Make sure the cover is always visible
if indexPath.row != 0 {
return nil
}
}
//5
var rotation = getRotation(indexPath, ratio: min(max(ratio, -1), 1))
layoutAttributes.transform3D = rotation
//6
if indexPath.row == 0 {
layoutAttributes.zIndex = Int.max
}
return layoutAttributes
}在Collection View的每个单元格上，都会调用这个方法。这个方法做了如下工作：
- 创建一个UICollectionViewLayoutAttributes对象layoutAttributes，供IndexPath所指的单元格使用。
- 调用我们先前定义的getFrame方法设置layoutAttributes的frame，确保单元格对齐于书脊。
- 调用先前定义的getRatio方法算出单元格的打开度。
- 判断当前页是否位于正确的打开度范围之内。如果不，不显示该单元格。为了优化（也是为了符合常理），除了正面向上的书页，我们不应当显示书页的背面——书的封面例外，那个不管什么时候都需要显示。
- 应用旋转动画，使用前面算出的打开度。
- 判断是否是第一页，如果是，将它的zIndex放在其他页的上面，否则有可能出现画面闪烁的Bug。
编译，运行。打开书，翻动每一页……呃？什么情况？
书被错误地从中间装订了，而不是从书的侧边装订。
如图中所示，每个书页的锚点默认是x轴和y轴的0.5倍处。现在你知道怎么做了吗？
很显然，我们需要修改书页的锚点为它的侧边缘。如果这个书页是位于书的右边，则它的锚点应该是(0,0.5)。如果书页是位于书的左边，测锚点应该是(1,0.5)。
打开BookePageCell.swift，添加如下代码：
override func applyLayoutAttributes(layoutAttributes: UICollectionViewLayoutAttributes!) {
super.applyLayoutAttributes(layoutAttributes)
//1
if layoutAttributes.indexPath.item % 2 == 0 {
//2
layer.anchorPoint = CGPointMake(0, 0.5)
isRightPage = true
} else { //3
//4
layer.anchorPoint = CGPointMake(1, 0.5)
isRightPage = false
}
//5
self.updateShadowLayer()
}我们重写了applyLayoutAttributes(_:)方法，这个方法用于将BookLoayout创建的布局属性应用到第一个。
上述代码非常简单：
- 检查当前单元格是否是偶数，也就是说书脊是否位于书页的左边。
- 如果是，将书页的锚点设置为单元格的左边缘，同时isRightPage设置为true。isRightPage变量可用于决定书页的圆角样式应当在那一边应用。
- 如果是奇数页，书脊应当位于书页的右边。
- 这只书页的锚点为单元格的右边缘，isRightPage设为false。
- 最后，设置当前书页的阴影层。
编译，运行。翻动书页，这次的效果已经好了许多：
本教程第一部分就到此为止了。你是不是觉得自己干了一件了不起的事情呢——效果做得很棒，不是吗？
接下来做什么
第一部分的完整代码在此处下载：http://cdn1.raywenderlich.com/wp-content/uploads/2015/05/Part-1-Paper-Completed.zip
我们从一个默认的Collection View布局开始，学习了如何定制自己的layout，并用它取得了令人叫绝的效果！用户在用这个App时，会觉得自己真的是在翻一本书。其实，将一个普通的电子阅读App变成一个让用户体验更加真实的带翻页效果的App，只需要做很小的改动。
当然，我们还没有完成这个App。在本教程的第二部分，我们将使App变得更加完善和生动，我们将在打开书和关上书的一瞬间加入自定义动画。
在开发App过程中，你也可能曾经有过一些关于布局的“疯狂”想法。如果你对本文有任何问题、意见或想法，请加入到下面的讨论中来！