今天我們來看看如何實現一個立方體翻轉的效果，如圖

看上去很麻煩，實際上實現起來還是蠻輕鬆的。
這裡我們使用到的有兩個類。

1. android.graphic.Camera 這是在影象學概念裡的攝像機，這是一個透視攝像機。

2. android.graphic.Matrix 矩陣，用來表示影象的變化。

頭疼的鑽研路開始

我們先從攝像頭上的角度分析：
正常情況下，我們是這麼看畫面的（那個電池一樣的東西就當是攝像頭吧）

我們要產生立方體的效果，那邏輯上應該是這麼看：

Camera提供了幾個介面，我們這使用到的介面有兩個：

1. Rotate 旋轉

2. Translate 平移

這兩個函式的操作都對畫布

<cn.geminiwen.canvassupport.view.SplashLayout
        android:text="@string/hello_world"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#000" >
        <RelativeLayout
            android:layout_width
 
="match_parent"
            android:layout_height="match_parent"
            android:background="#f00">
        </RelativeLayout>
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#0f0">
        </RelativeLayout
 
>
</cn.geminiwen.canvassupport.view.SplashLayout>

SplashLayout就是我的自定義佈局，用來繪製立方體效果的佈局。

我們把第一個view作為backgroundView，第二個View作為foregroundView，使得效果是從backgroundView翻轉到foregroundView。

具體程式碼入下：

private void cube(Canvas canvas, double interpolation) {
        View foregroundView = getChildAt(0);
        View backgroundView = getChildAt(1);
        int width = getWidth();
        int height = getHeight();
        long drawingTime = getDrawingTime();
        float rotate;

        //begin drawForeground
        rotate = (float)(- sFinalDegree * interpolation);
        mCamera.save();
        mCamera.translate((float)(width - interpolation * width), 0, 0);
        mCamera.rotateY(rotate);
        mCamera.getMatrix(mMatrix);
        mCamera.restore();

        mMatrix.postTranslate(0, height / 2);
        mMatrix.preTranslate(-width, -height / 2);
        canvas.save();
        canvas.concat(mMatrix);
        drawChild(canvas, foregroundView, drawingTime);
        canvas.restore();
        //end drawForeground



        //draw Background
        rotate = (float)(sFinalDegree - sFinalDegree * interpolation);
        mCamera.save();
        mCamera.translate((float)(-width * interpolation), 0, 0);
        mCamera.rotateY(rotate);
        mCamera.getMatrix(mMatrix);
        mCamera.restore();

        mMatrix.postTranslate(width, height / 2);
        mMatrix.preTranslate(0, -height / 2);
        canvas.save();
        canvas.concat(mMatrix);
        drawChild(canvas, backgroundView, drawingTime);
        canvas.restore();
        //end draw Background

    }

這段程式碼放到ViewGroup的dispatchDraw方法裡即可，因為ViewGroup只能在dispatchDraw方法中繪製子檢視。
其中，canvas代表畫布，interpolation代表動畫從0.0 到 1.0 的過程，方便插入器的使用。

這裡來解釋下我們的過程。

View狀態變換

起始狀態background是這樣的：

1. 繞Y軸正方向轉90度

2. 畫布x軸移動到width的位置。

可以參照上圖中的畫布2的狀態。

終點狀態是這樣：

1. 繞Y軸正方向0度。

2. 畫布x軸移動到0的位置。

可以參考上圖中的畫布的狀態。

旋轉問題

綜上所述，我們設定轉動角度sFinalDegree為90。
interpolation從0到1的過程，
background的rotate就變成了從90到0的過程。

平移問題

這時候我們考慮平移的情況，這個情況會比較複雜，因為我們這裡有兩種平移方式，平移攝像機或者直接平移畫布。

這裡我們說下區別，如果移動攝像機，會導致影象的投影發生變化，舉個例子：
比如我們已經在投影上繞Y軸旋轉90度，如果移動X軸的話，看如下圖的區別：

1、未平移攝像機

2、平移攝像機

從圖上我們知道，這個旋轉過的畫布的前端和後端我們都是可以看見的，這當然不符合我們要求，那麼我們直接平移畫布是什麼意思呢？

我們知道對攝像機做了操作之後，應用到畫布上，實際是畫一個畫布的投影，直接移動畫布的話，就是改變其座標系系統，達到效果，我們可以理解為同時對攝像機和view進行平移，最終達到的效果就是攝像頭相對view的位置和1一樣，但是我們的畫布卻平移了，這就達到了我們最終的要求。

我們看程式碼雖然我們平移的是畫布，但是我們平移的過程中確是使用移動攝像機的方式來繪製投影，這又是為什麼呢？

我們從三角函式的投影來解釋這個問題。
首先看見我平移攝像頭的方式是線性的，也就是y=kt這種方式，斜率一定，也就是隨著時間變化，我平移的距離是線性增加的。那麼考慮旋轉的時候的投影情況：
被旋轉的角就是角a，我們的畫布長為width，那麼畫布的投影長度為 
width * cos(a)

它是一個三角函式。變化趨勢先快後慢，因此我們在旋轉過程中會看見右邊露出背景，造成視覺上的不友好，怎麼解決這個問題呢？ 

這時候就藉助我們的攝像機平移的投影方式。

這裡綠色的線是我們的投影線，它的投影長度比cos(a) * width要長很多，因此它就可以讓我們在旋轉過程中不產生黑邊，給人視覺上的飽滿感，會讓我們的視覺效果好很多。

我們的foregroundView就是一個backgroundView的逆向過程，因此使用類似的程式碼，然後假設interpolation是從1-0的過程即可，同時它的座標系整體要往左移動一個螢幕。

總結

做UI的效果，特別需要一些比較好的資料基礎，在影象處理中，搞清楚透視、矩陣的一些計算方式和概念非常重要，今天我們介紹了利用Camera來進行輔助我們進行矩陣的計算。

原始碼