Question

我正在尝试创建一个自定义图像视图，它接受一个点数组并一个接一个地在图像上绘制它们（不是一次全部）

我做了以下实施，一次性吸引所有圈子。

public class CustomImageView extends ImageView {

    private static final int RADIUS = 20;

    private List<Point> points = new ArrayList<>();
    private Paint paint;

    public CustomImageView(Context context, AttributeSet attrs) {
        super(context, attrs);

        paint = new Paint();
        paint.setColor(Color.RED);

        points.add(new Point(100, 100));
        points.add(new Point(200, 200));
        points.add(new Point(300, 300));
        points.add(new Point(400, 400));
    }

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

        if (!points.isEmpty()) {

            for (int i = 0; i < points.size(); i++) {
                Point point = points.get(i);
                canvas.drawCircle(point.x, point.y, RADIUS, paint);
            }
        }
    }
}

如何以一个小的延迟一个接一个地在图像上绘制上述虚拟点？

Answer 1

以下是使用ValueAnimator进行此操作的方法。

要记住的是，onDraw()可以在任何时候出于很多不同的原因被调用，所以你想要一些状态告诉你如何正确地绘制这个东西 now < / em>的。在我们的例子中，它将是mNumCirclesToDraw。始终在onDraw()中检查该状态。

要使其工作的下一部分是创建一个ValueAnimator，它将在正确的时间更新此状态，然后调用invalidate()强制重绘。

以下是一个例子：

public class CustomImageView extends ImageView implements ValueAnimator.AnimatorUpdateListener { private static final int RADIUS = 20; private List<Point> points = new ArrayList<>(); private Paint paint; private ValueAnimator mValueAnimator; private int mNumCirclesToDraw = 0; public CustomImageView(Context context, AttributeSet attrs) { super(context, attrs); paint = new Paint(); paint.setColor(Color.RED); points.add(new Point(100, 100)); points.add(new Point(200, 200)); points.add(new Point(300, 300)); points.add(new Point(400, 400)); setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { mValueAnimator = ValueAnimator.ofInt(0, points.size()); mValueAnimator.setDuration(500 * points.size()); mValueAnimator.setInterpolator(new LinearInterpolator()); mValueAnimator.addUpdateListener(CustomImageView.this); mValueAnimator.start(); } }); } @Override public void onAnimationUpdate(ValueAnimator animation) { int val = (Integer) animation.getAnimatedValue(); if (val != mNumCirclesToDraw) { mNumCirclesToDraw = val; invalidate(); } } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (!points.isEmpty()) { for (int i = 0; i < mNumCirclesToDraw; i++) { Point point = points.get(i); canvas.drawCircle(point.x, point.y, RADIUS, paint); } } } }

在您的项目中尝试此操作。点击CustomImageView开始动画。

Android动画绘制自定义ImageView

1 个答案: