50天iOS挑战(Swift) - 第7天：弹出View后背景变暗效果

50天iOS挑战(Swift) - 第7天：弹出View后背景变暗效果

50天，每天一个Swift语言的iOS练手项目，覆盖iOS开发的主要知识。贵在坚持，重在思考

---

文章列表：http://www.jianshu.com/nb/13566182
Github项目：https://github.com/Minecodecraft/50DaysOfSwift

---

简介

很多项目都会有弹出view效果，同时背景会变暗，这个demo就实现一下背景变暗效果
主要知识点: 动画闭包、弹出view

GIF

过程

1、 分析
要实现弹出view后背景变暗的效果，只需要在原有view之上添加一个带透明度背景即可，然后再添加弹出框即可满足需求。

2、 界面实现
首先添加上述两个view，bkgView为背景，popupView为弹出窗口

        // 添加带透明度的背景视图，从而实现下方视图变暗
        guard let window = UIApplication.shared.keyWindow else { return }
        bkgView = UIView()
        bkgView.frame = window.bounds
        bkgView.backgroundColor = UIColor(white: 0.1, alpha: 0.6)
        window.addSubview(bkgView)
        
        // 添加弹出控件，添加到window而不是bkgView
        popupView = UIView()
        popupView.frame = CGRect(x: 30, y: kScreenHeight, width: kScreenWidth-60, height: 60)
        popupView.backgroundColor = UIColor.orange
        popupView.layer.cornerRadius = 15
        window.addSubview(popupView)

3、 动画实现
iOS简单动画实现起来很容易，通过UIView提交一个动画即可，采用尾随闭包来写。

        // 添加一个弹出动画
        UIView.animate(withDuration: 0.3) {
            // 尾随闭包播放弹出动画
            self.popupView.frame = CGRect(x: 30, y: (kScreenHeight-60)/2, width: kScreenWidth-60, height: 60)
        }

        // 收回动画
        UIView.animate(withDuration: 0.3) {
            // 尾随闭包播放弹出动画
            self.popupView.frame = CGRect(x: 30, y: kScreenHeight, width: kScreenWidth-60, height: 60)
            
            // 提交一个延时任务线程
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                self.popupView.removeFromSuperview()
                self.bkgView.removeFromSuperview()
            }
        }

一点小小的补充

1. 项目源码地址 GitHub，欢迎大家前来支持，希望可以随手留个Star。多谢~