模仿 AppStore 頂部動畫

標籤：rac   offset   cell   dem   view   update   例子   type   分享   

App Store 頂部動畫

App Store 中 Games、Apps、Updates 的頂部動畫的特點：

• 自然狀態下是大標題，右邊有一個 button
  
• 頂上去時，變成小標題，右邊按鈕消失
• 導覽列有毛半透明效果的，可以透過底部的內容
• 自然狀態下，點擊清單項目進入下一級，大標題自動變為返回按鈕，並有動畫無縫銜接
  ?

網上提供的方案

網上提供的方案是在導覽列中以 subView 的方式加入一個 button，然後在 scrollview 的 scrollViewDidScroll 方法中，調整 button 的位置和大小。 ?

和 App Store 的效果區別在，

• 導覽列從大標題變為小標題過程中，按鈕仍然是完全可見的。在 App Store 中，導覽列由大標題變為小標題的過程中，按鈕是部分被截斷的。於是自己打算自己寫一個 Demo

嘗試一（失敗）

基本想法是把 Title 和 Button 作為 TableView 的 HeaderView，然後在 scrollViewDidScroll 中，設定 title。

override func scrollViewDidScroll(_ scrollView: UIScrollView) {    if scrollView.contentOffset.y > 64 {        self.navigationItem.title = "Update"    } else {        self.navigationItem.title = nil    }}

?

效果如下：?

可以看到和 App Store 不同點在於，

• 大標題下，點擊跳轉，沒有動畫。因為此時上一個 VC 的 Title 是 nil
• 下拉過程中，標題沒有變大的效果

嘗試二

模仿網上的例子，使用系統的 largeTitleBar，在 navBar 上 addSubView

?

button 的 frame 不變，底部和 view 對齊。在滑動過程中，改變父 view 的大小，這樣子可以有截斷的效果，仍然保留了系統導覽列的下拉變大、控制器導航動畫。效果如下：

?

但是仍有一個地方不好，就是 button 只有隱藏和顯示兩個狀態，沒有 alpha 值的變化。

?

加上 alpha 特效

根據返回手勢的進度，調整 view 的 alpha 值即可。
navigationController 有一個手勢屬性 interactivePopGestureRecognizer。可以響應這個手勢，得到轉場動畫的進度。

    navigationController?.interactivePopGestureRecognizer?.addTarget(self, action: #selector(type(of: self).onGesture(sender:)))@objc func onGesture(sender: UIGestureRecognizer) {    switch sender.state {    case .began, .changed:        if let ct = navigationController?.transitionCoordinator {            topview.alpha =  ct.percentComplete        }    case .cancelled, .ended:        return    case .possible, .failed:        break    }}

效果如下：

?

參考

• 去掉 navigationBar 下面的一條橫線
• How to build resizing Image in Navigation Bar with Large Title
• Add a button to large title navigation bar
• Get progress of UINavigationController swipe back
• demo

模仿 AppStore 頂部動畫