声明：本文是博主原创，转载请声明出处：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
})
})
})
总结
其实这个东西也并不复杂，主要细心观察并思考就能实现。最后希望大家喜欢，谢谢！
