Before Everything
關(guān)注過 Kitten Yang 的同學可能知道，他寫過一篇博客也是講翻頁動畫的脓诡。我現(xiàn)在讀大二吮炕，比 Kitten Yang 低一屆宁炫，學iOS有一年了，一直感覺沒進步州既。所以我就想找一些東西練練谜洽，看到 Kitten Yang 的博客后，頓時覺得激情澎湃吴叶。因為那炫酷的交互動畫阐虚，也因為牛逼的學長！
后續(xù)蚌卤，我將不定期的重寫 Kitten Yang 的代碼实束，加入自己的理解和改動。也許沒有他的動畫炫酷逊彭，但是我想加入自己的思想咸灿，讓自己得意進步。所以诫龙，如果有錯誤的地方析显，還請大家?guī)臀抑赋鰜恚x謝签赃！總之, 學習感興趣的東西是一件愉快的事情谷异！
效果圖
下面是效果圖，左邊是 Kitten Yang 的原作锦聊，右邊是我改動之后的效果歹嘹，加入了左右滑動，但是由于 POP 的 kPopLayerRotationY 存在 Bug 孔庭，導致翻轉(zhuǎn)超過 M_PI_2 就會出錯尺上！所以左右方向我設置的最大角度是 M_PI_2 材蛛。還有一點就是，由于我的代碼可能過于復雜怎抛，我就沒加入陰影效果卑吭。
源代碼：GitHub
實現(xiàn)思路
（1） 分離
根據(jù) Kitten Yang 的分析，要將一張圖片從中間折疊并顯示不同的陰影是非常麻煩的马绝，但是 他有特別的動畫技巧豆赏，他將一張圖片分為上下兩個 ImageView 這樣就可以分別操作，已達到折疊的效果富稻。由于兩個 ImageView 在添加的時候連在一起掷邦，所以大家看上去是一個完整的圖片，看不出是兩個View椭赋。
那么抚岗，問題來了！如果要實現(xiàn)上下左右都可以折疊呢哪怔？
-
這還不簡單宣蔚！分成 4 份不就可以了!
一開始，我也是這么想的蔓涧，但是 Too Young, Too Simple!
如下圖所示：由于設置了
ImageView的Transition3D使得圖片在折疊的時候顯得更逼真件已，就像下面圖片的上部分。但是如果兩張連在一起的 View 同時折疊的話元暴，就是下下部分這個吊樣子了篷扩！ 中間紅色部分會重合！
-
于是我決定 動態(tài)裁剪 茉盏！一開始鉴未，設置圖片的時候不裁剪，使用一個和父視圖一樣大的
ImageView用于占位鸠姨，然后根據(jù)手指滑動的方向決定怎么裁剪铜秆，裁剪后，刪除占位視圖讶迁！- 如果是
左右滑動连茧，就豎直的裁剪！形成左右兩個ImageView - 如果是
上下滑動巍糯，就水平的裁剪啸驯！形成上下兩個ImageView
- 如果是
這么完美的解決問題了？我書讀的少祟峦，你不要騙我罚斗！
理想很豐滿，現(xiàn)實很骨感 宅楞，我該怎么區(qū)分是左右滑動還是上下滑動呢针姿？ 請往下看袱吆！
（2） 手勢識別
-
眾所周知，iOS里的手勢識別可以區(qū)分方向的是：
UISwipeGestureRecognizer距淫，在將手勢添加到視圖時绞绒，可以指定手勢的方向UISwipeGestureRecognizerDirection：UISwipeGestureRecognizerDirectionRightUISwipeGestureRecognizerDirectionLeftUISwipeGestureRecognizerDirectionUpUISwipeGestureRecognizerDirectionDown
可是這個手勢，只會識別一次榕暇。就是說它的監(jiān)聽方法只會執(zhí)行一次处铛。由于這里需要根據(jù)手指滑動的長度決定圖片折疊的角度，所以這個手勢并不適用拐揭！
-
于是只能使用
UIPanGestureRecognizer，然后根據(jù)手指滑動的初始點和第二次得到的點奕塑，計算手勢的方向堂污。如下圖：
綠色的點代表手勢開始時的點 (第一次進入監(jiān)聽方法時獲得的位置點)，紅色的點代表第二次得到的點 (第二次進入監(jiān)聽方法時獲得的位置點)龄砰，算法如下：
//判斷手勢方向
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
}
}
}
總結(jié)
到此為止盟猖，我改寫的主要內(nèi)容就是這些。對了還有一些代碼上的重構(gòu)换棚，不過我覺得重構(gòu)的挺丑的式镐，代碼看著也不舒服。希望看了我的代碼的同學跟我說說你們覺得應該怎么重構(gòu)才能看的清爽固蚤。
建議大家先看 Kitten Yang 的 【POP動畫引擎教程 01】實現(xiàn)圖片折疊效果娘汞， 然后再回來看我這篇。當然啦夕玩，我這里寫的只是我寫代碼的思路你弦，具體的代碼請到 這里 自取。
