翻译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.