美文网首页Swift工作笔记
Swift.类微博弹出动画

Swift.类微博弹出动画

作者: 王四猫 | 来源:发表于2018-08-16 16:34 被阅读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

    有问题欢迎探讨.

    相关文章

      网友评论

        本文标题:Swift.类微博弹出动画

        本文链接:https://www.haomeiwen.com/subject/ntjobftx.html