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

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

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


文章列表://www.greatytc.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。多谢~
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,247评论 4 61
  • 累了一天,洗好了澡,身体上还散发着沐浴露的清香,耳旁边蛙声一片,小区里零零落落的亮着灯,十分安宁的夜晚。 躺上床临...
    亁乾阅读 2,615评论 0 1
  • 无奈画完
    孤尔辜阅读 1,053评论 1 1
  • “叶轻雪,我知道你长得漂亮,学历又高,家世也好,从小被人捧在手心,集万千宠爱于一身;在你眼中,是不是我刘云帆能跟你...
    飄雲阅读 1,248评论 0 1
  • 20170128 感恩生命的富足美好!感恩昨天老公帮我买了菜、擦了凉台、天花板中午煮了面给我们吃![亲亲]感恩昨...
    淘淘的简书阅读 1,599评论 0 0