我們認識了動畫以及繪製 canvas 動畫的 function，那我們究竟該如何讓動畫動起來呢？如果以過去的前端開發經驗中的 css animaion 來說，我們會用 animation 讓我們的影像 img 動起來。那 Canvas 呢？

透過 Javascript 時間函示或是事件監測控制動畫

在動畫設計中，我們可以使用 setInterval(function, delay) 以及 setTimeout(function, delay) 的 API 來實現需要一直重複每隔一段時間規律變動的動畫，若使用 setInterval 我們就可以達到讓繪製好的動畫 function 持續的被呼叫。例如時鐘動畫、日出到日落的動畫都可以用此方式實現。

除了常使用的 Javascript 函數之外，在絕大多數的網頁開發時使用的觸發機制是「事件監測」addeventlistner ，畢竟這些動畫存在的目的都是為了讓使用體驗更好、互動效果更佳。例如 Line 的聊天室在特殊節日時輸入相關的關鍵字，背景就會有動畫產生，這就是監聽事件產生動畫的實際案例。

實作飛起來的動畫

接著我們實作一個保護台北這座城市的飛天小女警～讓他們真的飛起來吧！我們先給動畫繪製設計一個 function drawPowerpuff() ，在這個函式裡需要先做一個合成效果，利用 globalCompositeOperation 的 destination-over api，我們可以將新圖形繪製在舊圖形之下、清除局部繪製的區域。

而 clearRect() 函式則可用以清除整個可視範圍的矩形區域，若沒有用 clearRect() 的話，動畫會像右下角的圖片範例，每一次繪製都保留在畫布上，影分身就不是我們要的動畫效果了。

完成初步的動畫設定後，就進入重頭戲，繪製圖像本身啦！因為時間關係我們就不自己慢慢畫圖慢慢去背，我直接找現成的小女警～給三個角色不同的位移效果，讓大家可以看到不一樣的動畫移動軌跡。花花的話走對角線，因為每一秒她都會右移 10 ，下移 5。而泡泡則是平行的飛，每秒都右移 15。最後毛毛比較複雜一點，我們讓她以 (280, 0) 為圓心角，每秒轉 6 度。

重頭戲設計好之後，再使用 setInterval 的方式，因為放在最外層所以是渲染頁面時就會去執行 setInterval，並且呼叫 drawPowerPuff ，這樣就完成我們的飛天小女警飛行動畫囉！希望大家喜歡這個範例，對完整程式碼感興趣的話一樣可以看我的 Codepen：點我看飛天小女警

呼～一天又平安的過去了，感謝飛天小女警的努力
（沒錯做了這個範例只是為了鋪陳這句話）