GIF images in this paper are larger, so the traffic is cautious. In this paper, the internal dynamic effect is realized by handwriting, and most of its creativity comes from the dynamic effect area of gold digging. It works on my personal mobile terminal blog, no open source plan, only for students who love to toss ideas

Technology stack

  1. Vue3
  2. TypeScript
  3. Less

Dynamic effect reference link

Very practical! 7 Great UI Interactive Animation Tips (juejin. Cn)

Home page switch

The transition component is animated, but it does not change the page until the final rotation is complete. This is done simultaneously.

Article Details jump

Add an animation to the external container and the internal routing node, and then check the incoming and outgoing calls

Anime switch

This is a seamless rotation, and then with a sliding transition, not what to say

Animation details jump

Train of thought: this also is not over all, over all have no train of thought…. As for the difficulty, the familiar idea of the Touch event is there, that is, a seamless rotation and full screen sliding, and a little bit of handling of sliding conflicts. This interaction comes from the Meizu system theme store as follows:

You can see the unfinished content: scroll to the bottom screen and still continue down, the upper wheel of the extrusion dynamic effect

Music rolling lyrics

Ideas: This dynamic effect is derived from the dynamic effect of qq music lyrics (low version EMMM), the difficulty lies in 1. The lyrics are activated at the top when playing normally, and the lyrics are activated at the middle 2 position when dragging and selecting. 3

User miscellaneous

Ideas: common seamless page switch, this idea is more. In the figure above, the position of entering the key area is recorded before the jump, which is passed into Params during the jump route, and then obtained from the sub-route and executed the transition animation. However, I feel that this idea is not ideal

conclusion

It can be seen that the mobile terminal is really touch events fly everywhere, and these are still only common interaction, to look at those conceptual motion effects abroad, there is no idea directly. But U1S1, it’s fun to write this kind of fancy stuff