Detailed explanation of how to customize the countdown control for Android using attribute animation

Why introduce attribute animation?

The previous patch animation mechanism of Android is actually quite sound. There are many classes under the android.view.animation package for us to operate to complete a series of animation effects, such as moving, scaling, rotating, fading in and out of the view, and we can also combine these animation effects with the help of the animationset, In addition, you can configure interpolator to control the playback speed of animation, and so on. So you may have questions here. Since the previous animation mechanism has been so sound, why introduce attribute animation?

In fact, the so-called soundness above is relative. If you only need to move, zoom, rotate, fade in and fade out the view in your requirements, the gap animation is indeed sound enough. But obviously, these functions are not enough to cover all scenes. Once our needs exceed the four operations of view: move, zoom, rotate and fade in and out, the gap animation can no longer help us. That is to say, it has considerable limitations in function and scalability, So let's take a look at the scenes that make-up animation can't do.

Note that I used the description of "operate on view" when introducing the gap animation above. Yes, the gap animation can only act on the view. In other words, we can animate a button, textview, or even LinearLayout, or any other component inherited from view, but if we want to animate an object other than view, sorry, make-up animation won't help. Some friends may feel that they can't understand. How can I animate a non view object? Let me give a simple example. For example, we have a custom view in which a point object is used to manage coordinates, and then the OnDraw () method draws according to the coordinate value of the point object. In other words, if we can animate the point object, the animation effect of the whole custom view will be. Obviously, make-up animation does not have this function, which is its first defect.

Then there is another defect in the gap animation, that is, it can only realize the four animation operations of moving, scaling, rotating and fading in and out. What if we want to dynamically change the background color of view? Unfortunately, we can only achieve it by ourselves. To put it bluntly, the previous gap animation mechanism was completed by hard coding. These are the functional limitations. Basically, there is no scalability.

Finally, there is a fatal flaw in the gap animation, that is, it only changes the display effect of the view, but does not really change the properties of the view. What do you mean? For example, there is a button in the upper left corner of the screen, and then we move it to the lower right corner of the screen through the gap animation. Now you can try to click this button. The click event will never be triggered, because in fact, this button still stays in the upper left corner of the screen, It's just that the make-up animation draws this button to the lower right corner of the screen.

For these reasons, the Android development team decided to introduce the feature of attribute animation in version 3.0. Has attribute animation solved all the above problems? Now let's have a look.

The newly introduced attribute animation mechanism is no longer designed for view, nor is it limited to the animation operations of moving, scaling, rotating and fading in and out. At the same time, it is no longer just a visual animation effect. It is actually a mechanism to continuously operate on the value, and assign the value to the specified attribute of the specified object, which can be any attribute of any object. Therefore, we can still move or zoom a view, but we can also animate the point object in the custom view. We only need to tell the system the running time of the animation, the type of animation to be executed, and the initial and end values of the animation. The rest of the work can be handed over to the system.

Since the implementation mechanism of attribute animation is realized by assigning values to the target object and modifying its attributes, the problem of button display mentioned earlier no longer exists. If we move a button through attribute animation, the button is really moved, and it is no longer just drawn in another position.

Well, after so much introduction, I believe you have a basic understanding of attribute animation. Let's take a look at the detailed introduction

introduction

This article introduces how to customize a circular countdown control using attribute animation (without timer, the countdown is controlled by the number of animation execution times). It is relatively simple and can only be used as an example. If necessary, you can modify it to meet your needs. The material and color used in the control are selected by the author at will, resulting in poor effect. First, the example picture

In the example, the background color, gradient color (only two color values are supported), font size, picture, progress bar width and whether to display progress bar can be modified through XML, and the countdown time can be set through code. If you are interested, you can modify the code to set richer gradient values and text change effects. This article only provides design ideas.

The author uses multiple execution of attribute animation to realize the countdown, and the execution times is the initial value of countdown. After disassembling the above example, you will find that it is easy to implement. The main parts to be handled are the following

1. Draw an external circular progress bar

2. Draw a central rotation picture

3. Draw countdown time

1、 Draw an external circular progress bar, which is divided into two parts:

1. Draw the circular background canvas.drawcircle method

2. The sector progress is drawn by canvas.drawarc method, and the radian is controlled by the overall countdown

2、 Draw a center rotation picture:

Front Description: the outer circular diameter is set to D1; The diameter of the central rotation picture is set to D2; The progress bar width is set to D3

1. Cut and zoom the set picture (or not cut, the author has obsessive-compulsive disorder), so that its width and height are equal to D1 - 2 * D3, that is, D2 = D1 - 2 * D3;

2. Use the matrix to translate the bitmap to the center;

3. Rotate the bitmap using the matrix

3、 Draw countdown time:

Control the text position through the progress of each animation execution

The following is an example code:

Custom attributes are as follows

The code is relatively simple. If you have any questions, please leave a message

Full code: https://github.com/670832188/TestApp (local download)

summary

The above is the whole content of this article. I hope the content of this article has a certain reference value for your study or work. If you have any questions, you can leave a message. Thank you for your support for programming tips.