三角學
三角學在動畫技術中被廣泛使用,不管是2D動畫亦或是3D動畫,都離不開三角學。
說到三角學,相信不少人會下意識地迴避數學與三角學,畢竟說起數學的種種邏輯與公式,腦袋就大了。事實上,我們不必過於擔心自己的數學不夠好而影響到動畫編程,大多數情況下,你可能只需處理好與位置、距離以及角相關的變量就行。
其實學習三角學最主要的是掌握各種邊與角的關係 ,而且實現基本動畫的90%的三角學知識都可歸結於兩個常用的三角函數:Math.sin 與 Math.cos。
1、角度與弧度
角的度量單位分別有角度和弧度兩大系統,對於角度系統,相信我們都不陌生。不過在衡量角的大小的時候,計算機卻更傾向於使用弧度的概念。所以無論喜歡與否,你都需要了解弧度。
角度與弧度的轉換公式
▲▲▲
2、canvas座標系
常見的二維座標系,其座標原點(0,0)通常位於空間的正中心,x軸的座標值向右以正數的形式不斷增大,向左以負數的形式 不斷減小,而y軸的座標值向上以正數的形式不斷增大,向下以負數的形式不斷減小。
而canvas元素是基於視頻畫面的座標系,其座標原點(0,0)處在canvas畫布的左上角,x軸的座標值從左往右不斷增大,y軸的座標值是從上往下不斷增大。
除了座標系之外,在大多數系統中,角度的測量是以逆時針方向為正值的,0°表示一條線沿x軸正方向延伸。但在canvas元素中,順時針的角度才是正值,逆時針的角度反而成了負值。
3、三角函數
三角函數是基本初等函數之一, 是以角度為自變量,角度對應任意角終邊與單位圓交點座標或其比值為因變量的函數。
常見的三角函數包括正弦函數、餘弦函數和正切函數。一般用於計算三角形中未知長度的邊和未知的角度。
(1)正弦
一個角的正弦表示與該角相對的直角邊與斜邊的比例。
在JavaScript中,使用Math.sin(angle) 函數計算正弦值。
如上圖顯示的是一個30°角的三角形,該30°角的對邊長度為1,斜邊長度為2,它們的比率是1 : 2,即1/2 或 0.5。因此,我們可以認為30°角的正弦值為0.5。
用 JavaScript 函數計算30°角正弦值如下:
注意:在開始計算正弦值之前,第一步我們需要將角度值轉換為弧度值,然後再進行計算。
執行結果如下:
執行代碼後我們發現得到的是一串很長的浮點數,這是因為二進制電腦在表示浮點數時經常會出現的結果。我們可以四捨五入處理把它當作0.5即可。
但是在canvas座標系中,垂直向上以及逆時針的角度均是負值,所以在上圖三角形中,角的對邊和角自身都是負值。
如此一來,對邊和斜邊的比例就變成了-1/2,即-0.5:
正弦值所對應的角度變成了-30°。
-30°角的正弦值則為-0.5。
(2)餘弦
一個角的正弦表示與該角相對的鄰邊與斜邊的比例。
在JavaScript中,使用Math.cos(angle) 函數計算正弦值。
如上圖顯示的是一個30°角的三角形,該30°角的鄰邊相對於 角向右方向延伸,所以在x軸上長度是正值,長度為1.73,斜邊長度為2,它們的比率是1.73 : 2,即0.866。因此,我們可以認為-30°角的餘弦值為0.866。
用 JavaScript 函數計算該30°角餘弦值如下:
執行結果如下:
(3)正切
正切是另一個重要的三角函數,在 JavaScript 中通過函數
Math.tan(angle) 表示,它表現的是對邊與鄰邊的關係。
用 JavaScript 函數計算該30°角正切值如下:
執行結果如下:
實際上,在日常的動畫代碼中很少用到正切,用得比較頻繁的主要是正弦和餘弦。
(4)反正切
為什麼不說反正弦和反餘弦呢?其實反正弦和反餘弦同正切一樣,在一般的動畫場景中不太用到,而在動畫開發中,反正切起的作用反而更大些。
反正切是正切的逆運算,輸入角的對邊和鄰邊的比率,通過計算反正切就可得到角的弧度。在 JavaScript 中通過函數Math.atan(ratio) 表示。
由上第3點正切可以看出,30°角的正切值是0.577(四捨五入),由此可根據正切值計算出對應角度如下:
注意:計算得到的是弧度值,需要把弧度轉換為角度。
執行結果如下:
一個接近30的值,即表示角度為30°
我們細心觀察就會發現這裡存在這樣一個問題:
如圖所示的4個三角形A、B、C、D,分別用正切函數
Math.atan(ratio)計算它們的正切值如下:
- A:-1 / 2,即 -0.5,
- Math.atan(-0.5) = -26.57°
- B:1 / 2, 即 0.5,
- Math.atan(0.5) = 26.57°
- C:1 /(-2),即 -0.5,
- Math.atan(-0.5) = -26.57°
- D:(-1)/(-2),即 0.5,
- Math.atan(0.5) = 26.57°
(以上計算省略了弧度轉角度,默認計算出了角度)
我們可以看到,僅憑 Math.atan(-0.5) = -26.57°,是無法分辨這個三角形是A還是C,同理,B與D亦是無法分辨。
那麼是否就無法解決這個問題?非也!
在 JavaScript 中,還有另一個反正切函數:
Math.atan2(y, x)
該函數接受兩個參數:對邊與鄰邊的長度,從而計算出弧度的值,它的不同之處在於,得出的角度值是從x軸正軸開始以逆時針方向計算的。
這時我們用 Math.atan2(y, x) 計算A、B、C、D 這4個三角形的角度:
- A:Math.atan2(-1, 2) = -26.57°
- B:Math.atan2(1, 2) = 26.57°
- C:Math.atan2(1, -2) = 153.43°
- D:Math.atan2(-1, -2) = -153.43°
由此我們可知,在canvas座標系統中,我們所關注的三角形D的角度為 -153.43° 而不是 26.57°,由此我們就可以很方便的分辨出三角形A和C,B和D具體是哪一個了!
本章小結
角度與弧度互換
三角函數
正弦
餘弦
正切
反正切
關鍵字: 三角學 正切值 JavaScript