Android在自定义ImageView中动画绘制

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()可以在任何时候调用，因此您希望有一些状态，告诉您如何立即绘制正确的东西。在我们的情况下，它将是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以启动动画。