開(kāi)發(fā)過(guò)程中經(jīng)常有意無(wú)意地刻意避開(kāi)數(shù)學(xué)相關(guān)的知識(shí)，你也知道解數(shù)學(xué)題非?？菰餆o(wú)趣。平時(shí)寫(xiě)動(dòng)畫(huà)也盡量使用 css3 來(lái)實(shí)現(xiàn)，timer-function 隨意選用，最多也就調(diào)一下 cubic-bezier，找到看著舒服的就行。但是怎樣讓動(dòng)畫(huà)更順滑，寫(xiě)出更貼近自然的動(dòng)畫(huà)，說(shuō)實(shí)話(huà)以前我沒(méi)怎么考慮過(guò)。

每次當(dāng)動(dòng)效設(shè)計(jì)師提出，能不能這樣那樣的時(shí)候，我會(huì)理所當(dāng)然地予以否決。所以有很長(zhǎng)一段時(shí)間，我非常羨慕那些能用 canvas 繪制很酷炫的動(dòng)畫(huà)的程序員。

先這樣吧，又不是不會(huì)動(dòng)。

今天來(lái)分享一下三角函數(shù)相關(guān)的內(nèi)容，如果剛學(xué)前端的時(shí)候有人教我這些，我會(huì)很開(kāi)心。

三角函數(shù)

三角函數(shù)已經(jīng)是老生常談了（街舞圈稱(chēng)之為 Old School），它伴隨我們從初中到大學(xué)，太多的公式定理，光是應(yīng)付考試就花了不少時(shí)間。先簡(jiǎn)單回顧一下，確保你還記得基礎(chǔ)知識(shí)。

勾股定理

最開(kāi)始學(xué)三角函數(shù)的時(shí)候就是從背勾三股四弦五開(kāi)始，勾股定理描述的是對(duì)于直角三角形，直角兩條邊的平方和等于斜邊的平方。

a^2 + b^2 = h^2

常用三角函數(shù)

印象中教科書(shū)里面只保留了 sin, cos, tan，其他可以通過(guò)變換得到。 

sinθ = a / h  
cosθ = b / h 
tanθ = a / b 

極坐標(biāo)系和單位圓

在笛卡爾直角坐標(biāo)系中，任一點(diǎn) (x, y) 都可以轉(zhuǎn)化成極坐標(biāo)表示 (r, θ)，其中 

r = Math.sqrt(x^2 + y^2)  
θ = Math.atan2(y, x) 

單位圓的定義是半徑為單位長(zhǎng)度的圓，圓上任意一點(diǎn)的橫坐標(biāo)就是對(duì)應(yīng)角度的余弦值，任意點(diǎn)的縱坐標(biāo)就是對(duì)應(yīng)角度的正弦值。

 

單位圓

簡(jiǎn)單的圖像變換以正弦曲線(xiàn)為例，對(duì)函數(shù)進(jìn)行簡(jiǎn)單的變換，得到不一樣的結(jié)果。

正弦曲線(xiàn)變換

正弦曲線(xiàn)公式：y = A sin(Bx + C) + D

A 控制振幅，A 值越大，波峰和波谷越大，A 值越小，波峰和波谷越?。籅 值會(huì)影響周期，B 值越大，那么周期越短，B 值越小，周期越長(zhǎng)。C 值會(huì)影響圖像左右移動(dòng)，C 值為正數(shù)，圖像左移，C 值為負(fù)數(shù)，圖像右移。D 值控制上下移動(dòng)。

這個(gè)公式非常有用，如果下文的代碼讓你不解，記得回來(lái)查看注解。

簡(jiǎn)單得回顧一下之后，確保你還記得這些基礎(chǔ)知識(shí)，那么這些曾經(jīng)被得滾瓜爛熟的內(nèi)容，和前端代碼結(jié)合會(huì)變成什么樣？

常見(jiàn)的應(yīng)用場(chǎng)景

圖像應(yīng)用

最直觀的應(yīng)用是使用三角函數(shù)來(lái)繪制 Wave 曲線(xiàn) 

for (let x = 0; x < width; x++) {  
  const y = Math.sin(x * a) * amplitude  
} 

簡(jiǎn)單曲線(xiàn)

再結(jié)合三角函數(shù)偏移讓左右成為波谷，中間成為波峰，就能得到曼妙的波紋。 

for (let x = 0; x < width; x++) {  
  const radians = x / width * Math.PI * 2  
  const scale = (Math.sin(radians - Math.PI * 0.5) + 1) * 0.5  
  const y = Math.sin(x * 0.02 + xSpeed) * amplitude * scale  
} 

圖像上的應(yīng)用

之前掘金上很火的一篇文章，也是同樣的道理，使用兩層正弦函數(shù)繪制曲線(xiàn)，fill 之后加上 stagger 動(dòng)畫(huà)，就能得到非?？犰诺?#127754;效果。

wave

如果再結(jié)合鼠標(biāo)位置 + lerp 動(dòng)畫(huà)，就能實(shí)現(xiàn)堅(jiān)果首頁(yè)同款的動(dòng)畫(huà)。

smartisan

這篇文章大部分代碼都可以在我的 Codepen 主頁(yè)看到。

SlowInSlowOut

正余弦曲線(xiàn)有很自然地緩入緩出的特性，并且在一個(gè)周期里面從 -1 到 1 再回到 -1，非常適合用來(lái)模擬一些物理效果。因?yàn)檎鎸?shí)世界里面，汽車(chē)都是緩慢啟動(dòng)，加速，減速，再緩慢減速直到速度變?yōu)?0 的，突變會(huì)讓人很難受。左邊的擺球是線(xiàn)性勻速擺動(dòng)，右邊是用了三角函數(shù)優(yōu)化的結(jié)果。顯然左邊的效果設(shè)計(jì)師會(huì)打人。

swing-ball

只需使用 sin 或 cos 乘以最大角度，就可以得到在擺動(dòng)最大角度之間的 SlowInSlowOut。 

ctx.rotate(Math.cos(t / 180 * Math.PI) * Math.PI * 0.25) 

角度控制

在開(kāi)發(fā)過(guò)程中，我們常常需要跟角度打交道，比如在頭像左上角（45deg）顯示 Notification 紅點(diǎn)，用鼠標(biāo)控制 rotation 等等。

前端 JS 里面 Math.atan2(y, x) 可以用來(lái)計(jì)算 (x, y) 和 x 軸正方向的夾角弧度值。 

function getCurrentDegree () {  
  const deltaX = mouse.x - window.innerWidth * 0.5  
  const deltaY = mouse.y - window.innerHeight * 0.5  
  return Math.atan2(deltaY, deltaX) * 180 / Math.PI  
} 

war-star

插一句，三角函數(shù)相關(guān)的動(dòng)畫(huà)并不一定需要用 js 來(lái)寫(xiě)，比如下面的 DEMO，使用 compass 依賴(lài)，同樣可以做到靈活控制在特定角度的動(dòng)畫(huà)（千萬(wàn)不要手寫(xiě)各個(gè)點(diǎn)的坐標(biāo)?。?！后期沒(méi)辦法維護(hù)） 

@import "compass";  
.checkbox:checked {  
  ~ button {  
    $per: 180 / 4;  
    @for $i from 1 through 6 {  
      &:nth-of-type(#{$i}) {  
        $angle: $per * ($i - 1) * 1deg + 180deg;  
        $x: cos($angle) * $d;  
        $y: sin($angle) * $d; 
        transform: translate($x, $y) rotate(0deg) ;  
      }  
    }  
  }  
} 

千萬(wàn)不要手寫(xiě)各個(gè)點(diǎn)的坐標(biāo)！

源碼(https://codepen.io/HelKyle/pen/qygvJz)

Case Study

經(jīng)常用到的場(chǎng)景大概就這些吧，再以一個(gè)案例分析來(lái)復(fù)習(xí)一下。

前兩天在 Codepen 首頁(yè)看到熱門(mén)推薦，作者用存 css 動(dòng)畫(huà)來(lái)實(shí)現(xiàn)一個(gè)行走的動(dòng)畫(huà)，挺新穎的，然而仔細(xì)一看，腳步的動(dòng)畫(huà)真心覺(jué)得別扭，于是想用三角函數(shù)優(yōu)化一下。

sad man

繪制頭部： 

drawHead (t) {  
  ctx.save()  
  ctx.beginPath()  
  ctx.translate(0, Math.sin(t) * 4)  
  ctx.arc(80, -35, 35, 0, 2 * Math.PI)  
  ctx.fill()  
  ctx.closePath()  
  ctx.restore()  
} 

我會(huì)給每個(gè)方法傳入周期參數(shù) t， t 從 0 到 2 PI , 這樣能保證所有的周期運(yùn)動(dòng)時(shí)間同步。

head

身體和陰影的繪制都差不多，直接跳過(guò)看腳步動(dòng)畫(huà)。

腳有兩只，按道理應(yīng)該是抬腳到落腳的動(dòng)作完成時(shí)，其他部位都完成了一個(gè)完整的周期，所以在繪制腳的時(shí)候，t 需要除以 2。然后第一只腳和第二只腳相差半個(gè)腳自身的周期，可以直接將 t 替換成 t + Math.PI 就是第二腳的動(dòng)畫(huà)。 

drawFeet (t) {  
  tt = t / 2  
    ctx.translate(Math.cos(t) * -50, 0)  
    // 另一只腳  
    ctx.translate(Math.cos(t + Math.PI) * -50, 0)  
  } 

feet

腳步動(dòng)畫(huà)自身周期的一半是在地面上的，可以通過(guò)判斷一下 sin 值，小于 0 則不做 y 縱軸方向上的變化。   

ctx.translate(Math.cos(t) * -50, Math.sin(t) > 0 ? Math.sin(t) * -35 : 0) 

feet2

還沒(méi)完，為了讓腳更加逼真，同樣在前半個(gè)周期做一下 rotate 。 

if (t < Math.PI) {  
   ctx.rotate(Math.sin(t) * Math.PI / 180 * -5)  
 } 

feet3

最終得到的效果是這樣的：

源碼(https://codepen.io/HelKyle/pen/Mqgpvb)

總結(jié)

現(xiàn)如今前端發(fā)展速度非常迅速，剛?cè)腴T(mén)的同學(xué)剛學(xué)完 jQuery 就被告知，You Dont Need jQuery。追新的腳本根本停不下來(lái)，在學(xué)習(xí)新框架新技能的同時(shí)，也別忘了基礎(chǔ)知識(shí)的重要性。

好了，今天就分享到這里，希望一次匯集這么多效果，能讓你下次使用三角函數(shù)更得心應(yīng)手。

以上大部分代碼都可以在我的 Codepen(https://codepen.io/HelKyle/)主頁(yè)看到。