Call, light emissary - play PathMeasure

The author blog

http://www.jianshu.com/u/975e915e131b

The article directories

preface
PathMeasure
Animation and dismantling
Code implementation

preface

First, let’s take a look back at our childhood

When I was a child, I always imagined that I could transform. Today, we will use the code to achieve the first step of transformation, and draw a magic array magic_circle

Static images are easier, we use Path to set the Path, and then canvas.drawPath, but static images are too low, so we need to animate them.

The effect is finished, will not write the children’s shoes must have meng forced, the children’s shoes can go out to the left, because the realization is too simple.

Okay, before we start coding, let’s learn about a class called PathMeasure. Our light Emissary array is based on two methods of this class.

PathMeasure

The class annotation for this class is just a copyright note

Step on the horse, Google engineers are lazy, do not write comments… Fortunately, this class only has a hundred lines of code, so we’ll see for ourselves

Public constructors

PathMeasure Creates an empty PathMeasure object
PathMeasure(Path Path, Boolean forceClosed) Creates a PathMeasure with the Path parameter. ForceClosed controls whether the Path is closed automatically

Public methods

GetLength () returns the total length of the current Path.
getMatrix(float distance, Matrix matrix, int flags)
GetPosTan (float distance, float[] pos, float[] tan) getPosTan(float distance, float[] pos, float[] tan) gets the point value of the distance length to pos, and the tangent value of the point to tan.
GetSegment (float startD, float stopD, Path DST, Boolean startWithMoveTo) getSegment(float startD, float stopD, Path DST, Boolean startWithMoveTo) getSegment(float startD, float stopD, Path DST, Boolean startWithMoveTo)
IsClosed () Whether to close automatically
NextContour () moves to the next curve. If path contains discontinuous lines, methods such as getLength and getPosTan will run on the first line and need to jump to the second line using this method
setPath(Path path, boolean forceClosed)

Let’s review the PATH API, because static light emissaries need PATH to draw.

Path

For a quick review, see Hencoder’s Bolg for gameplay details

Animation and dismantling

All right, we’re ready to roll out the code

The first step is to draw a static light emissary array

First draw the two circles, and then the six-pointed star in the center (actually two triangles if you look closely). All are very simple methods, students may encounter a problem when they start to draw, that is, the three points of the triangle are not easy to take. In fact, it is very simple, just take 0, 1/3, 2/3 points on the circle, didn’t we just talk about the PathMeasure method, we can use getPosTan.

Step two, get the phalanx moving

Let’s divide the animation into three stages.

In the first stage, draw two circles

As shown in the figure above, the two circles are drawn slowly. The path of the circle is easy to draw, but I won’t talk about it here. Then getLength of the PathMeasure can get the total length of the path, getSegment can get the path from point to point. So a ValueAnimator can handle a procedure from 0 to 100% length. See the code below for details.

Then the question arises, where does the circle drawn by Path start? How to control the Angle at which the two circles start drawing is different. If you want to rotate 90 degrees and draw a second circle, of course you can do that, but since the triangle behind it also needs to be rotated, we don’t need to draw a circle here, we need to add a square to path and Rect’s arc is also a circle, and then our arc can control the Angle, radians at the beginning. And then it looks like this

WTF? Why is the Angle wrong? I set the starting Angle clearly

innerCircle.addArc(innerRect, 150, -360); outerCircle.addArc(outerRect, 60, -360);

Finally, a big bull said that your circle became closed loop, PathMeasure could not find the starting point and used the default. You change 360 degrees to 359.9 so it’s not a closed circle.

In the second stage, two points bounce inside the circle

It looks like there’s gonna be some kind of bump and bounce, high-tech stuff, but it’s not.

Trajectories are two triangles, how do you get two lines to follow the triangle, and not change the length of the line as you go.

In the first step we used ValueAnimator to control a circle from 0 to 100%,

pathMeasure.getSegment(0, distance * pathMeasure.getLength(), drawPath, true);

Continuously truncate path from the starting point to *% length and assign values to drawPath.

From inside is the starting point of interception, so we do not start interception from the starting point, from the current point near the interception is not on the line, haha ~so easy

float stopD = distance * pathMeasure.getLength(); Float startD = stopD – (0.5f – Math. Abs (0.5f – distance)) * 200; float startD = stopD – (0.5f – Math. pathMeasure.getSegment(startD, stopD, drawPath, true);

The third stage draws two triangles

In fact, the two triangles are the movement tracks of the second step, that is to say, directly use the Path of the first stage, and then use the same method of the first stage to achieve the effect.

Code implementation