Android imitation Zhihu daily page opening effect

Let's take a look at the opening effect of Zhihu daily. It's a very beautiful opening effect

ezgif.com-resize (2).gif

Then I'll have one

ezgif.com-resize (1).gif

Also good ~ I feel I can confuse the false with the true~

It's simple. Let's start.

To achieve this effect, first formulate a three-step strategy

Bottom layout slide up display

Go directly to the code. Attribute animation is basically used

At the end of the displacement animation, the user-defined view method is called to start the arc drawing operation.

Draw a knowing arc

Next, start drawing ~ customize a view, override the OnDraw method, and initialize an appropriate brush before drawing.

Mpaint1 is used to draw an arc and set the fill pattern to stroke, so that at least we can easily draw a ring. In fact, the knowledge arc to be drawn is the feeling that a ring has been gnawed away ~ but the gnawed place is very smooth, so it needs a round head brush. Mpaint2 is used to draw the outer rounded rectangular ring, and the setting is similar.

The amount of code is small, but to clarify the drawing method of the ring, whether it is a ring or a rounded rectangular ring, you need to determine a datum rectangle first. The position and size of the datum rectangle determine the position and size of the ring. Parameters 2 and 3 in canvas.drawarc set the position and range of starting to draw an arc. Look at the operation effect. The starting drawing point of the arc is directly below the center of the circle, and the positive direction of the X axis is 0 degrees, so the starting drawing point is 90 degrees.

Next, the animation is realized by increasing the range of arc drawing. Upper code

Use valueanimator.offloat to create an animation with a value of 0-270, add state monitoring, continuously increase the swept range and redraw the view during the execution of the animation, so as to realize the animation effect of drawing an arc.

The whole process is that canvas completes dynamic drawing by cooperating with attribute animation, which is not complicated at all.

display picture

Here I use the local picture loaded by glide, set the delay loading, grasp the picture loading time, and get a better screen opening effect

Here I personally think that Zhihu also downloads the pictures locally in advance in some way to grasp the accurate loading opportunity. I don't know whether it is so..

Finally, post the code

activity

Custom view

Layout file

I personally like these designs that are not complex to implement but have a very good experience. When I see them, I will try to implement them, and then share them while learning. If you are as interested as me, you can pay attention to me~

Full code address https://github.com/yanyiqun001/zhview

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.