for loop does not "grow" the circle. I need to "grow" a circle

Question

I am trying to write an android application that draws Circles at random positions over and over forever. This is already done in my code. The next objective for me is to slowly animate these circles to make them "grow" onto the screen. Basically increment the radius of the circle from 0 to 300 very fast I did this by creating a for loop like this.

for(int i = 0;i< 300; i++){
            canvas.drawCircle(randomWidthOne, randomHeightOne,i, newPaint);
        }

unfortunately this does not perform the desired result. Instead it just displays the circles at the end radius of 300. Here is my code for the class that draws the circles. Please let me know if there is anything in the class that is interfering with what I am trying to accomplish.

public class SplashLaunch extends View{
    Handler cool = new Handler();
    DrawingView v;
    Paint newPaint = new Paint();
    int randomWidthOne = 0;
    int randomHeightOne = 0;
    private float radiusNsix = 10;
    private float radiusNfive = 25;
    private float radiusNfour = 50;
    private float radiusNthree = 100;
    private float radiusNtwo = 150;
    private float radiusNone = 200;
    private float radiusZero = 250;
    private float radiusOne = 300;
    final int redColorOne = Color.RED;
    final int greenColorOne = Color.GREEN;
    private static int lastColorOne;
    double startTime = System.currentTimeMillis();
    ObjectAnimator radiusAnimator;
    private final Random theRandom = new Random();
    public SplashLaunch(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }

    private final Runnable circleUpdater = new Runnable() {
        @Override 
        public void run() {
            lastColorOne = theRandom.nextInt(2) == 1 ? redColorOne : greenColorOne;
            newPaint.setColor(lastColorOne); 
            cool.postDelayed(this, 1000);
            invalidate();
        }
    };

    @Override
    protected void onAttachedToWindow(){
        super.onAttachedToWindow();
        cool.post(circleUpdater);
    }
    protected void onDetachedFromWindow(){
        super.onDetachedFromWindow();
        cool.removeCallbacks(circleUpdater);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
        canvas.drawColor(Color.WHITE);
        if(theRandom == null){
            randomWidthOne =(int) (theRandom.nextInt((int) Math.abs(getWidth()-radiusOne/2)) + radiusOne/2f);
            randomHeightOne = (theRandom.nextInt((int)Math.abs((getHeight()-radiusOne/2 + radiusOne/2f))));
        }else {
            randomWidthOne =(int) (theRandom.nextInt((int) Math.abs(getWidth()-radiusOne/2)) + radiusOne/2f);
            randomHeightOne = (theRandom.nextInt((int)Math.abs((getHeight()-radiusOne/2 + radiusOne/2f))));
        }
        for(int i = 0;i< 300; i++){
            canvas.drawCircle(randomWidthOne, randomHeightOne,i, newPaint);
        }
    }




    public void setRadiusOne(float value){
        this.radiusOne = value;
        invalidate();
    }


    public int startAnimation(int animationDuration) {

        if (radiusAnimator == null || !radiusAnimator.isRunning()) {

            // Define what value the radius is supposed to have at specific time values
            Keyframe kf0 = Keyframe.ofFloat(0f, 0f);
            Keyframe kf2 = Keyframe.ofFloat(0.5f, 180f);
            Keyframe kf1 = Keyframe.ofFloat(1f, 360f);

            // If you pass in the radius, it will be calling setRadius method, so make sure you have it!!!!!
            PropertyValuesHolder pvhRotation = PropertyValuesHolder.ofKeyframe("radiusOne", kf0, kf1, kf2);
            radiusAnimator = ObjectAnimator.ofPropertyValuesHolder(this, pvhRotation);
            radiusAnimator.setInterpolator(new LinearInterpolator());
            radiusAnimator.setDuration(animationDuration);
            radiusAnimator.start();
        }
        else {
            Log.d("Circle", "I am already running!");
        }
        return animationDuration;
    }

    public void stopAnimation() {
        if (radiusAnimator != null) {
            radiusAnimator.cancel();
            radiusAnimator = null;
        }
    }

    public boolean getAnimationRunning() {
        return radiusAnimator != null && radiusAnimator.isRunning();
    }

}

Answer 1

Have a look at the property animator.

Answer 2

Call this.invalidate() to force redraw on next frame:

private int x = -1;
private int y = -1;
private int r = -1;
private int stepsLeft = 300;


@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (x < 0) {                             // generate new circle
        int[] xy = generateXY();
        x = xy[0];
        y = xy[1];
        r = 0;
    }
    if (stepsLeft > 0) {
        canvas.drawColor(Color.WHITE);
        canvas.drawCircle(x, y, r, newPaint); // draw circle with new radius
        r++;                                  // increment radius
        stepsLeft--;                          // decrement steps
        this.invalidate();                    // invalidate the view
    }
}



private int[] generateXY() {
    if (theRandom == null) {
        randomWidthOne =(int) (theRandom.nextInt((int) Math.abs(getWidth()-radiusOne/2)) + radiusOne/2f);
        randomHeightOne = (theRandom.nextInt((int)Math.abs((getHeight()-radiusOne/2 + radiusOne/2f))));
    } else {
        randomWidthOne =(int) (theRandom.nextInt((int) Math.abs(getWidth()-radiusOne/2)) + radiusOne/2f);
        randomHeightOne = (theRandom.nextInt((int)Math.abs((getHeight()-radiusOne/2 + radiusOne/2f))));
    }
    return new int[]{randomWidthOne, randomHeightOne};
}