目标效果
底部弹出一个小界面，同时背景变暗。效果图如下——
底部弹出动画.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()
}
}
}
至此，动画效果就实现啦哈哈哈
希望我的整理能对你有点帮助～
