8

我想为路径的绘制设置动画，即让它逐渐出现在屏幕上。我正在使用画布，到目前为止我最好的猜测是使用 ObjectAnimator 来处理动画。但是，我无法弄清楚如何在 onDraw() 方法中实际绘制路径的相应段。有没有一种方法可以做到这一点？我需要为此涉及路径效果吗？

编辑：使用 DashPathEffect 并在动画中设置其“开”和“关”间隔以覆盖我们要为该步骤绘制的路径部分似乎在这里工作，但它需要为每个步骤分配一个新的 DashPathEffect动画。如果有更好的方法，我会留下这个问题。

4

3 回答 3

13

回答我自己的问题，因为我想出了一个令人满意的方法来做到这一点。

诀窍是使用 anObjectAnimator来逐步改变当前笔画的长度，并使用 aDashPathEffect来控制当前笔画的长度。将DashPathEffect其 dashes 参数最初设置为以下内容：

float[] dashes = { 0.0f, Float.MAX_VALUE };

第一个浮动是可见笔划的长度，第二个是不可见部分的长度。第二长度选择得非常高。因此，初始设置对应于完全不可见的笔划。

然后每次对象动画器更新笔画长度值时，DashPathEffect都会使用新的可见部分创建一个新的并设置为 Painter 对象，并且视图无效：

dashes[0] = newValue;
mPaint.setPathEffect(new DashPathEffect(dashes, 0));
invalidate();

最后，onDraw() 方法使用这个painter来绘制路径，它只包含我们想要的部分：

canvas.drawPath(path, mPaint);

我看到的唯一缺点是我们必须在每个动画步骤中创建一个新的 DashPathEffect（因为它们不能重复使用），但总体而言这是令人满意的 - 动画很好而且流畅。

于 2012-10-14T08:25:41.447 回答
1 
package com.nexoslav.dashlineanimatedcanvasdemo;

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.animation.LinearInterpolator;

import androidx.annotation.Nullable;

public class CustomView extends View {
    float[] dashes = {30, 20};
    Paint mPaint;
    private Path mPath;

    private void init() {

        mPaint = new Paint();
        mPaint.setColor(Color.BLACK);
        mPaint.setStrokeWidth(10f);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setPathEffect(new DashPathEffect(dashes, 0));

        mPath = new Path();
        mPath.moveTo(200, 200);
        mPath.lineTo(300, 100);
        mPath.lineTo(400, 400);
        mPath.lineTo(1000, 200);
        mPath.lineTo(1000, 1000);
        mPath.lineTo(200, 400);

        ValueAnimator animation = ValueAnimator.ofInt(0, 100);
        animation.setInterpolator(new LinearInterpolator());
        animation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                Log.d("bla", "bla: " + valueAnimator.getAnimatedValue());
                mPaint.setPathEffect(new DashPathEffect(dashes, (Integer) valueAnimator.getAnimatedValue()));
                invalidate();
            }
        });
        animation.setDuration(1000);
        animation.setRepeatMode(ValueAnimator.RESTART);
        animation.setRepeatCount(ValueAnimator.INFINITE);
        animation.start();
    }

    public CustomView(Context context) {
        super(context);
        init();
    }


    public CustomView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

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

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

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

        canvas.drawPath(mPath, mPaint);
    }
}
于 2020-02-24T21:29:29.240 回答
0

据我所知，唯一的方法是从一个空路径开始，并有一个可运行的，以定义的间隔将点附加到路径，直到它完成。

于 2012-10-07T14:54:35.990 回答