实现一个有点“诡异”的Banner

先看动画

aim.gif

不知道你的思路是怎么样的；
我拿到这个动效图的时候心中只有mmp一个想法。因为留给我写代码的时间只有一个工作日。
在iOS用之前的banner，只改一个转场动画肯定是不行的了，但是我问了安卓的实现，他们是可以用正常的之前写的banner实现，只改一个插入值就可以修改转场，这个我保持敬畏。
其实这个是我已经实现的效果。

关键的实现技术点

1左右滑动时候的冲击波怎么实现？
2整一个banner一开始的晃动怎么实现？
3正常的banner有的功能，比如无限滑动，左右翻页等等。

阅读最好结合代码

1左右滑动时候的冲击波怎么实现？

一开始的思路是图片下部添加一个透明view，view的cliptobounds设置为Yes，通过改变父视图的大小来改变图片的显示范围，但是这样drawrect绘制的时候会有一个过程，当父视图的的frame很小的时候，那条弧线也是慢慢出现的，从直线变成弧线。而且如果一直频繁改变frame，不断调用drawrect，性能上也是没有后面那种方案好。
方案2：年轻的我没有一开始想到maskview，也是因为被之前用view的cliptobounds来实现投票动画给荼毒了。左边放一个透明并且和图片一样的大小的矩形，矩形的两边加上2个半圆，右边也是。将他们都作为图片的mask，通过移动他们的位置，来实现冲击波展示的效果。

2整一个banner一开始的晃动怎么实现？？

这个其实比较简单。最好的办法其实是确定一个锚点，晃动再用Core Animation的弹性系数动画实现，或者POP的弹性系数动画实现，这样可以模仿出物理效果。
但是UI觉得这个效果不好看。模仿原动效视频，用了CAKeyFrame插几个关键帧，最高点和最低点，然后每一段的运动都分别用淡入淡出（加速减速）。代码中用的UIView动画不断回调（来不及改，被吐槽）。

3正常的banner有的功能，比如无限滑动，左右翻页等等。

其实无限滑动是简单的，因为和正常的实现是一样的。
不一样的是我的总实现就不能是左右imgaeview，下部一个Scrollview了。
是上下一张imageView，也不能加Scrollview（因为不好处理滑动），最后使用了Pan手势来实现。
上一张图片始终保持无交互，下一张图片接受点击事件和Pan手势。
还有当中左右快速滑动以及滑动超过一半翻页都是需要自己计算，没有Scrollview那么容易。

亮点是交换上下的图片的时候，其实并没有交换真实的图片控件，因为这样会造成imgvTop这样的命名居在底部。不够优雅。
所以这里是交换上下图片控件的指针。

show U the code

已经上传github 完整代码下载地址
刚入场时候晃动的代码有点丑，可以改成CAKeyFrame实现。
这可能只是我们项目中一个非常简单的动画点。但在短时间内实现这样一个banner（没有任何前车之鉴可以参考），测试的时候也没有什么Bug，个人还是挺满意的。