今天部落格的内容比較簡單，就是看一下蝦米音樂首頁中頻道選擇的一個動畫效果的實作。之前用mask寫過另外一種Tab切換的一種效果，網易雲音樂裡邊的一種Tab切換效果，詳情請移步于"視錯覺：從一個看似簡單的自定義控件說起"。，下面會對效果進行分析，并且根據自己的了解去實作一個類似的頻道選擇切換效果。代碼會在Github上進行分享，Demo實作時依然是使用的Swift語言。
一、切換效果分析
下方是“蝦米音樂”中的切換效果，其切換效果在前幾次的切換中是有bug的，切換時會閃一下，應該與其内部實作機制有關吧。本篇部落格是實作該切換效果，但實作方式是根據自己的了解來實作的，應該與“蝦米音樂”這個實作方式會有不同。
從下方效果可以直覺的看出，當點選切換時被選中的Tab會放大，并且上次選中的Tab會縮小到原來未選中的狀态。不難看出在放大時Select Tab的基線是不變的，就是放大的效果是從下往上去走的。具體效果就不多說了，直接看下方的GIF吧。
今日頭條也是有類似選中放大Tab的效果，但是與下方的這個放大效果大大不同，可以說 “今日頭條” 内個切換放大的效果實作起來是比較簡單的，因為其放大是基于Select Tab的中心往四周放大，并且放大後會虛掉，基于這個特點，今日頭條的Select放大效果應該是通過Scale來進行放大的。下方是之前實作的類似今日頭條的切換效果，具體請移步于“iOS開發之常用資訊類App的分類展示與編輯的完整案例實作(Swift版)”
二、效果實作
看完上述效果，接下來就是實作過程了，先入為主下，方是自己實作的類似上述切換效果。下方的切換元件較 “蝦米音樂” 的頻道選擇元件做了一些擴充。
可以定制選中狀态下的顔色和大小
可以定制未選中狀态下的顔色和大小
可以定制切換時間
下方是該元件的切換和定時方式
我們可以把上述的切換效果來慢放看一下具體的切換效果，在切換時，效果可分為以下幾步：
首先點選 Tab, 選中的Tab高亮，上一個被選中的Tab恢複原色。
然後就是做放大縮小動畫了，選中的Tab進行放大，上次選中的Tab縮小。
從下方的效果可以看出，放大時字型是不會變虛的，肯定不是用的仿射變換這種放大方式。
三、具體實作方式
在實作該Demo時，嘗試了幾種方案來實作上述效果，之前實驗的方案如下：
先是使用了CollectionView, 然後對CollectionView進行自定義動畫，在點選CollectionView的Cell時做放大效果。Cell可以實作上述放大的效果，但是Cell内部的SubView沒有放大的動畫效果，設定的BackgroundImage也是不行。具體表現出來的現象是Cell放大後，裡邊的SubView才會放大。該方案被Pass。
然後就使用Scroll + UIButton的方式，發現字型的放大實作不了，雖然字型可使用Scale進行放大，放大後在替換成正常的Font， 但是這種效果實作後并不理想，放大過程還是會虛掉。該方案也是被Pass掉了。
最後選擇的方案是ScrollView + 自定義Button的方式來實作。在自定義Button中使用圖檔的方式來顯示Title。也就是先将Title渲染成圖檔，然後以圖檔的方式來展示Title。放大縮小這個TitleImage即可。
下方是具體實作的視圖層級，可以看出使用的是ImageView來展示的Title。
下方是該元件對外暴露的調用方法，可以設定一些正常參數，如下所示：
下方代碼是具體的調用方式：
有其他實作思路歡迎交流，具體實作方式請移動github:
https://github.com/lizelu/FATabSwitchView
作者：青玉伏案
出處：http://www.cnblogs.com/ludashi/
本文版權歸作者和共部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。
如果文中有什麼錯誤，歡迎指出。以免更多的人被誤導。
收履歷：某網際網路公司，招聘iOS/Android靠譜工程師，入職後，可内部聯系樓主，有小禮品贈送，有意者可郵箱投遞履歷：[email protected]