動畫與三角學

三角學

三角學在動畫技術中被廣泛使用，不管是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具體是哪一個了！

本章小結

角度與弧度互換

三角函式

正弦

餘弦

正切

反正切