聲明：本文是博主原創，轉載請聲明出處：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
})
})
})
總結
其實這個東西也并不復雜，主要細心觀察并思考就能實現。最后希望大家喜歡，謝謝！
