iOS 彩色TabBar切換動畫實現

無意間看到乙個彩色tabbar切換的設計圖，感覺很不錯，有空就把他實現了。

環境資訊

mac os x 10.10.4

xcode 6.4

ios 8.4

效果圖：

效果圖

正文

看到這個彩色切換效果的時候，我第乙個反應就是在tabbar上有乙個彩色的view，然後每個色塊的顯示都是通過mask來顯示的。最終，我的具體實現也是根據這個思路來的。

1. 設計思想

為了減少侵入性（耦合），我採取的是繼承uitabbar來實現，所以要整合的時候，只需要將系統的tabbar換成我寫的tcolorfultabbar就可以了。

2. 檢視層級圖

檢視層級圖

1. 新增彩色檢視colorfulview

tcolorfultabbar.m

- (void)setupcolorview  
}

2. 新增彩色檢視的遮罩colorfulmaskview

之所以這裡的遮罩使用的是uiview而不是cashapelayer或者calayer，原因如下：

在設定遮罩的時候，將colorfulmaskview的layer設定為colorfulview的mask就可以了。

**實現如下：

tcolorfultabbar.m

- (void)setupmasklayer

3. 設定**，獲取當前點選的下標

uitabbar並沒有獲取點選下標的介面，但是uitabbardelegate有，這個協議預設被uitabbarcontroller遵守。為了降低耦合性，採用uitabbar自己獲取下標，所以，需要uitabbar自己實現自己的delegate。

值得注意的是，不能在uitabbar的初始化方法中去設定self.delegate = self，因為即使設定了，也會被uitabbarcontroller覆蓋。最終解決方案是當uitabbar載入到父檢視上是，在修改delegate為self。

- (void)didmovetosuperview

因為每次的移動位置與方向都和上次的下標與這次的下標有關，所以需要使用到屬性來記錄這兩個下標的值。

- (void)tabbar:(uitabbar *)tabbar didselectitem:(uitabbaritem *)item

4. 移動遮罩，顯示不同的色塊

在做動畫的時候，需要考慮到效果的平滑性。整個動畫有兩個動畫組成，乙個是寬度放大的動畫，乙個是縮小到原來大小和位移動畫。整個動畫是easeinout的效果，所以拆開來看，就應該第乙個動畫easein，第二個動畫easeout。

一圖勝千言：

動畫線性圖

- (void)animation 
// 兩個動畫加起來是乙個easeinout的效果，所以第乙個動畫就應該是easein，第二個動畫是easeout
// 先進行放大
[uiview animatewithduration:animation_duration delay:0 options:uiviewanimationoptioncurveeasein animations:^ completion:^(bool finished) completion:null];
}];}

iOS 彩色TabBar切換動畫實現

iOS學習筆記 TabBar

ios的畫面切換的動畫效果

iOS美學之隱藏TabBar

iOS 彩色TabBar切換動畫實現

iOS學習筆記 TabBar

ios的畫面切換的動畫效果

iOS美學之隱藏TabBar

相關推薦