欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-05-04 09:21:36
50天ios挑战(swift) - 第7天:弹出view后背景变暗效果   简介 很多项目都会有弹出view效果,同时背景会变暗,这个demo就实现一下背景变暗效果 主要知识点: 动画...

50天ios挑战(swift) - 第7天:弹出view后背景变暗效果

 

简介

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

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

过程

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()
            }
        }