声明：本文是博主原创，转载请声明出处：http://hanwp.github.io/2016/11/25/高仿今日头条分享界面的弹出动画/

DemoGif.gif

写在前面

今日头条可以说是我们手机中一款不可缺少的APP，在我看到喜欢的文章想分享给朋友时，就被弹出的分享界面动画所吸引了，于是我就尝试模仿一下，方便学习交流，写的不好的，请指正。全部代码见Github，喜欢的还请给个star😁

整体分析

分享界面由一个背景视图，和一个主要视图组成，主要视图两行都可以滑动，于是我用了两个UIScrollView实现。

主界面@2x.png

自定义按钮

可以看出分享上面的点击按钮是图片在上方，文字在下方，于是我就子类化UIButton重新布局：

override func layoutSubviews() {
        super.layoutSubviews()
        
        if imageView?.image != nil {
            imageView!.frame = CGRect.init(
                x: (self.bounds.size.width - self.imageView!.image!.size.width) / 2.0,
                y: 0,
                width: imageView!.image!.size.width,
                height: imageView!.image!.size.height)
        }
        
        if titleLabel != nil {
            let titleLabelSize = getTitleLabelSize()
            titleLabel!.frame = CGRect.init(
                x: (self.bounds.size.width - titleLabelSize.width) / 2.0,
                y: imageView!.frame.maxY + 7.0,
                width: titleLabelSize.width,
                height: titleLabelSize.height)
        }
    }

完成整体UI

将btn加到scrollview上面。

@IBOutlet weak var topScrollView: UIScrollView!
@IBOutlet weak var bottomScrollView: UIScrollView!

let imgArrary = ["alishq_allshare_60x60_", "weixin_allshare_60x60_", "qq_allshare_60x60_", "qqkj_allshare_60x60_", "sina_allshare_60x60_", "qqwb_allshare_60x60_", "aliplay_allshare_60x60_", "alishq_allshare_60x60_"]
        let titleArray = ["微信朋友圈", "微信好友", "手机QQ", "QQ空间", "新浪微博", "腾讯微博", "支付宝好友", "支付宝生活圈"]
        setScrollViewContent(withScrollView: topScrollView, imgArray: imgArrary, titleArray: titleArray)
        
        
        let imgArrary2 = ["airdrop_allshare_60x60_", "link_allshare_60x60_", "mail_allshare_60x60_", "copy_allshare_60x60_"]
        let titleArray2 = ["系统分享", "信息", "邮件", "复制链接"]
        setScrollViewContent(withScrollView: bottomScrollView, imgArray: imgArrary2, titleArray: titleArray2)

fileprivate func setScrollViewContent(withScrollView scrollView: UIScrollView, imgArray: [String], titleArray: [String]) {
        
        let btnW: CGFloat = 76
        let btnH: CGFloat = 90
        let btnY: CGFloat = scrollView == topScrollView ? 23 : 15
        let margin: CGFloat = 18
        var btnX: CGFloat = 0
        
        for (index, value) in imgArray.enumerated() {
            
            btnX = btnW * CGFloat(index) + margin
            
            let btn = HWShareButton(type: .custom)
            btn.frame = CGRect.init(x: btnX, y: btnY, width: btnW, height: btnH)
            btn.setImage(UIImage.init(named: value), for: .normal)
            btn.setTitle(titleArray[index], for: .normal)
            scrollView.addSubview(btn)
            
            if index == imgArray.count - 1 {
                scrollView.contentSize = CGSize.init(width: btn.frame.maxX + margin, height: btnH)
            }
        }
        
        
    }

效果图.png

加上动画

给每个按钮都依次加上动画：

extension HWShareButton {
    
    func shakeBtn(delay: TimeInterval) {
        let top1 = CGAffineTransform.init(translationX: 0, y: 150)
        let reset = CGAffineTransform.identity
        //0 初始状态 下
        self.transform = top1
        self.alpha = 0.3

        /// 系统自带的弹簧效果
        /// usingSpringWithDamping 0~1 数值越小「弹簧」的振动效果越明显
        /// initialSpringVelocity 初始的速度，数值越大一开始移动越快
        UIView.animate(withDuration: 0.8, delay: delay, usingSpringWithDamping: 0.7, initialSpringVelocity: 10, options:.curveEaseOut , animations: {
            self.transform = reset
            self.alpha = 1
        }, completion: nil)
    }
}

这里我之前用的是动画嵌套的方法😁，后来发现了系统原来自带的有弹簧效果。把我之前的写法也贴上来吧。详见源代码

UIView.animate(withDuration: 0.2, delay: delay, options: .curveEaseOut, animations: {
            
            self.transform = top2
            self.alpha = 1
            
        }, completion: { _ in
            
            //2 下
            
            UIView.animate(withDuration: 0.2, delay: 0, options: .curveEaseIn, animations: {
                
                self.transform = bottom1
                
            }, completion: { (_) in
                
                //3 还原
                UIView.animate(withDuration: 0.15, delay: 0, options: .curveEaseIn, animations: {
                    
                    self.transform = reset
                    
                }, completion: { (_) in
                    
                })  
            })
        })

总结

其实这个东西也并不复杂，主要细心观察并思考就能实现。最后希望大家喜欢，谢谢！