Gradient navigation controller implementation, gradient navigation Controller

Gradient navigation controller implementation, gradient navigation Controller
1. Ideas

I recently launched many foreign apps, and I feel that the foreign APP animation is really amazing. Many domestic apps are imitation foreign apps. I especially like paper and Instagram abroad. I feel that facebook is really a surprise. I feel that to improve myself, facebook's open-source framework must be well studied, not only implementation, but also ideas.

Recently, the company's APP said it would change the top navigation bar to the navigation bar of Huada. I have read the navigation bar of Huada and it is easy to implement. It is a change. I feel like a mutation. I don't like this effect very much. I just want to add a gradient effect, then I thought about how to implement it. I tried several methods and finally succeeded. I feel that animation still needs to be considered. The idea is the most important. With the idea, we can achieve it well.

 

2. Results

Let's take a look at the effect:

3. Ideas

The function to be implemented is that the color is gray when not selected, and the color turns yellow and becomes larger after selection. if the process is gradual, it cannot be sudden changes.

The idea is to divide it into two layers:

The bottom layer is a gray label style.

The upper layer is the label style in the yellow font to enlarge the font. Add a view. This view has only one label size. set clipsToBounds to YES. only the label of the second style is displayed.

The animation is mainly implemented by moving the view forward and the label on the upper layer reversely. It gives people the feeling that the label on the upper layer is not moved, so the above effect is achieved.

If you have a better implementation method, please contact us.

Github address: https://github.com/stevenxiaoyang/NavMove