Swift.类微博弹出动画

效果图

实现效果:

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地址:PopView.求star.

有问题欢迎探讨.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_X自主阅读 15,969评论 3 119
  • 导语: 最近的项目中需要提取视频的音轨,并根据音轨中音频的大小绘制竖条形波纹,对音视频处理几乎空白的我开始了无休止...
    我七岁就很帅阅读 9,104评论 20 46
  • 20170611-20170617 没有反思的人生不值得过! 1、习惯+阅读+学习 1)生活习惯:早6:00晚22...
    马央军阅读 356评论 2 5
  • 前一阵从淼哥那里知道了讯飞听见,就是上传一段音频,选择机器转录,可以很快时间内转录成文字,准确率可达95%。人工转...
    赵弘阅读 180评论 0 2