Android custom view realizes the function of tick animation

Effect drawing first

Dynamic graph

Static graph

1. Review

[Android custom view: an exquisite little animation with a hook] in the last article, we have basically realized the effect of the control, but... But... After three or four days, we carefully look back at the code we wrote. Although the idea is still there, some of the code still can't be understood at once

My God, this has to be refactored immediately ~ just as it happens, a Jane friend Changqin imitated and wrote this control. After reading it, I think I can implement it in this way.

2. Reflection

The idea of control drawing can be seen in the previous article, which will not be analyzed here. Here, let's first analyze some stubborn places in the control in the last article and what needs to be improved.

Take the step of drawing the circle progress

Here, we define a counter ringcounter. When drawing, it will automatically increase to 360 according to 12 units, so as to simulate the change of progress.

Think about it

By changing the self increasing unit to control the change of animation speed, it is difficult to adjust to our satisfaction. At this time, we can think that the fundamental reason to make the animation speed faster or slower is to control time. If time can be used to control the animation speed, it is much more convenient. The animation is divided into four steps. If each step of animation is realized by handwriting counter, You have to define four or more member variables. Too many member variables will only make the code more chaotic. If the animation needs to add an interpolator, the handwritten counter can't meet the above analysis. I can't accept it

3. Change

So how to improve the above problem? The answer is to use custom attribute animation to solve it. Therefore, the main focus of this article is to replace the handwritten counter with attribute animation to ensure the clarity of code logic as much as possible, especially the code in ondraw() method.

One advantage of using attribute animation is that given the range of values, it will help you generate a pile of values you want, and it will have unexpected effects with the interpolator. Next, we will reconstruct the part of the animation step by step

3.1 draw the progress bar of the circle

First, use a custom objectanimator to simulate progress

To customize the attribute animation, you also need to configure the corresponding setter and getter, because when the animation is executed, you will find the corresponding setter to change the corresponding value.

Finally, draw in ondraw()

3.2 draw an animation that shrinks toward the center of the circle

Similarly, it is also an attribute animation

Setter / getter is similar, so I won't talk about it

Finally, draw in ondraw()

3.3 draw the hook and enlarge the effect of rebound

These are two independent effects, which are implemented at the same time. I'll put it together

The first is to define attribute animation

getter/setter

Finally, just draw in ondraw()

3.4 execute animation in sequence

Animatorset can be used to execute multiple animations, where playtogether() is executed together, playsequentially() is executed one by one, and step by step.

Finally, the animation is executed in ondraw()

3.5 each method should preferably have a single responsibility

If I put the method of defining attribute animation in ondraw(), I personally feel very confused. And take a closer look. These attribute animations do not need to change dynamically. Why not extract them and initialize them at the beginning?

So, we extract the code that defines the attribute animation and initialize it in the constructor

Finally, the OnDraw () method is only responsible for simple drawing, regardless of anything

The final effect is the same, and the code logic is clear at a glance

Therefore, I think it is very helpful for me to review my code regularly during development and for future maintenance.

That's all ~ thank you for reading. Finally, let's put the GitHub address of the project

>GitHub address: tickview, an exquisite hook animation https://github.com/ChengangFeng/TickView

The above is what Xiaobian has sorted out for you. You can test it. If you have any questions, you can discuss them in the message area below. Thank you for your support for programming tips.