仿微博 百思不得姐弹出动画

• 最近闲得无事，用Swift写了个仿百思不得姐demo 记录一下不得姐pop 弹出动画效果
• 使用facebook出品的 pop 这个第三方动画库 (https://github.com/facebook/pop)
• 下面介绍一下pop 的集成和使用
  1.集成方式我是用pods 集成的 直接 pod 'pop'
  2.pop的弹簧效果使用
• 暂时只写了从上往下弹出 和 从下往上弹出的效果

/// 弹出
enum XHPopStyle {
    case XHPopFromTop  // 从下往下弹出
    case XHPopFromBottom // 从下往上弹出
}
/// 回收
enum XHDissMissStyle {
    case XHDissMissToTop  // 往上移除
    case XHDissMissToBottom // 往下移除
}

然后写个自定义Button 可以根据自己的需求来改

class CompostButton: UIView {
    var imagev : UIImageView!
    var title : UILabel!
    class func initTypeButton(imageName:String,title:String) -> CompostButton {
        let button = CompostButton.init(frame: .zero)
        button.imagev.image = UIImage.init(named: imageName)
        button.title.text = title
        return button
    }
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        imagev = UIImageView.init()
        title  = UILabel.init()
        title.font = UIFont.systemFont(ofSize: 15)
        title.textColor = UIColor.white
        title.textAlignment = .center
        
        self.addSubview(imagev)
        self.addSubview(title)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        imagev.frame = CGRect(x: self.frame.size.width / 2 - 35, y: 0, width: 70, height: 70)
        title.frame = CGRect(x: 0, y: imagev.frame.maxY + 5, width: self.frame.size.width, height: 20)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError()
    }
}

把自定义button 遍历创建好 初始化位置根据从上往下弹 还是从下往上弹设置在view的顶部 或底部

/// 添加button
    func initButtons() {
        
        let buttonSize = CGSize.init(width: 100, height: 100)
        let margin = (ScreenWidth - 3 * buttonSize.width)/4
        
        for i in 0..<buttonsInfo.count {
            
            let dict = buttonsInfo[I]
            guard let imageName = dict["imageName"],
                let title = dict["title"] else {
                    continue
            }
            
            let button = CompostButton.initTypeButton(imageName:imageName,title:title)
            self.addSubview(button)
            
            let col = i % 3
            let row = i / 3
            
            let margin2 = col>0 ? margin : 0
            
            let x = margin + (buttonSize.width + margin2) * CGFloat(col)
            var y: CGFloat = 0
            /// + 70 是labTitle的高度30 + 距离button间隔 40
            if popstyle == .XHPopFromBottom {
                y = row > 0 ? (ScreenHeight + 70 + (buttonSize.height + 20) * CGFloat(row)) : ScreenHeight + 70
            }else{
                y = row > 0 ? ( -100 - (buttonSize.height + 20) * CGFloat(row)) : -100
            }
            button.frame = CGRect(x: x, y: y, width: buttonSize.width, height: buttonSize.height)
        }
    }

接下来就要用到pop了
创建POPSpringAnimation类型动画
弹力系数参数:springBounciness 取值范围 0~20，数值越大，弹性越大，默认数值为4
弹力速度:springSpeed 取值范围 0~20，数值越大，弹性越大，默认数值为4
开启动画时间参数:beginTime
设置起点值fromValue和终点值 toValue
设置好参数后add到对应的UI上 添加方法 btn.pop_add(anim, forKey: nil)

因为我是按顺序遍历 所以启动动画时间都根据遍历下标来设置延迟的
贴上代码

/// 正向遍历
        for (i , btn) in self.subviews.enumerated() {
            
            if btn.isKind(of: CompostButton.self) || btn.isKind(of: UILabel.self) {
                // 创建动画 根据Y轴
                let anim: POPSpringAnimation = POPSpringAnimation.init(propertyNamed: kPOPLayerPositionY)
                // 弹力系数，取值范围 0~20，数值越大，弹性越大，默认数值为4
                anim.springBounciness = kSpringFactor
                // 弹力速度，取值范围 0~20，数值越大，速度越快，默认数值为12
                anim.springSpeed = kSpringFactor
                
                // 设置动画启动时间
                anim.beginTime = CACurrentMediaTime() + CFTimeInterval.init(i) * kAnimationDelay
                
                btn.pop_add(anim, forKey: nil)
                anim.fromValue = btn.center.y
                if popstyle == .XHPopFromBottom {
                    anim.toValue = btn.center.y - ScreenHeight / 2 - 290 / 2
                }else{
                    anim.toValue = btn.center.y + ScreenHeight / 2 + 290 / 2
                }
            }
        }

回收动画也是一样的道理反向遍历 这里就不重复了
值得注意的一点是 由于我在View上加了一层毛玻璃 因此在遍历回收时下标i == 1时 就得从父类上移除添加的View了

if  i == 1 { // 因为添加了visual毛玻璃 所以self.subviews.count 多了1
 anim.completionBlock = { [weak self] _, _ in
 /// 动画执行完毕 当前view设为可点击
 kRootView?.isUserInteractionEnabled = true             
  self?.removeFromSuperview()           
   }          
}

效果图:

popanimation2.gif
觉得不错的话给个星也是极好的
Demo地址