PathMeasure：路径动画飞机转圈的加载动画

PathMeasure这个东西还是挺神奇的，我们看到的许多酷炫的动画大多要依靠他，他就像一个计算器，你给他一个path，他还你路径总长、指定长度的终点坐标，路径上某一点的tan、sin、cos值等等。这次我们来看看怎么用它做一个飞机转圈的加载动画，效果如下图：

2.gif

先了解PathMeasure的一些方法：

一、初始化

他的初始化有两种,第一种直接new空的构造方法，得到实例后利用setPath传入路径，如：

PathMeasure p=new PathMeasure ();
p.setPath(path,true);

第二种，直接在构造时候传入path，

PathMeasure p=new PathMeasure (path,true);

我们看到true这个参数多次出现，他代表的是PathMeasure 是否闭合的参数，如果为true，那么不管path有没有闭合，PathMeasure 都会闭合，但是只会影响PathMeasure 对path的计算，而不会改变path本身。

二、getLength

顾名思义就是获取path在计算后的长度。下面我们利用getLength看看上面说的true是怎么影响计算的。我们先定义一个自定义view，如下：

public class MyView extends View {

    private Paint paint;

    public MyView(Context context) {
        this(context,null);
    }

    public MyView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public MyView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(5);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.translate(50,50);
        Path path=new Path();
        path.moveTo(0,0);
        path.lineTo(0,100);
        path.lineTo(100,100);
        path.lineTo(100,0);

        PathMeasure pathMeasure1=new PathMeasure(path,false);
        PathMeasure pathMeasure2=new PathMeasure(path,true);
        Log.d("yanjin","pathMeasure1的length="+pathMeasure1.getLength()+"--pathMeasure2的length="+pathMeasure2.getLength());

        canvas.drawPath(path,paint);
    }
}

length.png

展示效果如上图，我们打印的getLength在设置为true和false的时候，会有不同的数值，一个为300，一个为400，多出来的100，大家应该也知道在哪来的吧，哈哈哈哈。

三、nextContour

我们都知道，一个path就相当于一个集合，他可以不断地add很多不连续的路径PathMeasure只对连续的路径有效果，那么假如path里面有A/B/C三个不连续的线段，怎么计算他们的值呢？这里就用到了nextContour函数，简单的说他就是跳到下一个线段的作用。比如如下代码：

public class MyView2 extends View {
    private Paint paint;

    public MyView2(Context context) {
        this(context,null);
    }

    public MyView2(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public MyView2(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(5);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.translate(150,150);
        Path path=new Path();
        path.addRect(-50,-50,50,50,Path.Direction.CW);
        path.addRect(-100,-100,100,100,Path.Direction.CW);
        path.addRect(-120,-120,120,120,Path.Direction.CW);
        canvas.drawPath(path,paint);

        PathMeasure pathMeasure=new PathMeasure(path,false);//已经闭合了，我们可以传false。
        do {
            float length = pathMeasure.getLength();
            Log.d("yanjin","len="+length);
        }while (pathMeasure.nextContour());

    }
}

输出的值为：

2019-02-22 15:48:33.787 7889-7889/com.easy.customeasytablayout.customviews D/yanjin: len=400.0
2019-02-22 15:48:33.787 7889-7889/com.easy.customeasytablayout.customviews D/yanjin: len=800.0
2019-02-22 15:48:33.787 7889-7889/com.easy.customeasytablayout.customviews D/yanjin: len=960.0

我们可以得出以下结论：
1、nextContour函数得到的path循序与我们path.add时顺序一样。
2、getLength针对的是当前线段，不是整个path。

四、getSegment函数

他的定义如下：

public boolean getSegment(float startD, float stopD, Path dst, boolean startWithMoveTo)

getSegment是用来截取一段path的，通过startD与stopD设置起始点。然后将截取的path存到dst中，startWithMoveTo表示是否使用moveTo，将路径的新起点移动到结果path的起点，一般为true。
进过上面的介绍，我们可以先写一个常见的加载动画了，动画效果如下：

1.gif

这个很常见吧，下面来讲讲他的代码。
先写自定义CirclePathAnimView代码

public class CirclePathAnimView extends View {

    private float mAnimatorValue;
    private PathMeasure mPathMeasure;
    private Path mDevPath;
    private Paint mPaint;
    private ValueAnimator mValueAnimator;

    public CirclePathAnimView(Context context) {
        this(context, null);
    }

    public CirclePathAnimView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CirclePathAnimView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setLayerType(LAYER_TYPE_SOFTWARE, null);//关闭硬件加速
        //初始化画笔
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(getResources().getDimension(R.dimen.dp_3));
        mPaint.setColor(getResources().getColor(R.color.colorPrimary));

        //画真正显示的path
        mDevPath = new Path();


        //开始动画，当然当前动画你可以单独写成一个方法
        mValueAnimator = ValueAnimator.ofFloat(0, 1);
        mValueAnimator.setInterpolator(new LinearInterpolator());
        mValueAnimator.setDuration(2000);
        mValueAnimator.setRepeatCount(-1);
        mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                mAnimatorValue = (float) valueAnimator.getAnimatedValue();
                invalidate();
            }
        });
        mValueAnimator.start();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        int radius = 0;
        if (width >= height) {
            radius = height / 2 - height / 8;
        } else {
            radius = width / 2 - width / 8;
        }
        //绘制path
        //先画圆的path，但是这个圆只是用来计算
        Path circlePath = new Path();
        circlePath.addCircle(width / 2, height / 2, radius, Path.Direction.CW);


        //计算圆的path的长度
        mPathMeasure = new PathMeasure(circlePath, true);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float length = mPathMeasure.getLength();
        float stop = length * mAnimatorValue;
        //在0到0.5以前，起点不变，0.5到1，起点开始向终点靠拢。
        float start = (float) (stop - ((0.5 - Math.abs(mAnimatorValue - 0.5)) * length));

        mDevPath.reset();
        mPathMeasure.getSegment(start, stop, mDevPath, true);
        canvas.drawPath(mDevPath, mPaint);
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        mValueAnimator.cancel();
        mValueAnimator = null;
    }
}

我们可以先看构造方法，我们先设置mPaint ，然后开启动画，其实这个动画可以另写一个方法，手动掉一下，这里为了方便就写在这了，可以看到动画的更新监听里面我们获取动画值之后，调用invalidate刷新界面，这样会重走onDraw方法，这里讲onDraw之前，先看看onMeasure。
onMeasure里面我们主要拿到控件自己的宽高，设置了一个圆形Path--》circlePath ，但是这个circlePath 并没有被画出来，他只是用来被截取的，mPathMeasure 存入这个circlePath 。
然后动画中每调用invalidate进入onDraw的时候，拿动画值mAnimatorValue*path总长得到当前终点，起点的话，我们采取在0到0.5以前，起点不变，0.5到1，起点开始向终点靠拢的算法获得起点。这样我们就能调用截取方法了

mPathMeasure.getSegment(start, stop, mDevPath, true);

截取后原本为空的mDevPath就有数据了，我们就可以把它画下来了。为了让他看起来更有意思，我们在Activity中对他整个空间进行旋转，

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main29);
        CirclePathAnimView circlePathAnimView = findViewById(R.id.view);

        ObjectAnimator objectAnimator=ObjectAnimator.ofFloat(circlePathAnimView,"rotation",0,360);
        objectAnimator.setRepeatCount(-1);
        objectAnimator.setInterpolator(new LinearInterpolator());
        objectAnimator.setDuration(2500);
        objectAnimator.start();
    }

就能看到上面的效果了。
说了半天，答应的飞机呢？这样，我先上代码。还是那个自定义View，我只是改了一点点代码。

public class CirclePathAnimView extends View {

    private float mAnimatorValue;
    private PathMeasure mPathMeasure;
    private Path mDevPath;
    private Paint mPaint;
    private ValueAnimator mValueAnimator;
    private Bitmap airplayBitmap;

    public CirclePathAnimView(Context context) {
        this(context, null);
    }

    public CirclePathAnimView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CirclePathAnimView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setLayerType(LAYER_TYPE_SOFTWARE, null);//关闭硬件加速
        //初始化画笔
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(getResources().getDimension(R.dimen.dp_2));
        mPaint.setColor(getResources().getColor(R.color.colorPrimary));

        //飞机图片
        airplayBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.airplay);

        //画真正显示的path
        mDevPath = new Path();


        //开始动画，当然当前动画你可以单独写成一个方法
        mValueAnimator = ValueAnimator.ofFloat(0, 1);
        mValueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
        mValueAnimator.setDuration(3000);
        mValueAnimator.setRepeatCount(-1);
        mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                mAnimatorValue = (float) valueAnimator.getAnimatedValue();
                invalidate();
            }
        });
        mValueAnimator.start();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        int radius = 0;
        if (width >= height) {
            radius = height / 2 - height / 8;
        } else {
            radius = width / 2 - width / 8;
        }
        //绘制path
        //先画圆的path，但是这个圆只是用来计算
        Path circlePath = new Path();
        circlePath.addCircle(width / 2, height / 2, radius, Path.Direction.CW);


        //计算圆的path的长度
        mPathMeasure = new PathMeasure(circlePath, true);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float length = mPathMeasure.getLength();
        float stop = length * mAnimatorValue;
        //在0到0.5以前，起点不变，0.5到1，起点开始向终点靠拢。
        float start = (float) (stop - ((0.5 - Math.abs(mAnimatorValue - 0.5)) * length));

        mDevPath.reset();
        mPathMeasure.getSegment(start, stop, mDevPath, true);
        canvas.drawPath(mDevPath, mPaint);

        Matrix matrix=new Matrix();
        mPathMeasure.getMatrix(stop,matrix,PathMeasure.POSITION_MATRIX_FLAG|PathMeasure.TANGENT_MATRIX_FLAG);
        matrix.preTranslate(-airplayBitmap.getWidth()/2,-airplayBitmap.getHeight()/2);

        canvas.drawBitmap(airplayBitmap,matrix,mPaint);
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        mValueAnimator.cancel();
        mValueAnimator = null;
    }
}

在构造方法中，我们先获取图片

airplay.png

airplayBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.airplay);

在onDraw中，我们把飞机画上去。

        Matrix matrix=new Matrix();
        mPathMeasure.getMatrix(stop,matrix,PathMeasure.POSITION_MATRIX_FLAG|PathMeasure.TANGENT_MATRIX_FLAG);
        matrix.preTranslate(-airplayBitmap.getWidth()/2,-airplayBitmap.getHeight()/2);
        canvas.drawBitmap(airplayBitmap,matrix,mPaint);

就这么简单。
看是这么简单，但是里面有个getMatrix函数我们必须要讲一讲。

五、getMatrix函数

getMatrix函数可以获得某一长度终点的坐标以及该坐标的正切值的矩阵。

public boolean getMatrix(float distance, Matrix matrix, int flags)

distance指的是path长度，
matrix指的是容器，计算后会把结果存进来。
flags指的是要存入哪些内容，POSITION_MATRIX_FLAG是位置信息，TANGENT_MATRIX_FLAG是切边信息。

微信图片_20190222165911.png

图片中箭头代表飞机，飞机没飞一点，就要调整角度，他的方向基本要与切线一样，那么根据图中所示，角a+角b=90度，角a=角c，所以飞机头要掉角c这么多度数，而getMatrix就是能获取这些正切值。结合画图也有传Matrix的方式，刚刚好。

有时间再更新个支付宝支付成功的动画，嘻嘻。
对了，不喜勿喷哦！，我的心脏很弱小的。