android高级UI之PathMeasure<二>Path测量实战（各种Loading效果）

在上一次https://www.cnblogs.com/webor2006/p/15488224.html已经学习上PathMeasure的基础了，这次则针对它进行一些实际效果的操练加以巩固。

实战：各种Loading效果：

Loading一：让箭头图片沿圆轨迹走

效果：

首先来实现在上篇开头所展示的这个效果：

 

如果对于上一篇的整体基础都了解之后，实现这样沿路径轨迹的效果那就很轻松了。

实现：

1、新建View：

这里还是基于上一次学习的工程往上继续垒代码：

2、 画园：

首先先准备一个中心的圆，待会它是就图片需要沿着运转的轨迹：

package com.cexo.pathmeasurestudy;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.Nullable;

/**
 * Loading效果一：箭头图片沿圆路径旋转
 */
public class LoadingView extends View {

    private int viewWidth;
    private int viewHeight;
    private Paint circlePaint;

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

    public LoadingView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, -1);
    }

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

    private void init(Context context) {
        circlePaint = new Paint();
        circlePaint.setColor(Color.RED);
        circlePaint.setStrokeWidth(5);
        circlePaint.setStyle(Paint.Style.STROKE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.WHITE);

        canvas.translate(viewWidth / 2, viewHeight / 2);

        Path path = new Path();
        //Path.Direction.CW顺时针方向画圆
        path.addCircle(0, 0, 200, Path.Direction.CCW);
        canvas.drawPath(path, circlePaint);
    }

    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        viewWidth = w;
        viewHeight = h;
    }
}

比较简单，效果如下：

3、导入图片：

接下来则将需要沿这个圆轨迹移动的图片导进来：

4、将图片绘制在圆轨迹上：

此时的效果：

此时图片的绘制点则是在圆心上，不是咱们所预期的效果，应该是绘制在圆的轨迹上才行，此时很自然的就可以借助上一次学习的Path的测量，可以得到这俩值：

 

其中测量时的forceClosed参数的含义就不过多说明了，可以参考上一个基础篇，接下来的重点就是如何借助这个测量得到的pos和tan来将咱们的图片绘制在圆轨迹上了，这里可以将图片绘制的left和top改为它试试：

此时运行看一下：

嗯，基本上是已经在圆轨迹上了，但是应该是让整个图片的中心在轨迹上，而不是图片的(0,0)坐标点：

 

这个简单，减去掉图片的宽高的一半既可：

此时再运行：

5、让图片进行角度旋转：

接下来重点就是要来处理图片的角度旋转了，很明显目前图片的角度是不对的，需要让箭头沿着圆的轨迹走才可以，那首先得要算出圆指定位置的角度才行对吧，这个简单，在上一次基础篇中已经打好这块的基础了：

这里就不过多说明，先来得到角度：

而要想让图片进行指定角度的旋转，此时在绘制图片时就得用另一个API了，这个也在上一篇有介绍过：

这里就直接上代码了：

此时运行：

 

貌似平移的效果木有了，原来咱们平移不是用的它么？

而目前绘制图片用的是matrix的api了，如何对它进行平移呢？其实matrix里有专门的api了，如下： 

不过，发现貌似这个箭头是要往逆时针旋转呀，这是因为我们在绘制圆时就是指定的逆时针：

 

所以，咱们改一下它，用逆时针旋转貌似更加自然一些：

6、让箭头沿轨迹动起来：

那接下来还差最后一步，如何让箭头动起来，这块就不难了，因为目前我们已经处理好圆的起始位置了：

 

我们只要让这个位置不断的进行增加，那不就可以实现一个动态的效果么？具体做法如下：

运行效果：

至此，整个效果完成，是不是在打好基础之后，实现这样的效果非常之顺其自然？

Loading二：

效果：

接下来实现第二个Loading效果，也是上一篇中提到过的：

而要实现这样的效果，就得用这个API了：

掌握基础之后其实现也不难。

实现：

1、新建View：

2、绘制圆：

跟上一个Loading效果一样，先在View的中心绘一个一模一样的圆：

package com.cexo.pathmeasurestudy;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.Nullable;

/**
 * Loading效果一：利用getSegment() api实现Path的截取
 */
public class LoadingView2 extends View {

    private int viewWidth;
    private int viewHeight;
    private Paint circlePaint;

    //region 构造
    public LoadingView2(Context context) {
        this(context, null);
    }

    public LoadingView2(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, -1);
    }

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

    private void init(Context context) {
        circlePaint = new Paint();
        circlePaint.setColor(Color.RED);
        circlePaint.setStrokeWidth(5);
        circlePaint.setStyle(Paint.Style.STROKE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.WHITE);

        canvas.translate(viewWidth / 2, viewHeight / 2);

        Path path = new Path();
        //Path.Direction.CW顺时针方向画圆
        path.addCircle(0, 0, 200, Path.Direction.CW);
        canvas.drawPath(path, circlePaint);
    }

    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        viewWidth = w;
        viewHeight = h;
    }
}

效果就不贴出来了。

2、截取Path指定位置进行显示：

这里先实现一个Path截取的静态效果：

 

运行看一下：

看到了么，是不是显示的就是其圆中截取的从100到200长度的位置？ 

3、将截段动态化：

接下来要实现目标动态的效果，则就需要来动态控制从Path中哪截取对吧，也就是：

那这里可以使用一个属性动画ValueAnimator来弄一个系数，然后再不断进行界面的刷新，如下：

接下来则就根据这个系数来动态算一下开始位置和结束位置，首先咱们结束位置这么来定：

这个容易理解，那。。对于start这个参数如何确定呢？它肯定是要小于stop值的，所以它肯定是这样的：

其中标问号的这个值的计算就是最关键的，这里先来看一下预期的效果，等于是路径先走一半圆：

接着再超过一半圆的场景下，则开始让整个圆路径变短直到消失为止：

这个用文字可能不太好描述，还是以一个慢动作再来体会一下这个效果背后的逻辑：

具体这块的公式就不推导了，一句代码，如下：

此时运行看一下效果：

看着有点卡对吧，是因为录屏软件的原因。。

4、调试理解代码：

对于这个效果的实现，其实最难理解的就是这个Path开始点位置的确定，也就是：

难理解也得想办法理解它，通常当你有段代码死活都无法理解时，此时如果知道答案时最好的方式就是自己通过调试一点点来理解，这里以四个条件来进行分析，为了便于计算，这里假设整个圆Path测量的总长度为100。

a、animatorValue=0.3：

stop=100 * 0.3 = 30；

start=stop - ((0.5 - 0.2) * 100) = 30 - 30 = 0；

所以此时绘制的路径区域为：

b、animatorValue=0.5：

stop=100 * 0.5 = 50；

start=stop - ((0.5 - 0) * 100) = 50 - 50 = 0；

所以此时绘制的路径区域为：

c、animatorValue=0.7：

stop=100 * 0.7 = 70；

start=stop - ((0.5 - 0.2) * 100) = 70 - 30 = 40；

所以此时绘制的路径区域为：

也就是，当走过半圆的路径之后，start的开始截取的位置也开始变化了。

d、animatorValue=1.0：

stop=100 * 1.0 = 100；

start=stop - ((0.5 - 0.5) * 100) = 100 - 0 = 100；

所以此时绘制的路径区域为：

通过这么几个条件的分析，是不是对这句代码的理解就会更加的简单了？

5、优化代码：

对于目前的代码实现上其实有一些不太好的地方，就是：

对于整个圆的测量其实只要测一次就可以了，没必要放在onDraw()中每次都测量，这样性能也不是太好，所以这里抽离一下：

 

此时运行，你会发现出bug了。。

卡住了。。另外你再点back键时，发现有时还会anr：

这是为啥呢？其实是我们目标的这个Path在绘制时木有进行重置造成，修改如下：

为啥呢？通过Android Studio的Profile app发现，内存爆增。。

而看一下Path.reset()方法的说明：

哦，大致明白了，也就是由于onDraw()方法执行非常之频繁，而Path如果你不主动reset()的话，那么你之前绘制的元素肯定是还在的，那么当onDraw()函数不断执行很明显内存只会爆增的，最终达到界面卡死从而有ANR的情况出现了，这一点必须要注意。另外这里还有一个细节就是关于硬件加速的场景需要加这么一句话：

关于这块我木有测出来，先这么写吧，待之前遇到了这种问题到时再回头来理解它。

Loading三：

效果：

接下来再来实现这样的一个Loading效果：

有了上一个Loading的基础，是不是实现这个就不难了。

实现：

1、新建View：

2、画个圆：

package com.cexo.pathmeasurestudy;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;

/**
 * Loading效果三：继续利用getSegment() api实现Path的截取
 */
public class LoadingView3 extends View {

    private int viewWidth;
    private int viewHeight;
    private Paint circlePaint;

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

    public LoadingView3(Context context, AttributeSet attrs) {
        this(context, attrs, -1);
    }

    public LoadingView3(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }


    private void init() {
        circlePaint = new Paint();
        circlePaint.setColor(Color.RED);
        circlePaint.setStrokeWidth(5);
        circlePaint.setStyle(Paint.Style.STROKE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.WHITE);

        canvas.translate(viewWidth / 2, viewHeight / 2);

        Path path = new Path();
        //Path.Direction.CW顺时针方向画圆
        path.addCircle(0, 0, 200, Path.Direction.CW);
        canvas.drawPath(path, circlePaint);
    }

    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        viewWidth = w;
        viewHeight = h;
    }
}

3、绘制圆一圈：

其实整个效果就是由两个状态组成，一个是绘制圆路径，一个是由整个圆路径慢慢转变消失，所以这里首先先沿圆的轨迹绘制一圈，比较简单：

是不是跟咱们上面实现的代码基本雷同对吧，运行一下：

 

4、让圆消失一圈：

接下来则反着进行动态处理，也就是让满圆归0，实现起来也非常简单，先来增加两个状态：

然后在属性动画结束时，主动切换一个当前的绘制状态：

接下来在绘制这块也需要根据状态改变进行一下处理：

此时运行效果就如开始看到的了，如果你对于PathMeasure基础打牢之后，对于这样的效果实现还是比较简单的了。 

总结：

整体来说这次的操练都不是太难，但是对于PathMeasure的巩固还是挺有帮助的，下一次则来实现如下两个效果进一步对它进行巩固，稍稍要麻烦一些：

划船这个来自于网上的一个开源项目，用作学习还是很不错的~~