PathMeasure 轨迹动画神器路径动画

PathMeasure 轨迹动画神器

轨迹动画一般利用SVG来实现，或者使用属性动画，自定义估计值，根据两点之间的线性关系式计算坐标（复杂）
但是使用PathMeasure来进行绘制轨迹动画，so easy。

先看效果：

效果分析：
1、圆圈变成圆弧
2、圆弧不断的变小

实现
方式1：通过不断改变绘制圆弧的开始角度。这个方法肯定是最先想到的方法，
因为api
drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,
@NonNull Paint paint)用的最多

方式2：利用PathMeasure，不断截取路径。截取不断变小的圆弧，然后把截取到的path绘制出来就可以。

比较：两种方式相比PathMeasure并没有多大的优势，但是绘制圆弧可以使用 drawArc 来改变角度实现类似轨迹运动的效果，但是，如果path、不是一个圆形，问题就复杂了，PathMeasure的强大也就体现出来了。

学习PathMeasure的使用
查看源码，发现只有100多行，其实也就几个方法。但是确实非常流弊
1、setPath(Path path, boolean forceClosed)
要对path进行操作，首先需要设置一个path，也可以在构造函数中绑定，关键在第二个参数，是否关闭，如果是true，那么会给参数path，强制首尾闭合，因为path可能是一个非闭合的路径。

2、getLength
得到path路径的长度，很有用。

3、getPosTan(float distance, float pos[], float tan[])
得到distance，位置的点的坐标，和在个点与path进行切线的正切，分别放在pos[] 和tan[]中。
例如，distance==length/2,就是得到这条path路径的中间点，的坐标和正切

4、getMatrix(float distance, Matrix matrix, int flags)
这个就厉害了，直接返回得到矩阵，这个矩阵就包含了这个点移动的位置，和倾斜的角度，可以直接在这个点绘制
一个图片，利用这个matrix

5、getSegment(float startD, float stopD, Path dst, boolean startWithMoveTo)
从开始的距离，到结束的距离，截取一段path放在dst中，
startWithMoveTo 如果为true，这个dst会从截取点开始
如果为false，这个dst会从（0,0）作为开始点

使用PathMeasure来进行分析

接着圆弧动画完了，就是手柄的动画。把属性动画的0到1拆分，0到0.8，完成画的轨迹动画，0.8到1完成手柄的动画，手柄就是一条直线，再使用PathMeasure有点大炮打蚊子，直接不断改变手柄直线的结束点就可以了。

下面是具体的代码实现：

package com.lmj.searchview;import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathMeasure;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;/*** Created by limengjie* on 2017/5/25.14:37*/public class SearchView extends View {private Matrix mMatrix;private Paint mPaint;private Path mPath;private int mCircleX;private int mCircleY;private int mRadius = 50;//圆的半径private PathMeasure mPathMeasure;private float circleLength;private float startD;private float endD;private ValueAnimator mvalueAnimator_rotate;private ValueAnimator mvalueAnimator_path;private String Tag = "SearchView";private Path dstCircle;private int lineD = 0;private static final int Status_Normal = 1;//正常状态private static final int Status_PathAni = 2;//正在进行轨迹动画private static final int Status_RotateAni = 3;//正在旋转动画private int Status = Status_Normal;private int rotateNum;public SearchView(Context context) {this(context, null);init();}public SearchView(Context context, @Nullable AttributeSet attrs) {super(context, attrs);init();}private void init() {mMatrix = new Matrix();mPaint = new Paint();mPath = new Path();mPaint.setStyle(Paint.Style.STROKE);mPaint.setColor(Color.GREEN);mPaint.setStrokeWidth(2);mPaint.setAntiAlias(true);mPathMeasure = new PathMeasure();dstCircle = new Path();}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);mPath.reset();mCircleX = getWidth() / 2;mCircleY = getHeight() / 2;switch (Status) {case Status_Normal:drawNormal(canvas);break;case Status_PathAni:drawPathAni(canvas);break;case Status_RotateAni:drawRotateAni(canvas);break;}}private void drawNormal(Canvas canvas) {mPaint.setColor(Color.GREEN);mPath.addCircle(mCircleX, mCircleY, mRadius, Path.Direction.CW);canvas.save();canvas.drawPath(mPath, mPaint);canvas.rotate(45, mCircleX, mCircleY);canvas.drawLine(mCircleX + mRadius, mCircleY, mCircleX + mRadius * 2, mCircleY, mPaint);canvas.restore();}private void drawPathAni(Canvas canvas) {mPath.addCircle(mCircleX, mCircleY, mRadius, Path.Direction.CW);canvas.save();canvas.rotate(45, mCircleX, mCircleY);mPathMeasure.setPath(mPath, false);circleLength = mPathMeasure.getLength();endD = circleLength;dstCircle.reset();Log.i(Tag, "sd:" + startD + ",ed:" + endD);mPathMeasure.getSegment(startD, endD, dstCircle, true);
//        mPaint.setColor(Color.RED);canvas.drawPath(dstCircle, mPaint);//圆的动画canvas.drawLine(mCircleX + mRadius, mCircleY, mCircleX + mRadius * 2 - lineD, mCircleY, mPaint);canvas.restore();}private void drawRotateAni(Canvas canvas) {mPath.addCircle(mCircleX, mCircleY, mRadius, Path.Direction.CW);canvas.save();canvas.rotate(45+rotateNum, mCircleX, mCircleY);mPathMeasure.setPath(mPath, false);circleLength = mPathMeasure.getLength();dstCircle.reset();mPathMeasure.getSegment(0, 20, dstCircle, true);
//        mPaint.setColor(Color.RED);canvas.drawPath(dstCircle, mPaint);//圆的动画}private void startPathAni() {
//        if(null==mvalueAnimator){if (null != mvalueAnimator_path) {mvalueAnimator_path.cancel();}lineD = 0;mvalueAnimator_path = ValueAnimator.ofFloat(0, 1);mvalueAnimator_path.setDuration(1500);mvalueAnimator_path.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {//0-0.8,分割圆，0.8到1 分割手柄float fraction = animation.getAnimatedFraction();if (fraction <= 0.8f) {startD = circleLength * fraction / 0.7f;} else {startD = circleLength;lineD = (int) ((fraction - 0.8) * mRadius / 0.2f);}if(fraction==1f){lineD = mRadius;Status = Status_RotateAni;postInvalidate();startRotateAni();}postInvalidate();}});mvalueAnimator_path.start();
//        }}public void startRotateAni(){if (null != mvalueAnimator_rotate) {mvalueAnimator_rotate.cancel();}mvalueAnimator_rotate = ValueAnimator.ofInt(0, 360,0);mvalueAnimator_rotate.setDuration(3000);mvalueAnimator_rotate.setRepeatMode(ValueAnimator.RESTART);mvalueAnimator_rotate.setRepeatCount(-1);mvalueAnimator_rotate.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {rotateNum = (int) animation.getAnimatedValue();postInvalidate();}});mvalueAnimator_rotate.start();}public void startSearch() {Status = Status_PathAni;startPathAni();postInvalidate();}public void stopSearch() {Status = Status_Normal;if (null != mvalueAnimator_rotate) {mvalueAnimator_rotate.cancel();}if (null != mvalueAnimator_path) {mvalueAnimator_path.cancel();}postInvalidate();}}

总结，
只要我们有一个已知的path，就可以通过PathMeasure，来截取轨迹，根据距离来获取某个点的坐标和正切，所以有了path，轨迹动画就so easy了。

源码下载

————————————————
版权声明：本文为CSDN博主「按劳分配」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lmj121212/article/details/72736316