动画进阶（一）

利用PathMesaure实现路径动画：

• 初始化：
  • PathMeasure类似一个计算器，可以计算出指定路径的一些信息，比如路径总长、指定长度对应的坐标点等
• 初始化方法一：
  • 对他进行初始化只需要创建一个PathMeasure对象即可

PathMeasure pathmeasure = new PathMeasure();
setPath(Path path, boolean forceClosed);

• 初始化方法二：

PathMeasure(Path path, boolean forceClosed);

• boolean forceClosed：表示Path最终是否需要闭合，如果为true，则不管关联的path是否闭合，都会被闭合。但是forceClosed参数被绑定的Path都不会产生影响，因为他影响的是计算的path并不是绘制的path

简单函数使用：

• 获取计算的路径长度
  • public float getLength();

eg:

public void init(){
    paint = new Paint();
    paint.setColor(Color.BLUE);
    paint.setStyle(Paint.Style.STROKE);
    pathMeasure = new PathMeasure();
    pathMeasure1  = new PathMeasure();
}
@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.setPath(path, true);
    pathMeasure1.setPath(path, false);
    System.out.println(pathMeasure.getLength());
    System.out.println(pathMeasure1.getLength());
    canvas.drawPath(path,paint);
}
//输出：400.0  300.0
所以froceClosed设置为true or false并不影响他的绘制，只会影响他的计算路径的长度

• 判断测量Path时是否计算闭合(也就是上面提到的参数是否被设置为true）：

  • public boolean isClosed()

• 跳转到Path的下一条曲线：

  • public boolean nextContour()

eg:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.translate(150, 150);
    path.addRect(-50, -50, 50, 50, Path.Direction.CW);
    canvas.drawPath(path,paint);
    pathMeasure.setPath(path, false);
    path.addRect(-100, -100, 100 , 100, Path.Direction.CW);
    canvas.drawPath(path,paint);
    pathMeasure.setPath(path, false);
    path.addRect(-120, -120, 120, 120, Path.Direction.CW);
    pathMeasure.setPath(path, false);
    canvas.drawPath(path,paint);
    do{
        float len = pathMeasure.getLength();
        System.out.println(len);
    }while(pathMeasure.nextContour());
}

通过这个nextContour()函数得到的曲线的顺序与Path中添加的顺序相同
结果 400.0  800.0  900.0

• 用于截取整个Path中的某个片段，通过startD和stopD来控制截取的长度，并将这个街区的片段保存到参数dst中，最后一个参数startWithMoveTo表示起点是否使用moveTo将路径的新起始点移到结果Path的起始点，通常设置为true，保证每次的dst中的path都是完整的，如果设置为false，那么每次都从上一个路径的终点开始算起，保证连续性，所以会有连在一起的效果

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

• 注意：如果startD和stopD不在取值范围[0, getLength()]范围内的话或者startD==stopD，那么返回值为false，而且不会改变dst的内容。

• 开启硬件加速功能后，绘图功能将出现问题，所以需要关闭硬件加速功能，可以在构造函数中调用setLayerType(LAYER_TYPE_SOFTWARE,null)禁用硬件加速功能。

@Override
protected void onDraw(Canvas canvas) {
    setLayerType(LAYER_TYPE_SOFTWARE , null);
    super.onDraw(canvas);
    canvas.translate(100, 100);
    path.addRect(-50,-50, 50, 50, Path.Direction.CW);
    Path dst = new Path();
    pathMeasure.setPath(path,false);
    pathMeasure.getSegment(0, 150, dst, true);
    canvas.drawPath(dst, paint);
}
截取方向和路径生成方向一致

• 当dst不为空且将startWithMoveTo设置为false：

从原理的角度可知startWithMoveTo就是在添加新路径前是否调用Path.MoveTo()函数将路径的起始点改为新路径的起始点，如果设置为true,则将路径的起始点移动到新添加路径的起始点，如果为false，那么就将前一个路径的终点设置为新路径的起始点保证连续性。

eg: 支付宝路径加载动画

public MySegmentView(Context context, AttributeSet attrs) {
    super(context, attrs);
    setLayerType(LAYER_TYPE_SOFTWARE ,null);


    paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(4);
    paint.setColor(Color.BLACK);


    dstPath = new Path();
    circlePath = new Path();
    circlePath.addCircle(100, 100, 50, Path.Direction.CW);


    pathMeasure = new PathMeasure(circlePath, true);
    ValueAnimator animator = ValueAnimator.ofFloat(0, 1);
    animator.setRepeatCount(ValueAnimator.INFINITE);
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            mCurAnimValue  = (Float)animation.getAnimatedValue();
            invalidate();
        }
    });
    animator.setDuration(2000);
    animator.start();
}


@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawColor(Color.WHITE);
    float stop  = pathMeasure.getLength() * mCurAnimValue;
    //清空之前生成的路径
    dstPath.reset();
    pathMeasure.getSegment(0, stop, dstPath, true);
    canvas.drawPath(dstPath, paint);
}

• 对上面的例子进行修改，成为一个加载动画：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawColor(Color.WHITE);
    float length = pathMeasure.getLength();
    float stop  = pathMeasure.getLength() * mCurAnimValue;
    //当进度小于0.5时start=0, 进度大于0.5时，start  = 2 * value - 1
    float start = (float) (stop - ((0.5 - Math.abs(mCurAnimValue - 0.5))*length));
    //清空之前生成的路径
    dstPath.reset();
    pathMeasure.getSegment(start, stop, dstPath, true);
    canvas.drawPath(dstPath, paint);
}

• 获取路径上某一长度的位置以及该位置的正切值
  • public boolean getPosTan(float distance, float[] pos, float[] tan);
  • distance：距离path起始点的长度，取值范围为0<=distance<=getLength
  • pos[]：该点的坐标值，当前点在画布上的位置有两个数值，分别为x, y坐标，pos[0]表示x坐标，pos[1]表示y坐标
  • tan[]：表示该点的正切值，首先数学中某点的正切值为 tana = y/x, 在这个函数中返回的是单位圆上符合该点正切值的点的坐标
  • 获取到正切值之后，通过Math类中的atan函数和atan2函数，根据一个正切值求反正切即弧度和角度

eg:

pathMeasure.getPosTan(stop, pos, tan);
float degrees = (float) (Math.atan2(tan[1], tan[0]) * 180.0 /Math.PI);
Matrix matrix = new Matrix();matrix.postRotate(degrees, bitmap.getWidth()/2, bitmap.getHeight()/2);
matrix.postTranslate(pos[0], pos[1]);

• 注意在使用getPosTan的时候，必须要事先分配数组空间

• 通过Math.atan2(tan[1], tan[0])函数得到的是弧度值，需要转化

• 获得路径上某一长度的位置以及该位置的正切值矩阵

  • public boolean getMatrix(float distance, Matrix matrix, int flags)
  • distance：距离path起始点的长度
  • matrix：根据flags封装好的matrix会根据flags的设置而存入不同的内容
  • flags：用于指定哪些内容会存入matrix中，flags的值有两个：PathMeasure.POSITION_MATRIX_FLAG表示获取位置的信息， pathMeasure.TANGENT_MATRIX_FLAG表示获取切边信息，使得图片按照path旋转，可以指定一个标签或者同时指定标签
  • getPosTan()函数把获取到的位置信息和切边信息分别保存在pos和tan数组中，而getMatrix()函数则直接将其保存到matrix数组中。