我們知道View的style的大多數(shù)屬性的用法，但是有個(gè)Transforms的屬性我們很少知道，而且中文網(wǎng)上也只是寫了個(gè)屬性列表，并沒有介紹怎么使用，現(xiàn)將原理和使用方法介紹如下，還請(qǐng)各位參考：
入口在官網(wǎng)的View的style屬性下面的Transforms...屬性
打開后我們可以看到有三個(gè)方法，分別是transform、transformMatrix、decomposedMatrix。
其中后兩個(gè)方法已經(jīng)過期了，需要用transform: [{ matrix: ... }]這種方法代替使用，最后會(huì)講解matrix矩陣的用法。
首先講解transform的這幾個(gè)屬性，首先transform必須是數(shù)組的形式存在:
1、translateY和translateX、translate
在官網(wǎng)的介紹里面是沒有translate的，但是官方源碼中給出了這個(gè)屬性可以用，代碼如下：
translateY和translateX分別是向Y、X軸偏移，值為可為正可為負(fù)，transform:[{translateX:100}]，放在style里面。
xyz軸的方向?yàn)椋ㄊ謾C(jī)屏幕面向上，平方在手機(jī)上）：
X軸正方向：手機(jī)右側(cè)為正，向左為負(fù)；
Y軸正方向：手機(jī)下方為正，上方為負(fù)；
Z軸正方向：從手機(jī)背面向屏幕指向?yàn)樨?fù)，反之從屏幕向背面指向?yàn)檎?br>
而 ?transform:[{translate:[-100,100,50]}] ，則有單個(gè)參數(shù)，分別為X、Y、Z，Z不填的話為0，
VR：第三個(gè)參數(shù)可以再react-Vr中使用，這樣就是3維立體的了如下代碼：
上面的代碼就是VR中的代碼，可以看到translate的第三個(gè)參數(shù)是-3，這樣用VR眼鏡看就是立體的字體了，后面的Z軸數(shù)據(jù)在VR中就更真實(shí)了，由此可看見FB以后也將在VR領(lǐng)域大房光彩了
2、scaleX、scaleY、scale
代碼如下：
運(yùn)行結(jié)果：
scaleX表示width的縮放，scaleY表示height的縮放，而scale代表寬高都縮放；
值若為正數(shù)，則正?？s放，若為負(fù)數(shù)，則是以自己的中心為中心的鏡像
3、rotateZ、rotateX、rotateY、rotate
其中rotateX、rotateY為繞X和Y軸旋轉(zhuǎn)，在我們手機(jī)的XY平面中是看不到的，所以此處不做介紹，只介紹rotateZ和rotate，這兩個(gè)是一樣的結(jié)果：
rotateZ的值為負(fù)數(shù)，旋轉(zhuǎn)方向?yàn)槟鏁r(shí)針，度數(shù)必須是string，且要加上deg單位，運(yùn)行結(jié)果如下：
4、skewY、skewX斜切
代碼如下：
大家可能懵逼了，其中skewX表示的是以X軸為中心在YZ屏幕中旋轉(zhuǎn)，而skewY表示的是以Y軸為中心在XZ屏幕中旋轉(zhuǎn)。
5、perspective
這個(gè)是透視的概念，在RN中目前還看不到效果
6、matrix
大家知道這是矩陣的意思，具體的代碼如下：
如果第一行最后一個(gè)為0的話，在矩陣中也就是單位矩陣，代表的是原始的大小，沒有任何變形。而這個(gè)0改為1的話就是下面的運(yùn)行結(jié)果
運(yùn)行結(jié)果如下：
這個(gè)在實(shí)際的開發(fā)過程中用的很少，
如過代碼改成了如下：
運(yùn)行結(jié)果為：
其他的值大家自行調(diào)整，自行驗(yàn)證，這個(gè)在開發(fā)中用的還是比較少的，上面講的各種縮放和變換都可以用這個(gè)表示出來的，因?yàn)樽罱K調(diào)用的方法都是這個(gè)方法（MatrixMath.multiplyInto(result, result, value)），源碼如下：
上面的代碼是我粘出來的代碼，開始都是調(diào)用createIdentityMatrix()方法，返回一個(gè)一維數(shù)組，這個(gè)數(shù)組只不過不同的值表示矩陣而已，最后都是調(diào)用MatrixMath.multiplyInto(result, result, value)的方法，
第一個(gè)參數(shù)result是result = MatrixMath.createIdentityMatrix();，
第二個(gè)參數(shù)是createIdentityMatrix方法或者M(jìn)atrixMath中的其他方法，MatrixMath中的其他方法也是合并的第一個(gè)方法
第三個(gè)是你輸入的值（如：translateY:100中的100，而矩陣的話就是如下代碼
[
? ? 1,1,0,0,
? ? 0,1,0,-1,
? ? 0,0,1,0,
? ? 0,0,0,1
]
）
7、舉個(gè)例子translateX的由來
假設(shè)我們輸入的是：transform:[{translateX:100}]
首先
_multiplyTransform(result, MatrixMath.reuseTranslate2dCommand, [value, 0]);
_multiplyTransform()方法內(nèi)部是下面的四行----->
var matrixToApply = MatrixMath.createIdentityMatrix();
var argsWithIdentity = [matrixToApply].concat(args);
matrixMathFunction.apply(this, argsWithIdentity);
MatrixMath.multiplyInto(result, result, matrixToApply);
大家可以看出最后又是調(diào)用6中的最后的方法，下面我就一步步的打印結(jié)果給看看，然后和我們直接修改matrix是一樣的結(jié)果。
7.1、 matrixToApply的值為4*4的單位矩陣，也就是16個(gè)值得一維數(shù)組
[?1,0,0,0,?0,1,0,0,?0,0,1,0,?0,0,0,1?]
[
? ? 1,0,0,0,
? ? 0,1,0,0,
? ? 0,0,1,0,
? ? 0,0,0,1
]
大家可以看出是一樣的，
7.2 、argsWithIdentity =? [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1].concat[100,0]
argsWithIdentity現(xiàn)在有三個(gè)值，一個(gè)是單位矩陣，一個(gè)是100，一個(gè)是0
7.3、把a(bǔ)rgsWithIdentity的三個(gè)值作為三個(gè)參數(shù)傳給MatrixMath.reuseTranslate2dCommand的方法中
7.4、reuseTranslate2dCommand
reuseTranslate2dCommand: function(matrixCommand, x, y) {
? ?matrixCommand[12] = x;
? ?matrixCommand[13] = y;
},
也就是說單位矩陣中的第三行的最后一個(gè)是100，最后一行的第一個(gè)是0，矩陣變成了
[
? 1,0,0,0,
? 0,1,0,0,
? 0,0,1,0,?
? 100,0,0,1
]
最后的效果和我們之前的結(jié)果是一樣的，
8、matrix代替其他的轉(zhuǎn)換
從7中的分析我們可以看出，
[
? a0,a1,a2,a3,
? a4,a5,a6,a7,
? a8,a9,a10,a11,
? a12,a13,a14,a15
]
translateX：改變矩陣的a12的值就是translateX的改變；
translateY：改變矩陣的a13的值就是translateY的改變；
translate：改變矩陣的a12,a13,a14的值就是translate的改變,其中a12代表的就是X，a13代表的就是Y，a14代表的就是Z(Z的默認(rèn)值為0，可以不填)；
skewX：就是改變a4 = Math.sin(radians)，其中randians就是我們輸入的‘60deg’,就是60度；同時(shí)還得改變a5 = Math.cos(radians)；
skewY：就是改變a0 = Math.cos(radians)，其中randians就是我們輸入的‘60deg’,就是60度；同時(shí)還得改變a1 = Math.sin(radians)；
scaleX：改變a0就可以了；
scaleY：改變a5就可以了；
scale：同理把a(bǔ)0和a5同時(shí)改變一個(gè)數(shù)值
rotateZ：改變的是
? ? ? ? ? ? ? ?a0 = Math.cos(radians);
? ? ? ? ? ? ? ?a1= Math.sin(radians);
? ? ? ? ? ? ? ? a4 = -Math.sin(radians);
? ? ? ? ? ? ? ? a5= Math.cos(radians);
rotateY：改變的是
? ? ? ? ? ? ? ?a0 = Math.cos(radians);
? ? ? ? ? ? ? ?a2= -Math.sin(radians);
? ? ? ? ? ? ? ?a8 = Math.sin(radians);
? ? ? ? ? ? ? ?a10= Math.cos(radians);
rotateX：改變的是
? ? ? ? ? ? ?a5 = Math.cos(radians);
? ? ? ? ? ? ?a6= Math.sin(radians);
? ? ? ? ? ? ?a9 = -Math.sin(radians);
? ? ? ? ? ? ?a10= Math.cos(radians);
perspective：改變的是 a11= -1 / p;
也就是說大家以后可以用矩陣來變化圖像了
