In order to make the presentation more delicate in the case making, some small movement effect may be used in the entry. Today, I made 3 small samples using the timeline and trajectory as a reference for you. Tracks have been covered in previous posts, and while the timeline may be a bit unfamiliar, you can think of it as a component that manages tracks. Because sometimes there are many components that have their own trajectories, and they are used to achieve an overall effect, these sub-components are added to a timeline to be managed together.
This dynamic effect is relatively simple, there is only one button object in the timeline, we set it as a square and add a trace.
What we want to achieve in this animation is the effect of four small circles moving to the middle until they overlap, and then returning to their original positions to restart the next playback. We added four ellipse components to the timeline, adding a trace to each ellipse.
The loop rhythm effect uses 9 rectangles and we need them to have a step-change effect. First, we set the origin of each rectangle to 50% so that we only need to change their height in different keyframes. (The figure below shows only 7 rectangles because 2 of them are 0 in height)
In most cases, when we use trajectories, we make changes in coordinates or rotation angles, which requires us to establish a mapping relationship between time and space, and calculate the changes in coordinates or rotation angles within each period of time. There is also the selection of key frames. What we need to do is to find out the important turning points of components in the process of movement, rather than to care about the state of components at every moment, which will increase a lot of work in the design and maintenance.