[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為變形後的一組TransformTransform.getTranslate(m)返回一組移動向量,m為變形後的一組TransformTransform.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與上述相反,往下推降一個位階