Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. The Tab Bar contains the Tab Scroller and Tab components.
A tab bar lets people navigate among different areas of an app, like the Alarm, Stopwatch, and Timer tabs in the Clock app. If you need to provide controls that act on elements in the current view, use a toolbar instead. Make sure the tab bar is visible when people navigate to different areas in your app.
To open a tab-you order a drink, usually at the bar, and instead of paying for it then, the bar keeps your credit card. The credit card is held and charged until you are done and ready to complete the transaction–this leads us to the next phrase
It usually consists of icons, text/dotted line decorations, and base cards (of course, some products only use icons or text), but designers focus on these three parts when performing dynamic design.
In the bottom navigation, if the icons are selected in a linear style before and after
The most commonly used is to add a clipping path (a path effect of Ae), you can understand it as Mr. Tony, you can control the growth of lines by adjusting the 100% parameter.
But it's just monochrome trim, which looks drab. We can copy a few more layers on the basis of this animation, and add brand colors respectively, which can make the visual look richer.
You can also change the way, just adjust the position attributes of icons of different colors to get the glitch effect.
If you think these are too exaggerated, it is a better choice to add a clipping path to a single icon, combined with basic attributes such as displacement and rotation.
The general method is to adjust the opacity, which is softer than hard cutting, and does not attract the user's attention too much. But for products with entertainment attributes, it may seem a bit ordinary.
We can consider using a mask to create dynamics. First, draw a few circles around the icon, then use the outline of the icon as a circle mask to control its display range, and finally adjust the zoom of the circle.
In some special times, designers may be eager to draw more icons to create an atmosphere.
For such icons, you only need to refer to their physical state [explain below], and then follow the principle of expanding from bottom to top and from the center to the surroundings to adjust the basic attributes, and then you can create a detailed appearance animation.
(Physical state: the state of the object in the real scene. The trophy in the above picture is usually placed on the ground in real world, so the direction of appearance is from bottom to top. But if your icon is a pennant, then the physical state should be hung on the wall , all appearance directions are from top to bottom)
Of course, if the highlights and shadows are removed, it will be more convenient when making some dynamics. For example: copy a star, set its initial position to the distance of a trophy, record keyframes, and then move the whole by a trophy distance. The ears adjust the path to move and deform, which creates the illusion of 3D rotation.
For icons with complex structures, they can be layered in advance. The lines can still use the clipping path (in the Tab bar, the direction of the starting point of the clipping path of different icons is usually the same to maintain consistency), while the filling only needs to adjust the element scaling and limit its display range with the help of a mask.
Based on this idea, we also let the decorative elements be placed below
Try tinkering with track styles, then animate element opacity and position, can you guess what type of product this is?
Or even more exaggerated, design the trace as a circuit diagram. Among them, the clipping path is added to the lines, and then the dots are moved along the path by means of the Ae path tracking method. Finally, the mask is used to control the overall animation display range. This solution seems to be suitable for technology or game products.
Decorative elements can also be placed above
By adjusting the element path to change its shape, simulate liquid dripping, and then zoom through the mask to make the icon in the selected state appear.
Decorative elements can also be placed in the middle
If your icon design is clever enough, we can draw the trajectory of key strokes in advance, and then we can complete the movement of strokes by trimming this trajectory.
Make the card raised when the icon is selected
To create such an effect in Ae, the first thing that comes to mind may be to adjust the card path, but this method is very troublesome when making elasticity.
We have an easier way, first draw an extra circle, and then merge with the card path. In order to make the edges smooth, Gaussian blur and simple blocking are added as a whole, and the parameters are increased respectively to make the edges smooth.
After completing the rounding process, modify the basic properties of other elements.
The only thing I can remember so far is that Meituan Waimai has seen this effect. But in order to reduce visual interference, it weakens the elastic times.
This effect is inspired by the Dribbble designer (EuroART93). We only need to change the Boolean operation mode of the circle and the base card in the raised case to subtraction, and adjust the basic attributes of other elements as well.
This solution has not been seen in other products so far, and the reason is that the effect is too eye-catching.
After seeing so much, it is actually not difficult to find. For the same icon, you only need to change the movement mode of different attributes or elements to bring different feelings.
Each product has its own tonality and target users, and the dynamic effects are also strong and weak. A good dynamic should be able to match with it, rather than draw an absolute answer based on a certain product. This article demonstrates what dynamics are used for different types of icons, but it does not mean that they can only be used in this way. The types of dynamic effects are far more than these, and the above are just the most common combinations of dynamic attributes, so please don't limit your ideas.
.svg)
