android自定義組件（手機加速球+水面波動效果）

先看效果

本項目實現起來大體上我們分三步講解

【1】水面波動效果

實現代碼

首先畫出波浪線，通過通過貝塞爾曲線

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

        }

然後讓曲線動起來

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】顯示加速球圓形

這一步需要用到的知識比較多

1我來給講解一下，畫布的問題；首先onDraw（）提供一個默認的canvas；我們可以想象一下，這塊畫布就是手機屏幕，我們可以使用這塊畫布畫背景色；
2我們的球形加速球，是通過兩層圖重疊取得重疊的部分
示意圖如下

我們先畫出了矩形，代碼如下

  path.reset();

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

然後畫出了圓形，設置畫筆，使得只顯示兩部分重疊的部分：
此處可參考上一篇：http://blog.csdn.net/taoolee/article/details/48527917

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

        paintRect.setXfermode(mode);

這樣顯示的效果就是

【3】實現點擊加速球，加速效果
先要添加點擊事件<喎?/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); }

然後使用handler處理改變當前水面高度，
我們先默認初始高度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;
            }


        }
    };

最後附上源代碼

/**
 * 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);

    }
}