閑話

曾經在閑逛時，看到有一個很炫的3D翻轉切換圖片的效果。地址在這里：https://tympanus.net/Development/Slicebox/index.html

一直想搞一個，最近擼出來一個自定義View，包含多個效果，其中一種與之相近。

正文

1.效果

話不多說，先看效果：

2d平移：

2d

3D翻轉：

3D

3D開合：

3D開合

百葉窗：

百葉窗

3D輪轉：

3D輪轉

是否覺得酷炫呢？

2.核心原理

如果你已經迫不及待的想知道實現的原理，那我先把源碼的傳送門給你：https://github.com/zhangyuChen1991/Roll3DImageView

不過直接擼代碼，效率難免低，如果有介紹的文章，為什么不看呢？接下來我們一步一步來分析各種效果的實現過程。

開門見山，我們直擊要點：這一系列的效果實現的基礎是對兩個類的使用，Camera和Matrix。這也是我們今天的主角。

先來看幾個API：

camera.rotateX(float deg);

camera.rotateY(float deg);

camera.rotateZ(float deg);

camera有一個三維坐標系，x軸水平，Y軸豎直，Z軸垂直屏幕指向你。上面三個API意思很明顯就是繞著三個軸旋轉一定的角度，camera的處理對象是matrix，將處理后的matrix應用在圖片上，就會讓一個平鋪在屏幕上的圖片產生繞x軸或者y軸旋轉過后的3D效果了。像這樣(盜個圖)：

(圖片出自另一篇將camera和matrix講得很不錯的文章：傳送門在這里)

這里寫圖片描述

這里寫圖片描述

知道了camera的這個基礎而關鍵的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旋轉處理后運用在bitmap上，將bitmap顯示出來。這里顯示出來的效果就如上面的圖片展示，是有3D效果的。

但是這里要講的關鍵不是這個，請注意其中的四行代碼：

camera.rotateX(-rotateDegree);

camera.getMatrix(matrix);

matrix.preTranslate(-currBitmap.getWidth() / 2, -currBitmap.getHeight());

matrix.postTranslate(currBitmap.getWidth() / 2 , axisY);

這里的preTranslate()和postTranslate()有什么作用？

通常上理解，preTranslate()就是在一個matrix發生變化之前，給它做一個平移，postTranslate()是在一個matrix發生變化之后做平移。通過參數來看，這里的動作是把它先往左上方移動，然后往右下方移動，目的只有一個：在matrix做旋轉處理時改變旋轉中心的位置。

camera旋轉matrix時，中心點在(0,0)，這是它的旋轉中心，而(0,0)點只是matrix的左上角，如果不處理就旋轉的話，旋轉軸就是matrix的頂邊或者左邊，這里豎直方向先向上移動了整個bitmap的高度，讓它的旋轉軸變成了bitmap的底部，如果不移動，則在bitmap的頂部。

結合一張丑圖來看吧：

解釋圖片

藍色框的中心就是旋轉操作的中心，如果移到綠框位置，則對圖片進行以中心為旋轉的處理。

所以這里的過程總結為：

1 移動bitmap到旋轉軸合適的位置

2 進行旋轉處理

3 移回原位，顯示處理后的位圖效果

還有一點要注意到，上面代碼中移過去和移回來，參數是不一樣的，也就是說，圖片并不是移回原位。這點應該比較好理解，3D翻轉的過程，圖片的位置其實是變化的，當前圖片會逐漸移出顯示框，下一張圖片會逐漸進來，所以參數不同為了就是造成圖片位置移動而已。

上面這段內容其實就是整個所有效果實現的核心了，如果你跟著這個思路理清楚了，再看代碼應該要省力得多。

3.3D翻轉基本過程

那么我們梳理一下整體3D翻轉的過程：

水平向左翻轉，第一張圖片旋轉軸在最右，旋轉角度不斷增加，同時旋轉軸逐漸往左移動；第二張圖片旋轉軸在自己的最左，旋轉角度不斷減小，同時旋轉軸逐漸靠向左邊；于是就產生了3D翻轉切換的效果了。豎直方向類同。

如果你理解了上面講述的過程，那么跟著這段描述來試著寫出代碼吧！

其實講到這里，最關鍵的原理已經說完了，下面沒有什么太干的貨了，我們簡單梳理一下分割變化的過程吧。

4.基礎之上的擴展

整體3D翻轉，我們處理的是圖片的整個bitmap。分割翻轉的道理其實是一樣的，只是要先做一步：將bitmap均等分割成若干塊，放到數組里備用。當啟動效果時，依次拿出每個bitmap，處理它的旋轉、位移，就可以了。

1.分割合并效果：這個沒啥好說的，整體3D是操作一個，這里分成3個照整體3D哪樣處理就可以了。唯一要注意的一點是：每一塊bitmap平移回來的時候，記得算對參數，把圖片完整的拼回一起。

2.百葉窗效果：唯一的不同就是每一塊bitmap翻轉的中心不同了，其他的旋轉軸都在邊沿，而它是在中心位置。

3.輪轉效果：這個我認為最炫的一個效果，其實原理也就那么回事了，每塊bitmap依次執行3D翻轉，最后全部翻轉過來，就是這樣了。

結尾

最后還想說的是，在實踐的過程中，我發現偏移某些參數相互搭配，其實會產生更加3D逼真絢麗的效果。我淺嘗輒止，期待你們腦洞大開無限探索，只有想不到，沒有做不到！

總結

以上是生活随笔為你收集整理的html3d上下翻转4面效果,花式实现图片3D翻转效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。