Analysis and implementation of selection switching effect of shrimp music channel developed by iOS

Today's blog content is relatively simple, is to look at the Shrimp Music Home channel selection of an animation effect of the implementation. Before using mask to write another kind of tab switching effect, NetEase cloud music inside a tab switch effect, details please move to " visual illusion: From a seemingly simple custom control ." , the results are analyzed and a similar channel selection switch is implemented according to your own understanding. The code is shared on GitHub and is still the swift language used when the demo is implemented.

First, the Switch effect analysis

Below is the "Shrimp music" in the switch effect, its switching effect in the previous switch is a bug, the switch will flash a bit, should be related to its internal implementation mechanism. This blog is to achieve the transition effect, but the implementation is based on their own understanding to achieve, should be with the "Shrimp music" This way of implementation will be different.

From the bottom effect, you can see visually that the tab that is selected when you click the toggle zooms in, and the last tab you selected is zoomed out to the original unchecked state. It is easy to see that the baseline of the Select tab is constant when zoomed in, that is, the effect of magnification is to go up from the bottom. The specific effect is not much to say, look directly underneath the GIF bar.

　　

Today's headline is also a similar to the selection of the Zoom tab effect, but with the magnification below the effect is greatly different, it can be said that the "Today's headlines" the effect of the switching amplification is relatively simple, because its magnification is based on the center of the Select tab to zoom around, and will be empty when zoomed out, based on this feature, The select magnification for today's headlines should be scaled up by scale. Below is an example of a switch effect that was previously implemented like today's headline, please visit thefull case implementation of the category display and editing of common information apps for iOS development (SWIFT)

　　

Second, the effect of realization

After reading the above effect, the next step is to implement the process, under the preconceived, side is to achieve the similar switch effect. The switch component below has been expanded to the channel selection component of "Shrimp music".

• You can customize the color and size in the selected state

• You can customize the colors and sizes in unchecked state

• Changeover time can be customized

Below is the switch and timing mode of the component

　　　

We can put the above switch effect to slow down to see the specific switching effect, when switching, the effect can be divided into the following steps:

• First Click tab, select Tab Highlight, last selected tab restore primary color.

• Then zoom in and out of the animation, the selected tab to zoom in, the last selected tab zoom out.

From the bottom of the effect can be seen, the magnification of the font will not become virtual, certainly not the use of affine transformation of this amplification mode.

　　

Iii. Concrete ways of realization

In implementing the demo, several scenarios have been tried to achieve this effect, and the previous experiment has the following scenario:

• The CollectionViewis used first, then the CollectionView is custom animated and magnified when you click on the CollectionView cell. The cell can achieve the above amplification effect, but the subview inside the cell does not have a magnified animation effect, the setting of the backgroundimage is not. The specific phenomenon is the cell amplification, the inside of the subview will enlarge. The program was pass.

• Then the use of Scroll + UIButton Way, found that the font magnification can not be achieved, although the font may be used to enlarge the scale, after zooming in to replace the normal font, but this effect is not ideal after implementation, the amplification process will be empty. The program was also pass-off.

• The last option chosen is to implement the ScrollView + Custom button method. Use a picture in a custom button to display the title. That is, the title is rendered as a picture first, and then the title is displayed in the form of a picture. Zoom in and out of this titleimage.

Below is the concrete implementation of the view level, you can see the use of ImageView to show the title.

　　

Below is the call method that the component exposes externally, and you can set some general parameters as follows:

　　

The code below is the specific invocation method:

　　

There are other ways to realize the welcome communication , the specific implementation of the way please mobile GitHub:

Github.com/lizelu/fatabswitchview