Android自定义view利用PathEffect实现动态效果

下面是Android自定义view利用PathEffect实现动态效果的完整攻略。

什么是PathEffect

PathEffect是Android提供的一个用于修改路径轮廓的工具类，常用于实现路径的虚线、路径画笔沿着路径跑的效果等。

其主要作用是修改路径的轮廓，即在路径的基础上修改路径的形状，使路径的形状更加多样化。

使用PathEffect实现动态效果

PathEffect可以用于实现动态效果，可以通过修改路径的虚线方式来实现动态效果，具体实现过程如下：

1. 自定义实现一个View，重写onDraw方法。

2. 创建一个路径Path。

3. 创建一个路径效果PathEffect，这里我们使用DashPathEffect作为路径效果。

4. 把路径效果设置给画笔Paint。

5. 在onDraw方法中使用画笔Paint和路径Path来绘制图形。

下面是示例代码：

public class CustomView extends View {

    private Paint mPaint;
    private Path mPath;
    private int mPhase;

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

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

    public CustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        // 初始化画笔
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(5);

        // 初始化路径
        mPath = new Path();
        mPath.moveTo(100, 100);
        mPath.lineTo(400, 100);
        mPath.lineTo(400, 400);
        mPath.lineTo(100, 400);
        mPath.close();

        // 初始化路径效果
        PathEffect effect = new DashPathEffect(new float[]{20, 10, 5, 10}, mPhase);
        mPaint.setPathEffect(effect);
    }

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

        canvas.drawPath(mPath, mPaint);

        // 更新路径效果的偏移量
        mPhase += 5;
        if (mPhase >= 60) {
            mPhase = 0;
        }

        // 更新画笔的路径效果
        PathEffect effect = new DashPathEffect(new float[]{20, 10, 5, 10}, mPhase);
        mPaint.setPathEffect(effect);

        // 重绘
        invalidate();
    }
}

上面的代码实现了一个简单的矩形路径动态显示的效果，具体实现过程如下：

1. 初始化画笔和路径，其中使用了DashPathEffect创建路径效果。

2. 在onDraw方法中先绘制路径。

3. 在onDraw方法中更新路径效果的偏移量，使得路径效果动态显示。

4. 更新画笔的路径效果，再次调用invalidate方法让View重绘。

运行上面的代码，可以看到一个矩形路径动态显示的效果。

示例二：使用PathMeasure实现动态效果

除了使用PathEffect实现动态效果之外，还可以使用PathMeasure类实现动态效果。

具体实现过程如下：

1. 自定义实现一个View，重写onDraw方法。

2. 创建一个路径Path，并在路径上添加需要绘制的图形。

3. 创建一个PathMeasure实例，并把路径Path关联到PathMeasure中。

4. 绘制路径的总长度。

5. 在onDraw方法中使用画笔Paint和路径PathMeasure来绘制图形。

6. 在onDraw方法中使用ValueAnimator来动态改变路径长度，并使用invalidate方法进行重绘。

示例代码如下：

public class CustomView extends View {

    private Paint mPaint;
    private Path mPath;

    private PathMeasure mPathMeasure;
    private float mPathLength;

    private ValueAnimator mValueAnimator;

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

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

    public CustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        // 初始化画笔
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.BLUE);
        mPaint.setStrokeWidth(10);
        mPaint.setStyle(Paint.Style.STROKE);

        // 初始化路径
        mPath = new Path();
        mPath.moveTo(100, 100);
        mPath.lineTo(400, 100);
        mPath.lineTo(400, 400);
        mPath.lineTo(100, 400);
        mPath.close();

        // 创建PathMeasure实例
        mPathMeasure = new PathMeasure(mPath, false);

        // 获取路径的长度
        mPathLength = mPathMeasure.getLength();

        // 创建ValueAnimator实例，动态改变路径长度
        mValueAnimator = ValueAnimator.ofFloat(0, mPathLength);
        mValueAnimator.setDuration(2000);
        mValueAnimator.setInterpolator(new LinearInterpolator());
        mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        mValueAnimator.addUpdateListener(animation -> {
            Float value = (Float) animation.getAnimatedValue();
            mPathMeasure.getSegment(0, value, mPath, true);
            invalidate();
        });

        // 启动动画
        mValueAnimator.start();
    }

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

        canvas.drawPath(mPath, mPaint);
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        // 停止动画
        mValueAnimator.cancel();
    }
}

上面的代码实现了一个简单的矩形路径动态显示的效果，具体实现过程如下：

1. 初始化画笔和路径。

2. 创建PathMeasure实例，并把路径Path关联到PathMeasure中，获取路径的长度。

3. 创建ValueAnimator实例，动态改变路径长度。

4. 在onDraw方法中先绘制路径。

5. 在onDraw方法中使用ValueAnimator来动态改变路径长度。

运行上面的代码，可以看到一个矩形路径从左往右动态显示的效果。

希望上面的攻略能够帮助到您。