I made a label on the graph before, but the animation style was not good. After searching for information, I found a brand new way to realize animation, which can smoothly show and hide the label line. The example is as follows, and I will talk about it here. This article will cover Path, Property Animation, PathEffect and PathMeasure. Let’s start talking about it.

Draw the curve using Path

So when we want to draw a curve, we might want to draw a drawLine, but it’s easier if it’s not too complicated, but if we want to draw a curve, or if we want to draw a curve, or if we want to draw a curve, it’s more complicated to draw a drawLine. At this point, we can use Path to drawPath.

Paint paint = new Paint(); paint.setColor(Color.BLACK); paint.setStyle(Paint.Style.STROKE); // Must be set to draw line Path Path = new Path(); path.moveTo(100, 100); // Locate the starting point of path path.lineto (100, 200); path.lineTo(200, 150); path.close(); canvas.drawPath(path, paint);Copy the code

With the above method code we can draw the triangle.

Measure the length of the Path

The premise of the animation is to first get the length of the Path, and then calculate the length that should be displayed for each time node based on the length. Because the system gives us a way to measure the length, we don’t need to do complicated calculations. Just use PathMeasure.

PathMeasure measure = new PathMeasure(path, false);
float length = measure.getLength();Copy the code

Only part of the Path is drawn

To make the Path progressively visible, or progressively hidden. We need to be able to display part of the path and change the length of the display. We know you can use DashPathEffect to show dashed lines. We can also use DashPathEffect to set the length of our solid and dashed lines to the length of our Path, and then change the offset so that only part of our Path is displayed.

PathEffect effect = new DashPathEffect(new float[]{pathLength, pathLength}, pathLength/2);
paint.setPathEllect(effect);
canvas.drawPath(path, paint)Copy the code

Get Path moving

As mentioned above, we can change the offset of PathEffect to change the length of path display. Therefore, we can define a Property for our View or object and change the value of this Property through the Property Animation to achieve Animation.

The PathEffect property value changes

Float percentage = 0.0 f; PathEffect effect = new DashPathEffect(new float[]{pathLength, pathLength}, pathLength - pathLength*percentage);Copy the code

Animation definition:

AnimatorLine = objectAnimator.offloat (view, "percentage", 0.0f, 1.0f); animatorLine = objectAnimator.offloat (view, "percentage", 0.0f, 1.0f);Copy the code

other

And that’s it. The idea and even the code refer to a foreign blog. The idea is very important, a year ago when I did this animation, I had no idea. It took a lot of time, but the effect is still quite stiff. This time it was easy to solve when I found out what the others were thinking.

Train of thought is very important, and to understand more comprehensive knowledge, otherwise many things do not know, their train of thought will be limited.

Finally, there’s Google, where it’s hard to find anything but ads.

There is no Demo, you can refer to the Github library that I refer to. At the same time the author has implemented SVG animation display, the same principle, just load SVG as path, using the same animation. Code: github.com/matthewrkul…

The original address: blog. Isming. Me / 2016/06/07 /… Please indicate the source.