Swift4 写一个小卡片的底部弹出背景变暗的动画

目标效果

底部弹出一个小界面，同时背景变暗。效果图如下——

底部弹出动画.gif

原理分析

弹出的是一个UICollectionView，背景变暗是是一个调整了背景颜色的UIView。
弹出的动画效果实际就是一个view的平移
其实Swift中的动画都被封装到UIView里了，是layer的一部分属性的集合。我们直接调用就可以啦。使用起来非常方便～

开始动手啦

这里只列出核心代码

弹出动画

    @objc func showQuesCollectionView(_ button: UIButton) {
//quesListBkgView是变暗的背景
        quesListBkgView.frame = window.bounds
        quesListBkgView.backgroundColor = UIColor(white: 0.1, alpha: 0.6)
//这里addSubview加到window上也可以
        self.view.addSubview(quesListBkgView)
      
//quesListCollectionView是弹出的卡片的view
        self.view.addSubview(quesListCollectionView)
//先把quesListCollectionView添加到屏幕的下方，用户开始看不到
        quesListCollectionView.frame = CGRect(x: 0, y: deviceHeight + 30, width: deviceWidth, height: 0.45 * deviceHeight)

//同时添加动画，使view向上平移，出现弹出效果
        UIView.animate(withDuration: 0.3) {
//再将quesListCollectionView添加到应该出现的位置。
            self.quesListCollectionView.frame = CGRect(x: 0, y: 0.55 * deviceHeight, width: deviceWidth, height: 0.45 * deviceHeight)
        }

//添加手势识别，点击变暗的区域触发收回动作
        let gesture = UITapGestureRecognizer(target: self, action: #selector(hindQuesList))
        quesListBkgView.addGestureRecognizer(gesture)
    }

收回动画

    @objc func hindQuesList() {
        UIView.animate(withDuration: 0.3) {
// 尾随闭包播放弹出动画
            self.quesListCollectionView.frame = CGRect(x: 0, y: deviceHeight + 30, width: deviceWidth, height: 0.45 * deviceHeight)
            
// 提交一个延时任务线程
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                self.quesListCollectionView.removeFromSuperview()
                self.quesListBkgView.removeFromSuperview()
            }
        }
    }

至此，动画效果就实现啦哈哈哈

希望我的整理能对你有点帮助～