如何波纹动画效果的宠爱? [英] How to animated ripple doted effect?

查看:182
本文介绍了如何波纹动画效果的宠爱?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想prepare动画连锁反应我会告诉你的图片
我感兴趣的是这种溺爱圈,这宠爱界应该从一个点褪色,变得越来越大,最终,圆应该消失,所以这应该是这样的屏幕上。这有点像涟漪效应

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

现在我在code alghoritm其中创建新圈子它变得越来越大,然后disapear写,所以不是这个圈子,我想有虚线的。

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.

这是我的code threadclass:

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



}

和平局的地方,我prepare方法5行

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.

推荐答案

如何 linePaint.setPathEffect(新DashPathEffect(新浮法[] {3,6},0));

这篇关于如何波纹动画效果的宠爱?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆