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的方式，刚刚好。
有时间再更新个支付宝支付成功的动画，嘻嘻。
对了，不喜勿喷哦！，我的心脏很弱小的。
