Android custom view uses xfermode to realize dynamic text loading animation

For xfermode, many people may give up after reading some. Today I will personally understand it. Give a simple example in our life to make it easier for everyone to understand what it is. In fact, it's not as difficult as you think. You only need to know three steps. Let's take a look at the renderings this time. This GIF is for everyone to make do.

Don't think xfermode so hard. I understand xfermode as a "set" learned in middle school. We know that "set" processes data. For example, set a = {1,2,3,4}, set B = {3,4,5,6}. The two sets have three attributes, intersection, union and complement. In my personal understanding, xfermode is a graph set, that is, graph A. graph B can take, intersection, union and complement. Of course, the type between a and B is actually the attribute type of xformode we selected. This leads to our first step today. Although it is three steps, the premise is that you should have a certain understanding of the customized view. For example, you should know OnDraw (), onmesure (), paint brush and canvas. Friends who are not very clear about customization can go to my similar articles, This article takes you step by step from the introduction to the custom view:

Step 1: we should familiarize ourselves with this diagram

There are 18 of the 16 graphical results. We don't need to remember this figure, just select the corresponding target figure when using it. How to use it? We want to introduce our main class today, porterduffxfermode. This class is our xformode class. It also has two other abandoned brothers. If it is abandoned, we won't talk about it. Since it is a variety of objects, we need to create objects to use, as follows:

Here is our object. Here, its construction parameters are the type selected in the above figure. The final figure is the intersection of the two figures. Of course, you can choose the mixed arrangement type of the two pictures according to the effect of your target graphics. This is the first step. We just need to understand the meaning of the picture and the usage of the class porterduffxfermode. All the pictures I mentioned here are not only pictures, but also the pictures drawn by circles and rectangles.

Step 2:

We understand the pattern of graph mixing, so in the second step, we need to have two graphs, otherwise how to mix them. From the graph, we can see that the two graphs are SRC and DST respectively. Next, I will introduce that these two names correspond to the graphic on our mobile phone. Because we want to draw, we will come to the OnDraw () method. This method has a class called canvas layer, so this is the key point of our second step: setting the layer and calling the method

First, the first four methods are relatively simple, that is, we need to set the size of this layer, the fifth method is our brush, and the sixth method is canvas.all_ SAVE_ Flag, this is a flag.

Note: we must call the above method before drawing the graph, otherwise it will have no effect.

Here is the order of drawing:

Step 3:

The third step is to focus on the above code, because these lines of code are very simple. After setting the layer, we will draw the graph. Here we draw a bitmap picture with canvas. Note that the paint we use at this time is just an ordinary brush. By this time, our porterduffxfermode mode has not been used! Looking down, our brush calls:

This method, so if we draw graphics again, the brush we use will be different from the graphics we drew before. This method can be said to be a dividing point. The figures drawn before and after this method correspond to the figures of SRC and DST in our figure respectively. This determines what our final target graphics look like.

Finally, set the xformode mode of the brush to null. Then call this method of canvas

Our drawing is over. I use animation here to dynamically change the height of the rectangle. I posted this picture to everyone. The picture was stolen from others. ha-ha.

You can download and use.

Post the code for your reference. The above is my personal understanding, including the examples given to you. If there is anything wrong, please point out. Thank you.

You can also do some complex effects. For example, you don't need a rectangle. You can fill it with waves. Use your imagination to do it.

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.