Swift工作笔记

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

有问题欢迎探讨.

上一篇下一篇

猜你喜欢

热点阅读