preface

The update took a bit longer, mainly because it took a lot of time to find available API data sources… The final effect is unknown, we’ll see… In addition, due to the completion of the reader module, the development direction turned to the overall APP development, so it took some time to design and build the framework, select appropriate auxiliary tools, and think about what to make.

Of course, the above is not to find an excuse to touch 🐟 every day, you have to believe me ah;

Back to the topic, in APP design, I want to imitate the planet effect of Soul on the home page to make a recommendation page, this time to practice

design

First of all, github does not seem to have any Flutter controls that can be used directly. However, there are a lot of Flutter controls that can be used on Android, so you don’t need to design the Flutter controls yourself.

But in the process of copying, found that this thing seems not so easy to copy ~ ~ copy this thing first thing, is to turn out the mathematics textbooks, preview vectors and space coordinates this part of the thing;

Fortunately, the core principle is not complicated, and can be explained in one sentence:

By working around rodrigues rotation vector formula, by updating vectors, rotation angles, and incorporating them into the formula, you can achieve the desired effect;

Achieve with trample pits

Implementation part:

In terms of implementation: Stack is used as the main body, combined with Transform to deal with displacement, scaling, transparency and other parts; The build method looks like this:

Initialize the AnimationController at initState and call setState to update the UI by setting the listener:

Computational logic is done with that formula:

A few small pit

Although the above is pretty easy, there are still a few hiccups to deal with:

  • Due to the introduction of the concept of the Z-axis, as noted in the first diagram, it is necessary to reorder according to the Z-axis to properly handle click events and so on.

  • There is also a small problem with gesture contention, because the outermost layer is a TabBarView, so it can slide left and right, while the planet itself can be dragged in any direction, causing a horizontal gesture conflict problem:

    There are many ways to solve this problem, but I used to modify the Pan gesture competitor judgment threshold to do the processing, which should be relatively few people:

conclusion

Now look at the effect:

It looks like the debug mode is around 30fps, but obviously it is much better when dragging manually. Maybe 20 images +transform is a bit too much. Maybe the image could be optimized? Then we will look at the performance in profile mode and analyze the performance time.

This time, let’s take a look at the title and see what effect it has. However, we didn’t make a title splinter, we said 300 lines, we didn’t deliberately compress the number of lines, we used the common code template of AS, and we even had a little space at the end: