[UPDATE] Famo.us 官方已捨棄此模組,詳情請看官方 Github
Transform 是整個 Famo.us 動態效果的核心,預設全部都使用 matrix3d()
來做,有關於 matrix
的部分,可以參考 MDN 的說明。
Transform 核心
由於是使用 matrix3d
的關係,所以 Transform
最終輸出的結果,都會是一組 16 個數字的陣列(它是由一組 4x4 的矩陣轉換而來,上述提及的 MDN 說明當中,有詳細的數學說明,有興趣的人可以去研究一下
這個核心可以做的事情很多,最主要就是幫你把 matrix3d
繁瑣的運算換成方法,他也提供了不少運算用的方法,如果你有需要的話。
常見方法
由於整個 Transform
都是靜態方法,所以直接呼叫就會返回相對應的陣列。
Transform.translate(x, y, z)
三軸方向移動Transform.scale(x, y, z)
三軸方向縮放Transform.rotate(phi, theta, psi)
三軸方向旋轉,x 代表 phi,y 代表 theta,z 則是 psi,傳入的並不是角度,而是弧度(radians),亦即 `Math.PI- 45 / 180` 代表旋轉 45 度。
Transform.rotateX(phi)
,Transform.rotateY(theta)
,Transform.rotateZ(psi)
將上述的rotate
拆分成三個軸Transform.skew(phi, theta, psi)
三軸傾斜Transform.perspective(focusZ)
取得 Z 軸透視(單位 px
運算方法
Transform.multiply4x4(a, b)
兩組Transform
矩陣相乘,a
,b
必須皆為Transform
所產生的 4x4 矩陣(一組 16 個數字陣列Transform.multiply(a, b)
快速矩陣相乘(將矩陣最後一列改為[0, 0, 0, 1]
相乘Transform.thenMove(m, t)
回傳矩陣依照t
方向移動後的結果矩陣Transform.moveThen(v, m)
先依照v
方向運算移動矩陣,之後再將運算結果做一次thenMove
的運算Transform.thenScale(m, s)
回傳矩陣依照s
方向縮放後的結果矩陣Transform.rotateAxis(v, theta)
回傳矩陣依照指定軸v
順時鐘旋轉theta
的結果矩陣,指定軸v
必須為一組陣列,包含三個繞軸的單位向量(unit vector representing the axis)Transform.aboutOrigin(v, m)
返回一個相對於變形原點的矩陣,v
是為原點,m
為變形後的一組Transform
Transform.getTranslate(m)
返回一組移動向量,m
為變形後的一組Transform
Transform.inverse(m)
返回一個m
的仿射矩陣的反矩陣Transform.transpose(m)
返回一個m
的轉置矩陣Transform.interpret(M)
將M
拆解成translate
,rotate
,scale
與skew
元件Transform.average(M1, M2, t)
回傳一組M1
,M2
加權平均的陣列,t
為權數Transform.build(spec)
將translate
,rotate
,scale
與skew
元件組合為Transform
陣列Transform.equals(a, b)
比較a
,b
是否相同Transform.notEquals(a, b)
比較a
,b
是否不相同Transform.normalizeRotation(rotation)
將三軸旋轉的結果侷限在-pi ~ pi
之間,rotation
必須是三個浮點數所組成之陣列
屬性方法
Transform.inFront
是一組陣列,目的是將目標物件依照 Z 軸往上拉昇一個位階Transform.behind
與上述相反,往下推降一個位階