How to animated ripple doted effect?

Question

I would like to prepare animated ripple effect I show you on picture I'm interested in making this doted circles,this doted circles should fade in from one point, become bigger and bigger and in the end, circle should disappear, so this should look like on this screen. It's something like ripple efect

For now I write in the code alghoritm which create new circles which become bigger and bigger and then disapear, so instead of this circles I would like to have dotted ones.

This is my code threadclass:

import android.annotation.SuppressLint;
import android.graphics.Canvas;
import android.view.SurfaceHolder;

public class CanvasThreadForCanvas extends Thread {
    private SurfaceHolder mySurfaceHolder;
    private PanelForCanvas myPanel;
    public static boolean runIt = false;

    public CanvasThreadForCanvas(SurfaceHolder surfaceHolder,
            PanelForCanvas panel)
    {
        mySurfaceHolder = surfaceHolder;
        myPanel = panel;

    }
    public void setRunning(boolean run)
    {
        runIt= run;
    }

    @SuppressLint("WrongCall")
    @Override
    public void run() {
        Canvas c;
        while(runIt)
        {
            try {

                // how fast will be invoked on draw method
                Thread.sleep(10, 0);
            } catch (InterruptedException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            c = null;
            try
            {

                synchronized(mySurfaceHolder)
                {

                    c = mySurfaceHolder.lockCanvas(null);
                    myPanel.onDraw(c);
                }
            }finally
            {
                if(c!= null)
                {
                    mySurfaceHolder.unlockCanvasAndPost(c);
                }
            }
        }
        super.run();
    }



}

and the method where draw, I prepare 5 lines

    public class PanelForCanvas extends SurfaceView implements SurfaceHolder.Callback {

private CanvasThreadForCanvas canvasthread;

public PanelForCanvas(Context context, AttributeSet attrs) {
    super(context, attrs);
    getHolder().addCallback(this);
    canvasthread = new CanvasThreadForCanvas(getHolder(),this);
    setFocusable(true);
}

@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width,
        int height) {


}

@Override
public void surfaceCreated(SurfaceHolder holder) {
    canvasthread.setRunning(true);
    canvasthread.start();

}

@Override
public void surfaceDestroyed(SurfaceHolder holder) {
    boolean retry = true;
    canvasthread.setRunning(false);
    while(retry)
    {
        try
        {
            canvasthread.join();
            retry = false;
            canvasthread.setRunning(false);
        }
        catch(InterruptedException e) 
        {

        }
        catch(NullPointerException e)
        {

        }
    }

}


int radiusOfCircle =50;
boolean circleend = false;


//set of values for every line in the animation
//so we'll see 4 line in one moment
// for first line
Paint line1;
float levelOfAlpha1 =255;

int line2luncher=0;

// for second line
Paint line2;
float levelOfAlpha2 =255;
int line3luncher=0;


//for third line

Paint line3;
float levelOfAlpha3 =255;
int line4luncher=0;


// for fourth line
Paint line4;
float levelOfAlpha4 =255;
int line5luncher=0;

// for second line
Paint line5;
float levelOfAlpha5 =255;



@Override
protected void onDraw(Canvas canvas) {
    Paint paint = new Paint();

    Paint linePaint = new Paint();


    //Bitmap kangoo = BitmapFactory.decodeResource(getResources(),R.drawable.bccb3e123050fb9165ee8a91c447bcf3);
    canvas.drawColor(Color.WHITE);



    // need to add this style when you need to draw f.example
    // circle without filling it 

    circleend = true;
    linePaint.setStyle(Paint.Style.STROKE);

    linePaint.setStrokeWidth(5);


    // give for every line color/style/ Stroke 
    line1 =line2= line3 =line4 =line5  = linePaint;

    // the part where we animating fade lines 
    // drawing this circle line 

    // first line

    if(circleend == true)
    {  
        // levelOfAlpha1 is set on the begining to 255, which
        // means that it will be full colorer, as much as levelOfAlpha1 is 
        // decreasing as much the color became more transparently
        // so if the level is set to 0 we didn't see any color in this 
        // place
        line1.setColor(Color.argb((int) levelOfAlpha1, 135, 206, 250));
        canvas.drawCircle(1300, 0, 150, line1);

        // -3.4 is taken from calculation
        // 255 is max, we want to get the 0 during 
        // one  cycle of circle growth, 
        // the loop must be made 75 times to make circle
        // growing from min to max 
        // so 255/ 75 = 3.4 
        if(levelOfAlpha1==0)
        {
            levelOfAlpha1=255;
        }
        else
        {
            levelOfAlpha1-=3.4;
            //after 5 cycles line luncher will be 5
            //which lunch the animation of second line
            if(line2luncher!=20){
                line2luncher++;
            }


        }

    }

    if(line2luncher==20)
    {
        //this same as for first line 
        line2.setColor(Color.argb((int) levelOfAlpha2, 135, 206, 250));
        canvas.drawCircle(1300, 0, 175, line2);

        if(levelOfAlpha2==0)
        {
            levelOfAlpha2=255;
        }
        else
        {
            levelOfAlpha2-=3.4;
            if(line3luncher!=20){
                line3luncher++;
            }
        }
    }

    if(line3luncher==20)
    {
        //this same as for first line 
        line3.setColor(Color.argb((int) levelOfAlpha3, 135, 206, 250));
        canvas.drawCircle(1300, 0, 200, line3);

        if(levelOfAlpha3==0)
        {
            levelOfAlpha3=255;
        }
        else
        {
            levelOfAlpha3-=3.4;
            if(line4luncher!=20){
                line4luncher++;
            }
        }
    }

    if(line4luncher==20)
    {
        //this same as for first line 
        line4.setColor(Color.argb((int) levelOfAlpha4, 135, 206, 250));
        canvas.drawCircle(1300, 0, 225, line4);

        if(levelOfAlpha4==0)
        {
            levelOfAlpha4=255;
        }
        else
        {
            levelOfAlpha4-=3.4;
            if(line5luncher!=20){
                line5luncher++;
            }
        }
    }

    if(line5luncher==20)
    {
        //this same as for first line 
        line5.setColor(Color.argb((int) levelOfAlpha5, 135, 206, 250));
        canvas.drawCircle(1300, 0, 250, line5);

        if(levelOfAlpha5==0)
        {
            levelOfAlpha5=255;
        }
        else
        {
            levelOfAlpha5-=3.4;             
        }
    }   
}

and how it looks on the screen. It isn't so beautiful.
How I can get this effect of dots?

If you know any easier method to get this same efect of repeatly animated circle of dot, I would be grateful.

Answer 1

How about linePaint.setPathEffect(new DashPathEffect(new float[] {3,6}, 0)); ?