美文网首页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.类微博弹出动画

    实现效果: view弹出时:背景渐变展示,有毛玻璃效果.view内部的button依次从上方弹到指定frame. ...

  • Swift.微博

    1,首页cell用到了存储高度布局 初始一个cell用来做布局高度计算 在自定义cell 中 2,文件读取 存入 ...

  • 仿微博加号弹出动画

    最近项目2.0版本中要添加一个需求,就是仿微博的十字加号新建功能,背景不是毛玻璃,只是一张图片,上面是时间显示。主...

  • iOS-swfit 仿新浪微博、百度贴吧 Tabbar弹出视图

    效果同微博和贴吧Tabbar中间按钮,点击后会动画弹出视图,视图上有各个按钮选项。 动画效果主要运用UIView ...

  • Android动画效果:仿微博弹出icon

    场景 因为公司项目要做一个类似微博发布的弹出动画效果,而且个人也觉得这个效果很炫酷,所以在这里分享一下我的成果(O...

  • Swift.轮转动画+Pop框架

    前言: 项目改自Swift.轮转动画,100行代码搞定,页面布局没有变化,只是改变了动画效果,以及动画实现方式.所...

  • iOS仿微博加号弹出界面动画

    Demo地址:https://github.com/HawkEleven/LLWPlusPopView 可多屏展示

  • swift自定义转场动画

    在新浪微博的首页部分,点击用户名会向下弹出一个表格,如下图: 3⃣️.我们自定义了转场动画,还需要一个负责转场动画...

  • IOS仿微博发送弹出动画的实现

    首先推荐一个非常好的微信公众号,每天都有技术分享,很不错。微信号:iOSDevTip 实现这一动画的技术要点: 1...

  • IOS仿微博发送弹出动画的实现

    首先推荐一个非常好的微信公众号,每天都有技术分享,很不错。微信号:iOSDevTip 实现这一动画的技...

网友评论

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

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