叼叼的翻页动画

Before Everything

关注过 Kitten Yang 的同学可能知道,他写过一篇博客也是讲翻页动画的。我现在读大二,比 Kitten Yang 低一届,学iOS有一年了,一直感觉没进步。所以我就想找一些东西练练,看到 Kitten Yang 的博客后,顿时觉得激情澎湃。因为那炫酷的交互动画,也因为牛逼的学长!

后续,我将不定期的重写 Kitten Yang 的代码,加入自己的理解和改动。也许没有他的动画炫酷,但是我想加入自己的思想,让自己得意进步。所以,如果有错误的地方,还请大家帮我指出来,谢谢!总之, 学习感兴趣的东西是一件愉快的事情!

效果图

下面是效果图,左边是 Kitten Yang 的原作,右边是我改动之后的效果,加入了左右滑动,但是由于 POPkPopLayerRotationY 存在 Bug ,导致翻转超过 M_PI_2 就会出错!所以左右方向我设置的最大角度是 M_PI_2 。还有一点就是,由于我的代码可能过于复杂,我就没加入阴影效果。

源代码:GitHub

Kitten Yang

我的

实现思路

(1) 分离

根据 Kitten Yang 的分析,要将一张图片从中间折叠并显示不同的阴影是非常麻烦的,但是 他有特别的动画技巧,他将一张图片分为上下两个 ImageView 这样就可以分别操作,已达到折叠的效果。由于两个 ImageView 在添加的时候连在一起,所以大家看上去是一个完整的图片,看不出是两个View。

那么,问题来了!如果要实现上下左右都可以折叠呢?

  • 这还不简单!分成 4 份不就可以了!

    一开始,我也是这么想的,但是 Too Young, Too Simple!

    如下图所示:由于设置了 ImageViewTransition3D 使得图片在折叠的时候显得更逼真,就像下面图片的上部分。但是如果两张连在一起的 View 同时折叠的话,就是下下部分这个吊样子了! 中间红色部分会重合!

  • 于是我决定 动态裁剪 !一开始,设置图片的时候不裁剪,使用一个和父视图一样大的 ImageView 用于占位,然后根据手指滑动的方向决定怎么裁剪,裁剪后,删除占位视图!

    • 如果是 左右 滑动,就 竖直 的裁剪!形成左右两个 ImageView
    • 如果是 上下 滑动,就 水平 的裁剪!形成上下两个 ImageView

这么完美的解决问题了?我书读的少,你不要骗我!
理想很丰满,现实很骨感 ,我该怎么区分是左右滑动还是上下滑动呢? 请往下看!

(2) 手势识别

  • 众所周知,iOS里的手势识别可以区分方向的是: UISwipeGestureRecognizer,在将手势添加到视图时,可以指定手势的方向 UISwipeGestureRecognizerDirection

    • UISwipeGestureRecognizerDirectionRight
    • UISwipeGestureRecognizerDirectionLeft
    • UISwipeGestureRecognizerDirectionUp
    • UISwipeGestureRecognizerDirectionDown

可是这个手势,只会识别一次。就是说它的监听方法只会执行一次。由于这里需要根据手指滑动的长度决定图片折叠的角度,所以这个手势并不适用!

  • 于是只能使用 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】实现图片折叠效果, 然后再回来看我这篇。当然啦,我这里写的只是我写代码的思路,具体的代码请到 这里 自取。

推荐阅读更多精彩内容

  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 41,652评论 22 647
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 7,334评论 4 39
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 158,753评论 24 689
  • 去年看了一部动画片《记忆中的玛妮》。结局深深地打动了我,因为最后一幕,告诉我,爱,从未离开。 "我一直也觉得自己不...
    BelovedNutan阅读 194评论 0 0
  • 假想观众:心里幻想出有无数双眼睛看着自己的一举一动。用游戏玩,第一天穿白色的,第二天穿黑色的。看你在意的人有没有发现他?
    来一碗周阅读 78评论 0 0