iosiOSView效果

叼叼的翻页动画

2015-06-18  本文已影响2130人  伯恩的遗产

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。

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

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

(2) 手势识别

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

绿色的点代表手势开始时的点 (第一次进入监听方法时获得的位置点),红色的点代表第二次得到的点 (第二次进入监听方法时获得的位置点),算法如下:

    //判断手势方向
   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】实现图片折叠效果, 然后再回来看我这篇。当然啦,我这里写的只是我写代码的思路,具体的代码请到 这里 自取。

上一篇 下一篇

猜你喜欢

热点阅读