效果图:
类似这样的弹窗,在APP中很常见,接下来说一下
实现思路:
1.点击弹出按钮时,阴影alpha由0到1,弹窗的scale由0到1(这里使用CABasicAnimation)
2.弹窗弹出后,动画完成。由动画的代理来移除动画。
3.点击空白处,再让阴影alpha由1到0,弹窗的scale由1到0(同样使用CABasicAnimation),动画完成后移除阴影和弹窗
上代码:
(1)
没什么好说的,懒加载准备上imageView,黑色阴影。这里黑色阴影用UIControll是为了更方便的添加点击事件
(2)
这里是将阴影加在屏幕上,并用UIView的基本动画对阴影进行处理
(3)
这里是弹窗弹出与收起对应的事件。使用的是核心动画CABasicAnimation。值得一提的是红色边框标注的地方,
anchorPoint是layer层坐标定义的一个概念,这里可以简单的理解为图片缩放方向的比例。如(x: 0, y: 0)就是从左上角缩放,如果 (x: 1, y: 1)就是从右下角。这个点决定了你的定点缩放是否准确
根据需求需要的方向,我们设定为为(x:0.9, y:0)。因为anchorPoint的改变,对frame有影响,接着更新一次self.frame
(4)
在动画的结束代理里,移除掉动画
(5)
那么最后一步就是在控制器里调用来测试了。popBtn和popAction是从storyboard里拉出来的弹出按钮,以及对应的点击事件。
我们应该根据实际的需求和切图,来调整popover的frame。