弹框按钮视图
前言
这段时间又在忙项目的事,对Coding-iOS源码的学习只能先暂搁一旁。今天抽空来看看一个Coding-iOS中一个有趣的实现。这个和微博里面发送微博时的动效类似。效果如下👇
前言二
源码在这里
我自己也简单的实现了一遍,看看效果👇
我也把源码上传到github了
分析一波
这个PopMenu主要由2部分构成:模糊背景和按钮
- 模糊背景
模糊背景直接就是白色半透明的View,它是PopMenu这个View的最底层的子View。这个模糊背景View的透明度从0->0.5渐变,当这个动画完成之后,开始显示按钮的动画。 - 按钮
说是按钮,其实也是一个自定义的View,它由一个图片(UIImageView)和一个标题(UILabel)构成。这些按钮也是PopMenu这个View的子View。 - PopMenu View
这个View是主视图,它包括最底层的模糊背景视图和多个按钮视图。在这个视图内部定义了几个重要的方法
- 定义每一个按钮视图的其实位置和最终位置
- 未每个按钮视图添加动画
按钮位置
先来看看按钮视图的最终位置👇
给每个视图定大小很简单:先定死高度为110,再根据每行放置几个按钮定义按钮的宽度(例如本文每行3个按钮,那就屏幕宽度除以3);最后定义按钮在PopMenu视图中的位置,也就是它的左上角相对于主视图的坐标,这个稍加计算就可得出。
而每个按钮其实开始的位置是在屏幕上方的,那么每个按钮的起始位置也就是最终位置向上平移一个相同的量,直至移出屏幕上方为止。
下落动画
仔细瞧瞧,每个按钮的下落动画是一样的,只是开始时间不同而已。所以这些按钮动画的设置只需用开始时间进行区分即可。这里的动画使用了POPAnimation,它是Facebook的一个著名的开源库。
来看看动画的源代码👇
1 | - (void)startAnimationFromPosition:(CGRect)from toPosition:(CGRect)to atView:(UIView *)view beginTime:(CFTimeInterval)beginTime { |
POPAnimation的使用很简单,首先定义动画要做什么,什么时候开始执行,动画的起始和结束位置等等。。。动画定义完成之后,将该动画附加到一个视图上面,这里就是将弹簧动画赋予按钮视图;然后每个按钮视图的动画的执行时间都是按一定间隔隔开的。这样就完成了上图所展示的效果。
参考
All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.