Android custom ViewGroup achieves gorgeous Alipay pulse echo effect.

Last year's Spring Festival, Alipay's activities of Fuwa activities were not able to fire anymore. What's more, it is awesome that the Spring Festival Gala can also participate in the activities of the people. As long as you click on the plugin, you can automatically click on the "red" bag. At that time, you only practiced this part of the technical code. It is not open to the public. Subsequent plans to write articles about plug-ins are far away. (we know that there is a radar diffusion animation effect on Alipay's web page. At that time, the animation effect was excellent. So I tried to achieve a similar effect privately. Later, I found that there was a great God writing a similar effect in GitHub. So I read the great God's code and found that our core ideas are the same, but the details are different. Then I chose the good one and integrated the two codes The operation effect after integration is as follows:

Before we begin to explain the implementation, we first analyze the effect of Alipay's Alipay. After entering the Alipay page, click the "cheese" button. A circle first appears on the screen, which is constantly enlarging. When the circle is magnified, its transparency is also changing from big to small. Then, before the circle disappears, new circles will appear and perform the same animation operation... Through observation, we find that these circles perform the animation operations of magnification and transparency gradient in turn according to fixed time intervals. Therefore, to achieve the same effect, first have a ViewGroup, and then add a fixed number of sub views to the ViewGroup, Finally, let these sub views perform zoom in and transparency gradient animation to achieve this effect. Once the outline process is clear, it will be easy to implement.

First define our ViewGroup. Because the ViewGroup only adds a fixed number of child views and then lets these child views perform a series of animation, it can directly inherit FrameLayout. The code is as follows:

We name our wheeze effect control radarlayout, radar means radar, and radarlayout means continuous scanning. Through the previous analysis, we know that radarlayout is composed of a fixed number of sub views. Therefore, radarlayout needs to have an attribute representing the number of sub views, which can be accessed and modified by the outside world; Since the execution animation of the sub view is zoomed and transparency gradient at the same time, radarlayout needs to assemble each animation with an animation set; Since the execution time needs to be known during animation execution, radarlayout needs to have an attribute representing the execution time, which can be accessed and modified by the outside world; Since the animation effect of radarlayout is executed by the sub view, and the page of wheezing is a circle, it is necessary to define the sub view and draw it on the screen, and the painting on the screen needs a brush, the brush needs to have color, and it is also necessary to know where the painting is, so our radarlayout definition can be defined as follows:

Our radarlayout has been completed, and the code is very simple. I believe all our friends can understand it. We need to pay attention to the meaning of the attribute musering. When musering is true, it means to use a circular radar pulse, otherwise use a circular radar pulse. The second is the use of attribute animation. If you don't understand, please check it yourself. There will be no more introduction here. Next, write our activity_ main. XML layout file, as follows:

In activity_ main. We have added four radarlayouts to the XML layout to compare their differences. Next, we write our mainactivity. The code is as follows:

In mainactivity, we set layout1 as the default effect, layout2 as the ring effect, and set the number to 2; Layout3 is set to use circles and set the color of circles to red. In layout3, we set the use of rings, set the number of rings to 7, and set the color to blue. After clicking the start button, we open the animation of each radarlayout, and the operation effect is as follows:

The operation effect looks good. It basically realizes the radar pulse effect of imitating payment. The main principle is to use the attribute animation and play these attribute animations together. It should be noted that if you want to compatible attribute animation in the lower version, you can use the famous animation compatibility library nineoldandroids open source by Jake Wharton. Finally, thank you for watching (* ^ ^ *)

The above is the Android custom viewGroup introduced by Xiaobian to realize the gorgeous Alipay imitation pulse effect. It is hoped that it will help you. If you have any questions, please leave a message for me. Thank you very much for your support for the programming tips website!