Question

我想准备动画涟漪效果，我会在图片 enter image description here 上向您展示我有兴趣制作这个溺爱的圆圈，这个溺爱的圆圈应该从一个点开始淡入，变得越来越大，最后，圆圈应该消失，所以这应该在这个屏幕上看起来像。这就像涟漪效应

现在我写代码alghoritm创建新的圆圈，它变得越来越大然后消失，所以我想要点缀这些圆圈而不是这些圆圈。

这是我的代码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();
    }



}

和绘制的方法，我准备了5行

    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;             
        }
    }   
}

以及它在屏幕上的显示方式。 enter image description here 它不是那么美丽我怎么能得到点的这种效果？

如果您知道任何更简单的方法来获得重复动画圆点的相同效果，我将不胜感激。

Answer 1

linePaint.setPathEffect(new DashPathEffect(new float[] {3,6}, 0));怎么样？

如何动画涟漪效应？

1 个答案: