Android custom components (mobile accelerator ball + fluctuating water surface)

Android custom components (mobile accelerator ball + fluctuating water surface)

First view results

This project is implemented in three steps.

[1] fluctuation of Water Surface

Implementation Code

First draw a wave line, through the besell Curve

 for (int i = 0; i < 20; i++) {            path.rQuadTo(20, size, 40, 0);            path.rQuadTo(20, -size, 40, 0);        }

Then let the curve work.

private Handler handler = new Handler() {        @Override        public void handleMessage(Message msg) {            super.handleMessage(msg);            switch (msg.what) {                case 0x23:                    count += 5;                    if (count >= 80) {                        count = 0;                    }                    if (isAdd) {                        size++;                        if (size > 10) {                            isAdd = false;                        }                    } else {                        size--;                        if (size <= -10) {                            isAdd = true;                        }                    }                    invalidate();                    sendEmptyMessageDelayed(0x23, 100);                    break;

[2] show the circle of the accelerated ball

This step requires a lot of knowledge.

1. Let me explain the canvas problem. First onDraw () provides a default canvas. we can imagine that this canvas is a mobile phone screen, and we can use this canvas to draw a background color;
2. Our spherical acceleration sphere overlaps two layers of graphs.
As follows:

We drew a rectangle first, and the code is as follows:

  path.reset();        path.moveTo(600, courentProgress);        path.lineTo(600, 600);        path.lineTo(count, 600);        path.lineTo(count, courentProgress);

Then draw a circle and set the paint brush to show only the overlapping parts of the two parts:
Here for reference previous: http://blog.csdn.net/taoolee/article/details/48527917

  PorterDuffXfermode mode = new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP);        paintRect.setXfermode(mode);

The displayed result is

[3] Click to accelerate the ball.
Add click events first <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4NCjxwcmUgY2xhc3M9 "brush: java;"> private float x; private float y; @Override public boolean onTouchEvent(MotionEvent event) { x = event.getX(); y = event.getY(); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: if (x>250&&x<550&&y>250&&y<550) { handler.sendEmptyMessage(0x11); return true; } } return super.onTouchEvent(event); }

Then, use handler to change the current surface height,
The default initial height is 75%.

    private int courentProgress=325;    private Handler handler = new Handler() {        @Override        public void handleMessage(Message msg) {            super.handleMessage(msg);            switch (msg.what) {                case 0x11:                    if(courentProgress<550){                        courentProgress+=5;                        sendEmptyMessageDelayed(0x11,50);                        invalidate();                    }                    break;            }        }    };

The source code is attached.

/** * Created by Administrator on 2015/9/17. */public class MyPathView extends View {    private Path path;    private Paint paintRect;    private Paint paintBubble;    private Paint paintWave;    private int width;    private int height;    private int count = 0;    private int size = 0;    private int courentProgress=325;    private boolean isAdd = true;    private Handler handler = new Handler() {        @Override        public void handleMessage(Message msg) {            super.handleMessage(msg);            switch (msg.what) {                case 0x23:                    count += 5;                    if (count >= 80) {                        count = 0;                    }                    if (isAdd) {                        size++;                        if (size > 10) {                            isAdd = false;                        }                    } else {                        size--;                        if (size <= -10) {                            isAdd = true;                        }                    }                    invalidate();                    sendEmptyMessageDelayed(0x23, 100);                    break;                case 0x11:                    if(courentProgress<550){                        courentProgress+=5;                        sendEmptyMessageDelayed(0x11,50);                        invalidate();                    }                    break;            }        }    };    public MyPathView(Context context, AttributeSet attrs) {        super(context, attrs);        paintWave = new Paint();        paintWave.setStyle(Paint.Style.STROKE);        paintWave.setTextSize(70);        paintRect = new Paint();        paintRect.setStrokeWidth(5);        paintRect.setColor(Color.rgb(251,122,108));        PorterDuffXfermode mode = new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP);        paintRect.setStyle(Paint.Style.FILL);        paintRect.setXfermode(mode);        paintBubble = new Paint();        paintBubble.setStyle(Paint.Style.FILL);        paintBubble.setColor(Color.rgb(86,111,141));        path = new Path();        handler.sendEmptyMessageDelayed(0x23, 1000);    }    private Bitmap bitmapBubble;    private Canvas canvasBubble;    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);        setMeasuredDimension(width, height);        bitmapBubble = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);        canvasBubble = new Canvas(bitmapBubble);    }    private float x;    private float y;    @Override    public boolean onTouchEvent(MotionEvent event) {        x = event.getX();        y = event.getY();        switch (event.getAction()) {            case MotionEvent.ACTION_DOWN:                if (x>250&&x<550&&y>250&&y<550) {                    handler.sendEmptyMessage(0x11);                    return true;                }        }        return super.onTouchEvent(event);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        canvas.drawColor(Color.rgb( 246, 235, 188));        canvasBubble.drawCircle(400, 400, 150, paintBubble);        path.reset();        path.moveTo(600, courentProgress);        path.lineTo(600, 600);        path.lineTo(count, 600);        path.lineTo(count, courentProgress);        for (int i = 0; i < 20; i++) {            path.rQuadTo(20, size, 40, 0);            path.rQuadTo(20, -size, 40, 0);        }        path.close();        canvasBubble.drawPath(path, paintRect);        canvas.drawBitmap(bitmapBubble, 0, 0, null);        canvas.drawText((550-courentProgress)/3+%,400,400,paintWave);    }}