閑話
曾經(jīng)在閑逛時，看到有一個很炫的3D翻轉(zhuǎn)切換圖片的效果。地址在這里：https://tympanus.net/Development/Slicebox/index.html
一直想搞一個，最近擼出來一個自定義View，包含多個效果，其中一種與之相近。
正文
1.效果
話不多說，先看效果：
2d平移：
3D翻轉(zhuǎn)：
3D開合：
百葉窗：
3D輪轉(zhuǎn)：
是否覺得酷炫呢？
2.核心原理
如果你已經(jīng)迫不及待的想知道實現(xiàn)的原理，那我先把源碼的傳送門給你：https://github.com/zhangyuChen1991/Roll3DImageView
不過直接擼代碼，效率難免低，如果有介紹的文章，為什么不看呢？接下來我們一步一步來分析各種效果的實現(xiàn)過程。
開門見山，我們直擊要點：這一系列的效果實現(xiàn)的基礎(chǔ)是對兩個類的使用，Camera和Matrix。這也是我們今天的主角。
先來看幾個API：
camera.rotateX(float deg);
camera.rotateY(float deg);
camera.rotateZ(float deg);
camera有一個三維坐標(biāo)系，x軸水平，Y軸豎直，Z軸垂直屏幕指向你。上面三個API意思很明顯就是繞著三個軸旋轉(zhuǎn)一定的角度，camera的處理對象是matrix，將處理后的matrix應(yīng)用在圖片上，就會讓一個平鋪在屏幕上的圖片產(chǎn)生繞x軸或者y軸旋轉(zhuǎn)過后的3D效果了。像這樣(盜個圖)：
（圖片出自另一篇將camera和matrix講得很不錯的文章：傳送門在這里）
知道了camera的這個基礎(chǔ)而關(guān)鍵的API，我們再來看下面一段代碼：
camera.save();
camera.rotateX(-rotateDegree);
camera.getMatrix(matrix);
camera.restore();
matrix.preTranslate(-currBitmap.getWidth() / 2, 0);
matrix.postTranslate(currBitmap.getWidth() / 2 + i * averageWidth, axisY);
canvas.drawBitmap(currBitmap, matrix, paint);
上面的代碼做了一件事：將matrix用camera旋轉(zhuǎn)處理后運(yùn)用在bitmap上，將bitmap顯示出來。這里顯示出來的效果就如上面的圖片展示，是有3D效果的。
但是這里要講的關(guān)鍵不是這個，請注意其中的四行代碼：
camera.rotateX(-rotateDegree);
camera.getMatrix(matrix);
matrix.preTranslate(-currBitmap.getWidth() / 2, -currBitmap.getHeight());
matrix.postTranslate(currBitmap.getWidth() / 2 , axisY);
這里的preTranslate()和postTranslate()有什么作用？
通常上理解，preTranslate()就是在一個matrix發(fā)生變化之前，給它做一個平移，postTranslate()是在一個matrix發(fā)生變化之后做平移。通過參數(shù)來看，這里的動作是把它先往左上方移動，然后往右下方移動，目的只有一個：在matrix做旋轉(zhuǎn)處理時改變旋轉(zhuǎn)中心的位置。
camera旋轉(zhuǎn)matrix時，中心點在(0,0)，這是它的旋轉(zhuǎn)中心，而(0,0)點只是matrix的左上角，如果不處理就旋轉(zhuǎn)的話，旋轉(zhuǎn)軸就是matrix的頂邊或者左邊，這里豎直方向先向上移動了整個bitmap的高度，讓它的旋轉(zhuǎn)軸變成了bitmap的底部，如果不移動，則在bitmap的頂部。
結(jié)合一張丑圖來看吧：
藍(lán)色框的中心就是旋轉(zhuǎn)操作的中心，如果移到綠框位置，則對圖片進(jìn)行以中心為旋轉(zhuǎn)的處理。
所以這里的過程總結(jié)為：
1 移動bitmap到旋轉(zhuǎn)軸合適的位置
2 進(jìn)行旋轉(zhuǎn)處理
3 移回原位，顯示處理后的位圖效果
還有一點要注意到，上面代碼中移過去和移回來，參數(shù)是不一樣的，也就是說，圖片并不是移回原位。這點應(yīng)該比較好理解，3D翻轉(zhuǎn)的過程，圖片的位置其實是變化的，當(dāng)前圖片會逐漸移出顯示框，下一張圖片會逐漸進(jìn)來，所以參數(shù)不同為了就是造成圖片位置移動而已。
上面這段內(nèi)容其實就是整個所有效果實現(xiàn)的核心了，如果你跟著這個思路理清楚了，再看代碼應(yīng)該要省力得多。
3.3D翻轉(zhuǎn)基本過程
那么我們梳理一下整體3D翻轉(zhuǎn)的過程：
水平向左翻轉(zhuǎn)，第一張圖片旋轉(zhuǎn)軸在最右，旋轉(zhuǎn)角度不斷增加，同時旋轉(zhuǎn)軸逐漸往左移動；第二張圖片旋轉(zhuǎn)軸在自己的最左，旋轉(zhuǎn)角度不斷減小，同時旋轉(zhuǎn)軸逐漸靠向左邊；于是就產(chǎn)生了3D翻轉(zhuǎn)切換的效果了。豎直方向類同。
如果你理解了上面講述的過程，那么跟著這段描述來試著寫出代碼吧！
其實講到這里，最關(guān)鍵的原理已經(jīng)說完了，下面沒有什么太干的貨了，我們簡單梳理一下分割變化的過程吧。
4.基礎(chǔ)之上的擴(kuò)展
整體3D翻轉(zhuǎn)，我們處理的是圖片的整個bitmap。分割翻轉(zhuǎn)的道理其實是一樣的，只是要先做一步：將bitmap均等分割成若干塊，放到數(shù)組里備用。當(dāng)啟動效果時，依次拿出每個bitmap，處理它的旋轉(zhuǎn)、位移，就可以了。
1.分割合并效果：這個沒啥好說的，整體3D是操作一個，這里分成3個照整體3D哪樣處理就可以了。唯一要注意的一點是：每一塊bitmap平移回來的時候，記得算對參數(shù)，把圖片完整的拼回一起。
2.百葉窗效果：唯一的不同就是每一塊bitmap翻轉(zhuǎn)的中心不同了，其他的旋轉(zhuǎn)軸都在邊沿，而它是在中心位置。
3.輪轉(zhuǎn)效果：這個我認(rèn)為最炫的一個效果，其實原理也就那么回事了，每塊bitmap依次執(zhí)行3D翻轉(zhuǎn)，最后全部翻轉(zhuǎn)過來，就是這樣了。
結(jié)尾
最后還想說的是，在實踐的過程中，我發(fā)現(xiàn)偏移某些參數(shù)相互搭配，其實會產(chǎn)生更加3D逼真絢麗的效果。我淺嘗輒止，期待你們腦洞大開無限探索，只有想不到，沒有做不到！
最后的最后，貼一遍項目地址吧，歡迎大家賞臉前去觀看。https://github.com/zhangyuChen1991/Roll3DImageView
如發(fā)現(xiàn)問題，歡迎斧正！
