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 开始动画。

Android 在自定义 ImageView 中动画绘图

Android animate drawing in a custom ImageView

android

android-custom-view