Android custom view path advanced usage search button animation

A lot has been written about path before, such as drawing lines with path, drawing first-order, second-order and third-order Bessel paths with path. These are the basic uses of path. Today I'm going to show you the advanced usage of path. First, the figure above, and then blow.

The effect is roughly like this. It looks good. Without much to say, let's get to the point:

Since we want to talk about the advanced usage of path today, let's first talk about (path -- Chinese) that is "path". Since it is a path, from our object-oriented idea, we can easily think of the length of the path, a certain point of the path, etc. With this in mind, we lead to today's main class ------- pathmeasure, which literally means easy to understand -- translated into path measurement. Yes, this is the class we use to measure paths. Since it is a class, we need to see what methods and properties it has collectively.

1. Construction method:

One has parameters and the other has no parameters.

It's easy to understand that without parameters is to directly create objects. What about parameters?

PathMeasure(Path path,boolean forceClosed) ； The first parameter is path! This is our path. Yes, since it is a measurement class, it is to determine the path to be measured. What about the second parameter?

The second parameter is used to ensure that the path is closed. If it is set to true, the path will be closed automatically regardless of whether the previous path is closed or not (if the path can be closed).

2. Method:

There are many methods. What are they all for? Just find some important and common ones to talk about:

The first one is setpath (path, Boolean forceclosed)

This method can be used to set the path at a glance. If we use the parameterless construction method when creating pathmeasure, we need to use this method to tell pathmeasure which path to measure at present. (I like to use no reference, which is more flexible).

The second is getlength (), which is easy to understand. It is to obtain the total length of the path.

The third one: getsegment (float startd, float stopd, path DST, Boolean startwithmoveto). This method is very important. It intercepts fragments. The intercepted result is our path. The parameters are also well understood. The first is the distance from the beginning and the second is the distance from the end (relative to the starting point = = since it is the starting point, how can we find their starting point? In fact, it is the point where we draw the drawing pen). The third parameter is the return path. The fourth parameter is whether to use moveto at the starting point to ensure that the position of the first point of the intercepted path remains unchanged.

Fourth: getpostan (float distance, float [] POS, float [] tan). This is also very important. Why? Just let me explain his parameters. The first parameter is the distance (the path distance relative to the drawing starting point), the second parameter is the coordinate point from the starting point, and the third parameter returns the positive Xuan function tan@ angle.

After understanding these parameters, let's explain today's example:

Let's start with a simple example: for example

The analysis process as shown in the figure:

1. First draw a circle (blue), starting from 45 degrees, and pay attention to the starting point of the circle.

2. Draw a large circle (auxiliary circle) with the same center to assist in drawing blue lines.

3. Get the coordinates of the end points of two circles by getpostan (float distance, float [] tan).

4. Draw lines with lineto (x, y). You get our search graph.

5. The next step is to intercept fragments in real time. Getsegment (float startd, Boolean startwithmoveto), intercepting the distance from 0 to getlength(); This produces a dynamic effect.

Look at the code:

For brush, canvas and valueanimator animation, please see the previous blog for detailed explanation.

We have learned the first picture. Go and practice it!