閑話

曾經(jīng)在閑逛時(shí)，看到有一個(gè)很炫的3D翻轉(zhuǎn)切換圖片的效果。地址在這里：https://tympanus.net/Development/Slicebox/index.html

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

正文

1.效果

話不多說，先看效果：

2d平移：

2d

3D翻轉(zhuǎn)：

3D

3D開合：

3D開合

百葉窗：

百葉窗

3D輪轉(zhuǎn)：

3D輪轉(zhuǎn)

是否覺得酷炫呢？

2.核心原理

如果你已經(jīng)迫不及待的想知道實(shí)現(xiàn)的原理，那我先把源碼的傳送門給你：https://github.com/zhangyuChen1991/Roll3DImageView

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

開門見山，我們直擊要點(diǎn)：這一系列的效果實(shí)現(xiàn)的基礎(chǔ)是對兩個(gè)類的使用，Camera和Matrix。這也是我們今天的主角。

先來看幾個(gè)API：

camera.rotateX(float deg);

camera.rotateY(float deg);

camera.rotateZ(float deg);

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

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

這里寫圖片描述

這里寫圖片描述

知道了camera的這個(gè)基礎(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)鍵不是這個(gè)，請注意其中的四行代碼：

camera.rotateX(-rotateDegree);

camera.getMatrix(matrix);

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

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

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

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

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

結(jié)合一張丑圖來看吧：

解釋圖片

藍(lán)色框的中心就是旋轉(zhuǎn)操作的中心，如果移到綠框位置，則對圖片進(jìn)行以中心為旋轉(zhuǎn)的處理。

所以這里的過程總結(jié)為：

1 移動(dòng)bitmap到旋轉(zhuǎn)軸合適的位置

2 進(jìn)行旋轉(zhuǎn)處理

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

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

上面這段內(nèi)容其實(shí)就是整個(gè)所有效果實(shí)現(xiàn)的核心了，如果你跟著這個(gè)思路理清楚了，再看代碼應(yīng)該要省力得多。

3.3D翻轉(zhuǎn)基本過程

那么我們梳理一下整體3D翻轉(zhuǎn)的過程：

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

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

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

4.基礎(chǔ)之上的擴(kuò)展

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

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

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

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

結(jié)尾

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。