Before Everything
关注过 Kitten Yang 的同学可能知道，他写过一篇博客也是讲翻页动画的。我现在读大二，比 Kitten Yang 低一届，学iOS有一年了，一直感觉没进步。所以我就想找一些东西练练，看到 Kitten Yang 的博客后，顿时觉得激情澎湃。因为那炫酷的交互动画，也因为牛逼的学长！
后续，我将不定期的重写 Kitten Yang 的代码，加入自己的理解和改动。也许没有他的动画炫酷，但是我想加入自己的思想，让自己得意进步。所以，如果有错误的地方，还请大家帮我指出来，谢谢！总之, 学习感兴趣的东西是一件愉快的事情！
效果图
下面是效果图，左边是 Kitten Yang 的原作，右边是我改动之后的效果，加入了左右滑动，但是由于 POP 的 kPopLayerRotationY 存在 Bug ，导致翻转超过 M_PI_2 就会出错！所以左右方向我设置的最大角度是 M_PI_2 。还有一点就是，由于我的代码可能过于复杂，我就没加入阴影效果。
源代码：GitHub
Kitten Yang
我的
实现思路
（1） 分离
根据 Kitten Yang 的分析，要将一张图片从中间折叠并显示不同的阴影是非常麻烦的，但是 他有特别的动画技巧，他将一张图片分为上下两个 ImageView 这样就可以分别操作，已达到折叠的效果。由于两个 ImageView 在添加的时候连在一起，所以大家看上去是一个完整的图片，看不出是两个View。
那么，问题来了！如果要实现上下左右都可以折叠呢？
-
这还不简单！分成 4 份不就可以了!
一开始，我也是这么想的，但是 Too Young, Too Simple!
如下图所示：由于设置了
ImageView的Transition3D使得图片在折叠的时候显得更逼真，就像下面图片的上部分。但是如果两张连在一起的 View 同时折叠的话，就是下下部分这个吊样子了！ 中间红色部分会重合！
-
于是我决定 动态裁剪 ！一开始，设置图片的时候不裁剪，使用一个和父视图一样大的
ImageView用于占位，然后根据手指滑动的方向决定怎么裁剪，裁剪后，删除占位视图！- 如果是
左右滑动，就竖直的裁剪！形成左右两个ImageView - 如果是
上下滑动，就水平的裁剪！形成上下两个ImageView
- 如果是
这么完美的解决问题了？我书读的少，你不要骗我！
理想很丰满，现实很骨感 ，我该怎么区分是左右滑动还是上下滑动呢？ 请往下看！
（2） 手势识别
-
众所周知，iOS里的手势识别可以区分方向的是：
UISwipeGestureRecognizer，在将手势添加到视图时，可以指定手势的方向UISwipeGestureRecognizerDirection：UISwipeGestureRecognizerDirectionRightUISwipeGestureRecognizerDirectionLeftUISwipeGestureRecognizerDirectionUpUISwipeGestureRecognizerDirectionDown
可是这个手势，只会识别一次。就是说它的监听方法只会执行一次。由于这里需要根据手指滑动的长度决定图片折叠的角度，所以这个手势并不适用！
-
于是只能使用
UIPanGestureRecognizer，然后根据手指滑动的初始点和第二次得到的点，计算手势的方向。如下图：
绿色的点代表手势开始时的点 (第一次进入监听方法时获得的位置点)，红色的点代表第二次得到的点 (第二次进入监听方法时获得的位置点)，算法如下：
//判断手势方向
func getDirection(location: CGPoint) -> PanDirection {
let dx = location.x - self.initialLocation.x
let dy = location.y - self.initialLocation.y
if abs(dx) > abs(dy) { //1.水平方向
if dx < 0 { //向左
return .left
} else { //向右
return .right
}
} else { //2.竖直方向
if dy < 0 { //向上
return .up
} else { //向下
return .down
}
}
}
总结
到此为止，我改写的主要内容就是这些。对了还有一些代码上的重构，不过我觉得重构的挺丑的，代码看着也不舒服。希望看了我的代码的同学跟我说说你们觉得应该怎么重构才能看的清爽。
建议大家先看 Kitten Yang 的 【POP动画引擎教程 01】实现图片折叠效果， 然后再回来看我这篇。当然啦，我这里写的只是我写代码的思路，具体的代码请到 这里 自取。
网友评论