好久不見~
今天我們來看看如何實現乙個立方體翻轉的效果，如圖
看上去很麻煩，實際上實現起來還是蠻輕鬆的。
這裡我們使用到的有兩個類。
android.graphic.camera這是在影象學概念裡的攝像機，這是乙個透視攝像機。
android.graphic.matrix矩陣，用來表示影象的變化。
我們先從攝像頭上的角度分析：
正常情況下，我們是這麼看畫面的（那個電池一樣的東西就當是攝像頭吧）
我們要產生立方體的效果，那邏輯上應該是這麼看：
camera提供了幾個介面，我們這使用到的介面有兩個：
rotate 旋轉
translate 平移
這兩個函式的操作都對畫布的！
這裡我們首先要有2個view。xml結構入下：
我們把第乙個view作為backgroundview，第二個view作為foregroundview，使得效果是從backgroundview翻轉到foregroundview。
具體**入下：
private void cube(canvas canvas, double interpolation)viewgroup的dispatchdraw方法裡即可，因為viewgroup只能在dispatchdraw方法中繪製子檢視。
其中，canvas代表畫布，interpolation代表動畫從0.0 到 1.0 的過程，方便插入器的使用。
這裡來解釋下我們的過程。
起始狀態background是這樣的：
繞y軸正方向轉90度
畫布x軸移動到width的位置。
可以參照上圖中的畫布2的狀態。
終點狀態是這樣：
繞y軸正方向0度。
畫布x軸移動到0的位置。
可以參考上圖中的畫布的狀態。
綜上所述，我們設定轉動角度sfinaldegree為90。
interpolation從0到1的過程，
background的rotate就變成了從90到0的過程。
這時候我們考慮平移的情況，這個情況會比較複雜，因為我們這裡有兩種平移方式，平移攝像機或者直接平移畫布。
這裡我們說下區別，如果移動攝像機，會導致影象的投影發生變化，舉個例子：
比如我們已經在投影上繞y軸旋轉90度，如果移動x軸的話，看如下圖的區別：
1、未平移攝像機
2、平移攝像機
從圖上我們知道，這個旋轉過的畫布的前端和後端我們都是可以看見的，這當然不符合我們要求，那麼我們直接平移畫布是什麼意思呢？
我們知道對攝像機做了操作之後，應用到畫布上，實際是畫乙個畫布的投影，直接移動畫布的話，就是改變其座標系系統，達到效果，我們可以理解為同時對攝像機和view進行平移，最終達到的效果就是攝像頭相對view的位置和1一樣，但是我們的畫布卻平移了，這就達到了我們最終的要求。
我們看**雖然我們平移的是畫布，但是我們平移的過程中確是使用移動攝像機的方式來繪製投影，這又是為什麼呢？
我們從三角函式的投影來解釋這個問題。
首先看見我平移攝像頭的方式是線性的，也就是y=kt這種方式，斜率一定，也就是隨著時間變化，我平移的距離是線性增加的。那麼考慮旋轉的時候的投影情況：
被旋轉的角就是角a，我們的畫布長為width，那麼畫布的投影長度為
它是乙個三角函式。變化趨勢先快後慢，因此我們在旋轉過程中會看見右邊露出背景，造成視覺上的不友好，怎麼解決這個問題呢？
這時候就借助我們的攝像機平移的投影方式。
這裡綠色的線是我們的投影線，它的投影長度比cos(a) * width要長很多，因此它就可以讓我們在旋轉過程中不產生黑邊，給人視覺上的飽滿感，會讓我們的視覺效果好很多。
我們的foregroundview就是乙個backgroundview的逆向過程，因此使用類似的**，然後假設interpolation是從1-0的過程即可，同時它的座標系整體要往左移動乙個螢幕。
做ui的效果，特別需要一些比較好的資料基礎，在影象處理中，搞清楚透視、矩陣的一些計算方式和概念非常重要，今天我們介紹了利用camera來進行輔助我們進行矩陣的計算。
demo已經放在github上demo已經放在github上
demo已經放在github上
歡迎star 歡迎fork！
實現立方體旋轉
html部分 12 3456 css 1.3維空間圖 電腦螢幕中心為原點，橫向為x軸，縱向為y軸，人臉的方向為z軸 translate x,y translatex x translatey y translatez z translate3d x,y,z 定義位置的移動距離 rotate angl...
css製作乙個自動旋轉的立方體
1.透視 景深效果 左手法則 大拇指指向當前座標軸的下方向，手指環繞的方向就是正方向 perspective length 為乙個元素設定三維透視的距離。僅作用於元素的後代，而不是其元素本身。當perspective none 0 時，相當於沒有設perspective length 比如你要建立乙...
HTML CSS寫乙個3D立方體
相信有許多的朋友在學3d轉換的時候很懵，或者學完之後想做個小練習獲得成就感鼓勵自己，再或者想更理解透徹。做完這小練習相信大家一定會有所收穫。廢話不多說了，直接開始 html 前後上 下左右相信大家玩過魔方以及在小學的時候學過立方體展開，上面 都能理解。preserve div preserve這裡主...