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

來源:互聯網
上載者:User

今天部落格的內容比較簡單,就是看一下蝦米音樂首頁中頻道選擇的一個動畫效果的實現。之前用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:

github.com/lizelu/FATabSwitchView

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: