簡介

今天我們進入比較有趣的部分，製作基礎 Canvas 動畫，在 Canvas 內我們可以做到許多精美的互動設計，但由於每一次的動畫都必須要透過柳懶氣重新計算在渲染畫面，所以若是動畫做得越複雜，運算就會需要消耗更大量的時間與效能，因此，電腦的好壞決定了動畫的順暢度。這點是在製作 Canvas 動畫時必須要注意到的一個原則。

那麼確保身上的裝備都沒問題之後，我們就繼續踏上討伐魔王之路吧！

Canvas 基礎動畫

製作 Canvas 動畫影以下幾個基礎步驟

1. 清除畫布：
   由於在 Canvas 中會不斷的動態重新計算元素座標位置，因此要是我們沒有清除先前的元素在畫布上的位置，就會變成像是 影分身之術一樣。我們可以透過 claerRect() 清除畫布，或是 fillRect() 填滿畫布覆蓋舊有的元素。
2. 儲存畫布狀態：
   由於每一次的動畫運算都會改變一次畫布狀態，為了確保每一次繪製的畫布都是原始的狀態，我們需要先將該畫布的原始狀態保存起來，再去針對他做變化運算。
3. 繪製動畫元素：
   在畫布上繪製要動作的元素。
4. 恢復畫布狀態：
   儲存畫布狀態後，每一次的動畫運算都要更新到畫布起始狀態。

設定 Canvas 動畫的時間

1. setInterval(function, delay):
   延遲固定秒數後重複執行動畫運算的過程。通常用在不會與其他元素互相影響的動畫。
2. setTimeout(function, delay):
   延遲固定秒數後執行動畫，通常用在製作網頁遊戲，可以結合滑鼠或鍵盤控制事件來啟用 setTimeout。
3. requestAnimationFrame(callback):
   專門給網頁動畫使用的函式，瀏覽器會自動判斷最佳動畫更新的時刻。這個函式能夠更流暢、更有效的運算動畫，該函式的 callback 數量通常為每 60 秒一次。

汽車移動

我們來簡單實作一下 canvas 動畫是如何繪製並且動起來的

• 設定 Canvas 畫布架構與樣式

<canvas id="car"></canvas>

canvas {
  border: solid 2px;
}

var canvas = document.getElementById('car');
var ctx = canvas.getContext('2d');

canvas.width= 250
canvas.height= 250

• 繪製小車子

function carMove () {
//車子本體
  ctx.fillStyle="blue"
  ctx.strokeRect(150, 180, 80, 50)
  ctx.fillRect(150, 180, 80, 50)
  
// 車子輪胎
  ctx.beginPath()
	  ctx.arc(170, 230, 8, 0, Math.PI*2)
	  ctx.arc(210, 230, 8, 0, Math.PI*2)
	ctx.fillStyle="black"
	ctx.fill()
}

carMove()

• 設定時間

// 車子起始動畫位置
var time = 0
function carMove () {
	time++
	
	let carX = time%350-80
	
	ctx.fillStyle="blue"
	ctx.strokeRect(carX, 180, 80, 50)
	ctx.fillRect(carX, 180, 80, 50)
	
	ctx.beginPath()
		ctx.arc(carX+20, 230, 8, 0, Math.PI*2)
	  ctx.arc(carX+60, 230, 8, 0, Math.PI*2)
	ctx.fillStyle="black"
	ctx.fill()
}

// 一秒鐘執行 30 次動畫
setInterval(carMove, 30)

• 讓車子從右側出去，在重左側進入畫面，此時的動畫會變成一整條有殘影的狀態。

// 取畫布的餘數，並再減調車體寬度，讓他完全隱藏在畫布外側
let carX = time%250-80

• 清除畫布

// 從座標 [0,0]座標清除，清除範圍 = 畫布大小
ctx.clearRect(0,0,250,250)

完成

今天簡易基礎的 Canvas 動畫就講解到這邊啦～

其實 Canvas 還可以做出許多酷炫動畫，不過因為 Canvas 動畫實在太吃效能啦～ 筆者在製作時電腦一度當機ヾ(;ﾟ;Д;ﾟ;)ﾉﾞ，所以大家在製作 Canvas 動畫時要記得隨時將檔案存檔，才不會爆掉喔～

參考資料

• MDN - Canvas Basic animations