前言:通常在一些页面会用到底部弹窗,进行一些数据展示或二次确认。
页面编写思路:
- 编写弹窗View
- 在VC控制器中对于弹窗进行弹起和收起操作
弹窗弹起和收起代码
// MARK: - 平移动画
/// 向上平移
func toUpTranslation(targetView: UIView, y: CGFloat) {
let animation = CABasicAnimation(keyPath: "position")
/// 开始的位置
animation.fromValue = CGPoint(x: targetView.layer.position.x, y: targetView.layer.position.y)
/// 移动到的位置
animation.toValue = CGPoint(x: targetView.layer.position.x, y: y)
/// 动画持续时间
animation.duration = 0.3
/// 动画填充模式
animation.fillMode = .forwards
/// 动画完成不删除
animation.isRemovedOnCompletion = false
/// 添加动画
targetView.layer.add(animation, forKey: "animation")
/// 重新设置坐标
targetView.center = CGPoint(x: targetView.layer.position.x, y: y)
}
/// 向下平移
func toDownTranslation(targetView: UIView, y: CGFloat) {
let animation = CABasicAnimation(keyPath: "position")
/// 开始的位置
animation.fromValue = CGPoint(x: targetView.layer.position.x, y: targetView.layer.position.y)
/// 移动到的位置
animation.toValue = CGPoint(x: targetView.layer.position.x, y: y)
/// 动画持续时间
animation.duration = 0.3
/// 动画填充模式
animation.fillMode = .forwards
/// 动画完成不删除
animation.isRemovedOnCompletion = false
/// 添加动画
targetView.layer.add(animation, forKey: "animation")
/// 重新设置坐标
targetView.center = CGPoint(x: targetView.layer.position.x, y: y)
}
注意:该方法中的y点是指弹窗中心点移动到的y轴位置
代码使用方法:
private var alertView: AlertView!
private func initView() {
alertView = AlertView(frame: CGRect(x: 0, y: Common.screenHeight, width: Common.screenWidth, height: 432.fit()))
alertView.sureButtonAction = {
self.toDownTranslation(targetView: self.alertView, y: Common.screenHeight + self.alertView.height/2)
}
self.view.addSubview(alertView)
}
private func clickToUpAlert() {
self.toUpTranslation(targetView: self.alertView, y: Common.screenHeight - self.alertView.height/2)
}
该方法使用过程中需注意:弹窗初设frame时的y是指弹窗的左上点,弹窗上下移动方法中的y是指弹窗中心点移动到的位置
效果图
整理不易,望大家多多点赞,谢谢大家!