/ Famo.us

[Famo.us] Transform 核心模組

[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, scaleskew 元件
  • Transform.average(M1, M2, t) 回傳一組 M1, M2 加權平均的陣列,t 為權數
  • Transform.build(spec)translate, rotate, scaleskew 元件組合為 Transform 陣列
  • Transform.equals(a, b) 比較 a, b 是否相同
  • Transform.notEquals(a, b) 比較 a, b 是否不相同
  • Transform.normalizeRotation(rotation) 將三軸旋轉的結果侷限在 -pi ~ pi 之間,rotation 必須是三個浮點數所組成之陣列

屬性方法

  • Transform.inFront 是一組陣列,目的是將目標物件依照 Z 軸往上拉昇一個位階
  • Transform.behind 與上述相反,往下推降一個位階

簡易範例

http://famous.hinablue.me/transformExamples/