漸層的導航控制器實現，漸層導航控制器

漸層的導航控制器實現，漸層導航控制器
1. 想法

      最近下了很多國外的APP,感覺國外的APP動畫真的很炫,國內的APP有好多都是仿的國外的.尤其喜歡國外的paper和Instagram,感覺facebook真的能給人驚喜.感覺要提高自己,facebook開源的架構是一定要好好研究的,不僅僅是實現,更多的是想法.

      正好最近公司的APP說要把頂部導覽列換成花田的導覽列.我看了花田的導覽列,很容易實現,就是一個變化,感覺是突變,不是很喜歡這種效果,自己就想加個漸層的效果,然後就在想應該怎麼實現,試了好幾種,最後成功了.感覺動畫還是要思考的,思路最重要,有了思路,就很好實現了.

 

2. 效果

    先來看看效果:

   

3. 思路

要實現的功能就是未選中時是灰色的,選中後顏色變成黃色且變大. 過程要是漸層的,不能是突變的.

思路就是分成兩層:

底層是灰色的label樣式

上層是黃色放大字型的label樣式,用個view添加,這個view只有一個label的大小. clipsToBounds設為YES.   那麼只有選中的時候只有第二個樣式的label顯示出來.

動畫的實現主要就是view的正向移動,同時上層label逆向移動,給人的感覺上層label也沒有移動,這樣就完成了上面的效果

如果有更好的實現方式,歡迎交流

github地址:https://github.com/stevenxiaoyang/NavMove