Detailed explanation of demo example of Android imitation wechat memory cleaning chart animation (solving the problem of surface view screen flicker)

Recently, I received a project, in which there is a function to clean up memory, which requires the same effect as wechat. So I thought of using surfaceview instead of inheriting view. The following small series will analyze the implementation ideas for you.

Surfaceview uses a double buffer mechanism to solve the flicker caused by frequent drawing animation, that is, a and B buffers are displayed on the canvas in turn. At the same time, if they are not used properly, flicker is also easy to occur, because one buffer in a and B has not changed.

I encountered this problem when I wrote this view. I studied it for a long time and finally solved it.

First, let's talk about the idea:

The animation of wechat cleaning cache is:

A ring rotates constantly, and there is a text display in the middle -- > after loading, a slowly expanding icon appears, and the first area should be highlighted.

This is the animation effect of wechat. But what is the specific implementation?

Here is my implementation method:

1. Rotate the ring:

The ring consists of two parts, a circle and a dark gray arc, and the arc has been rotating, resulting in the effect of the ring rotating.

Therefore, this is a good solution. We draw two figures, a circle and an arc, and the constant change of the angle of the arc produces the effect of rotation. In order to make it constantly change, we need to use an animation class valueanimator, which constantly gives an angle, and then we can complete this effect by constantly drawing.

2. Text:

The text is part of the circle. Of course, they should be drawn at the same time. However, in order to avoid text overlap, we need to clear the canvas every time we draw.

We simulate the percentage by calculating the total rotation animation time and a time difference from the beginning of animation to the specific current painting.

3. Expanded chart:

This is the difficult part of this effect, and there are many problems here.

This is a slowly unfolding animation. It seems that a circle is slowly emerging, but it is not. It's just a fan that keeps rotating, but it doesn't clear the previous canvas, which produces a tiling effect. The sector of the first area is larger, but the radius is larger. Therefore, we can also draw this part by using valueanimator.

By monitoring the first rotation animation, when the first effect ends, the animation of the second chart begins.

4. Specific memory size information:

This is relatively simple. You only need to determine the coordinates, but you also encounter flickering when writing.

The following is the specific implementation

Original version:

effect:

The effect of imitating wechat is basically displayed, but when the area changes, it will keep flashing. In fact, the small square marked with information below is also flashing, but I have modified it.

After checking many methods on the Internet, I didn't give a very direct answer. Most of them said that the cache before and after the surfaceview should be drawn, so that there is no flicker problem. Another method is to make the background of a buffer in this area the same as that of B buffer through background coverage, so that the flicker problem caused by cache alternation will not be seen when switching naturally.

I don't quite understand the first one. I say that you should change the two buffers before and after each time, not just one...... (it's said on the Internet, but how can I change it!!?)

The second method is implemented after many attempts. After switching the brush, each drawing will be covered with a layer, so as to maintain the cache consistency of the previous flashing part.

This section is some information found:

Double buffer and black screen flashing

Each surfaceview object has two independent graphic buffers. The official SDK calls them "front buffer" and "back buffer".

The conventional "double buffer" does this: the data of each frame is drawn to the back buffer, and then the contents of the back buffer are continuously flipped to the front buffer; Front buffer is always displayed on the screen. But the "double buffer" of Android surfaceview does this: draw the content in buffer a, and then let the screen display buffer a; In the next cycle, draw the content in buffer B, and then let the screen display buffer B; So back and forth. Therefore, the contents displayed on the screen come from buffer a, B, a In this way, there is no difference between the master and the slave. Instead of calling them "front buffer" and "back buffer", they should be called "buffer a" and "buffer B".

The implementation mechanism of "double buffer" in Android can well explain the screen flashing phenomenon. In the first "lockcanvas drawcanvas unlockcanvas andpost" loop, the contents of buffer a are updated; In the next "lockcanvas drawcanvas unlockcanvas andpost" loop, the contents of buffer B are updated. If the contents of a buffer in buffer a and buffer B are empty, the screen will flicker black when they are displayed on the screen in turn.

resolvent

The black screen appears because one of buffer a and buffer B is empty, and the empty party is posted to the screen. So there are two solutions:

Don't let empty buffers appear: after writing content to one buffer and posting, fill another buffer with the content of this buffer. This ensures that the contents of the two buffers are synchronized. The disadvantage is that it is useless and consumes performance.

Do not post an empty buffer to the screen: when preparing to update the content, first judge whether the content is empty. Only when it is not empty, start the process of "lockcanvas drawcanvas unlockcanvas andpost".

For example, the a buffer is white and the B buffer is black (that is, the front and rear surfaceview caches). Black is the default color for surfaceview. For example, the following pseudo code is drawn continuously through threads:

There seems to be no problem, but in the actual process, it has been flashing in black and white. This is because although a is drawn every time, B has not changed or is still black. At this time, we solve this problem by covering and turning the background into white, and my solution is similar to this.

The code is posted below:

effect:

At the same time, it is recommended that each graph use its own paint instead of calling paint by resetting different settings, because when using, I find that the same paint in many places also causes flicker, and it is good to create its own paint for each graph.

The above is a detailed explanation of the demo example of Android imitation wechat memory cleaning chart animation (solving the problem of surface view screen flicker) introduced by Xiaobian. I hope it will be helpful to you. If you have any questions, please leave me a message, and Xiaobian will reply to you in time. Thank you very much for your support for the programming tips website!