您好,欢迎来到伴沃教育。
搜索
您的当前位置:首页实现一个有点“诡异”的Banner

实现一个有点“诡异”的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

Copyright © 2019- bangwoyixia.com 版权所有 湘ICP备2023022004号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务