Swift.类微博弹出动画
2018-08-16 本文已影响56人
王四猫
效果图
实现效果:
view弹出时:背景渐变展示,有毛玻璃效果.view内部的button依次从上方弹到指定frame.
view消失时:背景渐变消失,view内部button依次向上方弹出.
总结实现方式:
1.弹出一个view,首先增加他的渐变效果.
2.添加毛玻璃效果.
3.添加按钮的弹出效果.
4.添加按钮回调.
5.添加type,功能优化.
1.添加view进入退出的渐变效果.
给UIView添加一个类拓展,添加进入页面和退出页面的渐变方法
extension UIView {
///进入页面渐变效果
func fadeInWithTime(time:TimeInterval){
self.alpha = 0
UIView.animate(withDuration: time, animations: {
self.alpha = 1
}) { (finished) in
}
}
///退出页面渐变效果
func fadeOutWithTime(time:TimeInterval){
self.alpha = 1
UIView.animate(withDuration: time, animations: {
self.alpha = 0
}) { (finished) in
self.removeFromSuperview()
}
}
}
2.添加毛玻璃效果
func drawMyView() {
//首先创建一个模糊效果
let blurEffect = UIBlurEffect(style: .light)
//接着创建一个承载模糊效果的视图
let blurView = UIVisualEffectView(effect: blurEffect)
//设置模糊视图的大小(全屏)
blurView.frame.size = CGSize(width: self.frame.width, height: self.frame.height)
//添加模糊视图到页面view上(模糊视图下方都会有模糊效果)
self.addSubview(blurView)
}
3.添加按钮的弹出效果
将按钮加入contentArr. 在view显示和退出时调用这两个方法
//popview展示动画
func moveInAnimation(){
for (index,value) in (contentArr.enumerated()){
let btn:UIButton = value
let x = btn.frame.origin.x
let y = btn.frame.origin.y
let width = btn.frame.size.width
let height = btn.frame.size.height
btn.frame = CGRect(x: x, y: 10, width: width, height: height)
btn.alpha = 0.0
DispatchAfter(after: (Double(index) * 0.05)) {
UIView.animate(withDuration: 0.25, delay: 0, usingSpringWithDamping: 0.75, initialSpringVelocity: 25, options: .curveEaseIn, animations: {
btn.alpha = 1
btn.frame = CGRect(x: x, y: y, width: width, height: height)
}, completion: { (finished) in
if (btn.isEqual(self.contentArr.last)){
self.superview?.superview?.isUserInteractionEnabled = true
}
})
}
}
}
//popview退出动画
func moveOutAnimation(){
for (index,value) in (contentArr.enumerated()){
let btn:UIButton = value
let x = btn.frame.origin.x
let y = btn.frame.origin.y
let width = btn.frame.size.width
let height = btn.frame.size.height
btn.frame = CGRect(x: x, y: y, width: width, height: height)
btn.alpha = 1
DispatchAfter(after: (Double(index) * 0.05)) {
UIView.animate(withDuration: 0.25, delay: 0, usingSpringWithDamping: 0.75, initialSpringVelocity: 25, options: .curveEaseIn, animations: {
btn.alpha = 0
btn.frame = CGRect(x: x, y: 10, width: width, height: height)
}, completion: { (finished) in
if (btn.isEqual(self.contentArr.last)){
self.superview?.superview?.isUserInteractionEnabled = true
}
})
}
}
}
4.添加按钮回调
var backBlockLeft : (()->())?//左侧按钮点击事件
var backBlockRight : (()->())?//右侧按钮点击事件
//点击左右button事件
@objc func onClickButton(_ button:UIButton){
if button.tag == 0 {
if backBlockLeft != nil{
backBlockLeft!()
}
}else {
if backBlockRight != nil{
backBlockRight!()
}
}
}
5.添加type,功能优化.
添加type,实现popview的复用.
//popView两种Type,通过修改type来实现不同样式
enum popViewType{
case left//概况
case right//发布
}
private var type:popViewType = .left {
didSet {
switch type {
case .left:
leftButtonTitle = "历史"
leftButtonImage = "lishi"
rightButtonTitle = "今天"
rightButtonImage = "jintian"
case .right:
leftButtonTitle = "政策"
leftButtonImage = "zuixinzhengce"
rightButtonTitle = "快报"
rightButtonImage = "jdkb"
}
}
}
init(frame: CGRect,type:popViewType) {
super.init(frame: frame)
//在init方法中直接赋值不能调用didSet方法,使用kvo方式赋值
self.setValue(type, forKey: "type")
drawMyView()
addTap()
addBtn()
}
//重写kvo方法才能完成赋值,不然报错
override func setValue(_ value: Any?, forUndefinedKey key: String) {
guard let type = value as? popViewType else {
return
}
self.type = type
}
demo地址:https://github.com/WangLiquan/popView.求star
有问题欢迎探讨.