iOS開發之蝦米音樂頻道選擇切換效果分析與實現

今天博客的內容比較簡單，就是看一下蝦米音樂首頁中頻道選擇的一個動畫效果的實現。以前用mask寫過另一種Tab切換的一種效果，網易雲音樂裏邊的一種Tab切換效果，詳情請移步於"視錯覺：從一個看似簡單的自定義控件提及"。，下面會對效果進行分析，而且根據本身的理解去實現一個相似的頻道選擇切換效果。代碼會在Github上進行分享，Demo實現時依然是使用的Swift語言。

 

1、切換效果分析

下方是「蝦米音樂」中的切換效果，其切換效果在前幾回的切換中是有bug的，切換時會閃一下，應該與其內部實現機制有關吧。本篇博客是實現該切換效果，但實現方式是根據本身的理解來實現的，應該與「蝦米音樂」這個實現方式會有不一樣。

從下方效果能夠直觀的看出，當點擊切換時被選中的Tab會放大，而且上次選中的Tab會縮小到原來未選中的狀態。不難看出在放大時Select Tab的基線是不變的，就是放大的效果是從下往上去走的。具體效果就很少說了，直接看下方的GIF吧。

　　

 

今日頭條也是有相似選中放大Tab的效果，可是與下方的這個放大效果大大不一樣，能夠說 「今日頭條」 內個切換放大的效果實現起來是比較簡單的，由於其放大是基於Select Tab的中心往四周放大，而且放大後會虛掉，基於這個特色，今日頭條的Select放大效果應該是經過Scale來進行放大的。下方是以前實現的相似今日頭條的切換效果，具體請移步於「iOS開發之經常使用資訊類App的分類展現與編輯的完整案例實現(Swift版)」

　　

 

  

2、效果實現

看完上述效果，接下來就是實現過程了，先入爲主下，方是本身實現的相似上述切換效果。下方的切換組件較 「蝦米音樂」 的頻道選擇組件作了一些擴充。

• 能夠定製選中狀態下的顏色和大小

• 能夠定製未選中狀態下的顏色和大小

• 能夠定製切換時間

 下方是該組件的切換和定時方式

　　　

 

咱們能夠把上述的切換效果來慢放看一下具體的切換效果，在切換時，效果可分爲如下幾步：

• 首先點擊 Tab, 選中的Tab高亮，上一個被選中的Tab恢復原色。

•  而後就是作放大縮小動畫了，選中的Tab進行放大，上次選中的Tab縮小。

從下方的效果能夠看出，放大時字體是不會變虛的，確定不是用的仿射變換這種放大方式。

　　

 

 

3、具體實現方式

在實現該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