Android自定义View基础--PathMeasure 实现Loading动画

每次我觉得学一个知识点都是很枯燥的，为了更好，更快的学习一个知识点，就是先告诉大家这个知识点能实现什么？所以我一般情况下先用最简单的demo给大家展示效果。

按照惯例先上动图

直接上代码

代码中注释很详细

public class PathMeasureView extends View {

    private Paint mPaint = new Paint();
    private final float mRadius = 120;//圆的半径
    private final int duration = 2000;//动画时长
    private float start; //路径开始位置
    private float end;   //路径的结束位置
    private PathMeasure measure;
    private Path path;
    private Path dst;
    
    public PathMeasureView(Context context) {
        this(context,null);
    }

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

    public PathMeasureView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        //设置画笔样式为描边
        mPaint.setStyle(Paint.Style.STROKE);
        //设置颜色为红色
        mPaint.setColor(Color.RED);
        //设置画笔宽度
        mPaint.setStrokeWidth(15);

        //新建一个路径
        path = new Path();
        //添加圆为路径 参数 ： x坐标 y坐标 半径 顺势针/逆时针
        path.addCircle(400,500, mRadius,Path.Direction.CW);
        //这是我们今天的主角，PathMeasure 关联上面的圆。 forceClosed 为true
        measure = new PathMeasure(path,true);

        //创建属性动画 动画的值 就是 从0 到 measure.getLength()
        //measure.getLength() 就是上面圆的路径的总长度
        ValueAnimator animator = ValueAnimator.ofFloat(0,measure.getLength());
        //根据getAnimatedValue 改变要画弧线的开始与结束位置
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                start = (float) animation.getAnimatedValue();
                end = start*3/2;
                if (end -start > 150){
                    end = start+150;
                }
                if (end >measure.getLength()){
                    end = measure.getLength();
                }
                invalidate();
            }
        });
        //添加线性插值器
        animator.setInterpolator(new LinearInterpolator());
        //设置重复次数为3
        animator.setRepeatCount(3);
        //设置动画时长
        animator.setDuration(duration);
        animator.start();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //再建一个路径
        dst = new Path();
        //通过PathMeasure的getSegment方法截取一段路径保存在dst路径中
        measure.getSegment(start,end,dst,true);
        //画出截取的路径
        canvas.drawPath(dst,mPaint);
    }
}

在MainActivity中如下调用

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new PathMeasureView(this));
    }


}

PathMeasure 相关知识点

最后说最无聊的东西
定义:PathMeasure 是 Android SDK提供了一个非常有用的API来帮助开发者实现这样一个Path路径点的坐标追踪，这个类就是PathMeasure，它可以认为是一个Path的坐标计算器。

使用方法：PathMeasure 使用的时候必须关联一个Path
PathMeasure的构造函数有两个

有参数的构造函数：public PathMeasure(Path path, boolean forceClosed)
path就是需要关联的路径，
forceClosed：forceClosed如果为true，则路径将被视为“闭合”，即使其轮廓未显式闭合。

无参构造函数：PathMeasure measure = new PathMeasure();
使用无参的构造函数也需要关联Path
measure.setPath(path, forceClosed);//解释跟有参数的一样

常用的方法：

上面例子中用到了

public float getLength() //获取该路径的长度
//截取路径中从startD开始到stopD结束的路径保存到dst路径中
public boolean getSegment(float startD, float stopD, Path dst, boolean startWithMoveTo)

其他方法

public boolean nextContour()//移动到路径中的下一个轮廓。如果存在则返回true
//TODO 获取distance 距离下 该点的坐标保存在 pos[] 里 该点的角度保存在tan[]中 这个可以做一个小汽车在路上跑的动画
public boolean getPosTan(float distance, float pos[], float tan[]) 
//TODO
public boolean getMatrix(float distance, Matrix matrix, int flags)

PathMeasure 还可以做出如下效果 源码中有，可以去下载

源码下载
在MileAndroid/CustomVIew/CustomViewGroup/文件夹下面

未完待续