2014年11月26日 星期三

Android 開發(七十六) split icon effect

不知道大家有沒有看過這個影片




裡面的這個這個劈腿真的很厲害,
所以我也希望我們的android icon也可以做到類似的問題
恩....扯得有點遠了XD

其實我只是想做到將一張圖片分開的特效XD 如下圖


這個特效其實概念很簡單,首先將我們的image 切成四個等分,
之後利用移動的距離來分別移動我們四個bitmap即可

首先,我們遇到的第一個問題是該如何將一張完整個圖片分成四個等分?


    private Bitmap createRightUp() {
        Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
        Canvas myCanvas = new Canvas(bitmap);
        myCanvas.clipRect(new Rect(getWidth() / 2, 0, getWidth(), getHeight() / 2));
        super.onDraw(myCanvas);
        return bitmap;
    }

首先我們必須先創建一個跟圖一樣大小的bitmap,接著利用clipRect將圖裁減成希望的大小或者圖型,向我這邊就是裁減出右上角的圖,當我call super.onDraw時就會將圖片畫在我的bitmap上,接著我們只需要將我的bitmap畫在view的canvas上即可
canvas.drawBitmap(rightup, deltaY, -deltaY, null);

第一個問題這樣就解決了,那麼接下來是第二個問題
我該怎麼讓四張bitmap移動?

首先我們可以利用touchevent來計算出移動的距離,
然後我們只需要將bitmap畫在canvas上的位置做相對的移動即可也就是
canvas.drawBitmap(rightup, deltaY, -deltaY, null);
裏的deltaY

這樣就可以完成我們想要的功能了

講了那麼多,最後還是附上sample