摘要：所建議的刷新率是秒幀，大部分瀏覽器是遵循這一標準的。基于時間的動畫其實無論是還是定時器，都不能保證以特定速率播放。將物體每幀移動距離，轉變為物體每秒移動距離。

本文雖說是基礎教程，但這是相對動畫/游戲領域來說，在前端領域算是中級教程了，不適合前端小白或萌新。閱讀前請確保自己對前端三大件（JavaScript+CSS+HTML）的基礎已經十分熟悉，而且有高中水平的數學和物理知識。demo采用ES6編寫，遵循Airbnb規范，不依賴第三方框架或庫，請在現代瀏覽器里運行。
大部分例子來自《Foundation HTML5 Animation with JavaScript》，感謝這本書作者的辛勞和啟發。本教程也可以算是該書的精(tian)簡(you)優(jia)化(cu)版，既是我的個人讀書筆記，也是經驗總結，方便沒空看書的忙人閱讀。
本人能力有限，歡迎牛人共同討論，批評指正。

【科普】動畫是指由許多幀靜止的畫面，以一定的速度（如每秒16張）連續播放時，肉眼因視覺殘象產生錯覺，而誤以為畫面活動的作品。為了得到活動的畫面，每個畫面之間都會有細微的改變。而畫面的制作方式，最常見的是手繪在紙張或賽璐珞片上，其它的方式還包含了運用黏土、模型、紙偶、沙畫等。

使用H5技術實現動畫原理跟傳統動畫是一樣的，都是利用“視覺暫留”現象，計算機通過一定的規則運算得到一個畫面（像素數據），然后以一定速度連續播放就形成動畫。但也有些許不同，傳統動畫的重點是繪畫技法的表現，也就是每張圖畫得漂亮，而計算機動畫更關心的是如何確立運算規則，這也是數學和物理知識的運用。
在計算機領域，動畫和游戲界限并不明顯，他們的差別就是是否有交互性，如果玩家有一定的改變動畫的操作，再加上一些游戲規則，那就可以稱得上是游戲了。

【PS】順便一提，常有疑問為什么電腦玩游戲卡，看電影不卡呢？  
因為所謂的數字版電影，不論是三維動畫還是二維動畫，都是已渲染好的畫面，也就是數據是一幀幀的圖片，而計算機只需要按順序換圖片就能播放。但游戲的畫面是實時計算出來的，如果計算機性能不行，也就是無法在下一幀完成渲染，畫面自然就會卡頓。在PC和主機性能低下的年代，將部分游戲畫面預渲染后放入游戲也是常見的提高性能的做法。

【科普】 是 HTML5 新增的元素，可用于通過使用JavaScript中的腳本來繪制圖形。例如，它可以用于繪制圖形，制作照片，創建動畫，甚至可以進行實時視頻處理或渲染。

作為上世代flash的升級替代品，簡單來說就是瀏覽器提供一個畫布，你的工作就是用js操作畫筆在上面畫畫，不斷重復畫畫和擦除的工作，就可以實現動畫。
canvas相關文檔

交互是游戲的根本，H5上的交互不外乎鼠標、觸摸和鍵盤這幾種，其實就是DOM標準的事件流。我們在事件中拿到屏幕上的坐標或鍵盤的鍵位代號，執行相應的操作。這不是本教程重點，不懂的右轉HTML相關基礎，這里就不細說了。
這里有些簡單例子，可以在控制臺看到效果：

演示所有鼠標事件

演示鼠標按下坐標獲取

演示觸摸事件

演示鍵盤事件

演示鍵盤上、下、左、右

demo中為了方便使用封裝了這些交互方法，放在工具庫utils.js里，這里以獲取鼠標事件，觸摸事件同理為例。

utils.captureMouse = function captureMouse(element) {
  const mouse = {
    x: 0,
    y: 0,
  };
  element.addEventListener("mousemove", (event) => {
    let x;
    let y;
    if (event.pageX || event.pageY) {
      x = event.pageX;
      y = event.pageY;
    } else {
      x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    x -= element.offsetLeft;
    y -= element.offsetTop;

    mouse.x = x;
    mouse.y = y;
  }, false);

  return mouse;
};

這是計算機動畫在代碼層面的核心，簡單來說就是一個循環調用（不斷遞歸）的過程，每次循環都是一幀畫面的產生，實現方式大體可以歸納為三類。

【科普】在視頻領域，電影、電視、數字視頻等可視為隨時間連續變換的許多張畫面，而幀是指每一張畫面。

一般來說1秒15幀就可讓人眼不發覺黑暗的間隔，25幀就可感覺流暢，每秒鐘幀數 (fps) 愈多，所顯示的動作就會愈流暢。W3C所建議的刷新率是1秒60幀，大部分瀏覽器是遵循這一標準的。
requestAnimationFrame是H5加入的函數，用法類似于setTimeout，用于告訴瀏覽器下一幀的時候該干什么，比如一個物體每1幀要移動多少距離。它提供基于瀏覽器的優化實現，是實現H5動畫的首選，所有demo都有使用。至于它優化了什么，下面會提到。
requestAnimationFrame文檔鏈接

在requestAnimationFrame還未出現的時代，一般是用setTimeout和setInterval實現動畫，也可以使用他們模擬requestAnimationFrame，只需把時間間隔設為1000/60毫秒，也就是大約16.7毫秒執行下一個循環，當然你也可以定義自己需要的幀率，達到游戲中常見的鎖幀效果。
所謂模擬，另一層意思就是不可能相同，我們的程序在瀏覽器沙盒中運行是不知道顯卡和顯示器硬件實際是否在刷新的，但瀏覽器是可以知道的，所以瀏覽器才可以真正的知道什么時候屏幕會刷新，更好的配合硬件工作，這也是requestAnimationFrame優于定時器的原因。
基于此我們可以創造一個polyfill放到工具庫utils.js里。

if (!window.requestAnimationFrame) {
  window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function timeout(callback) {
      return window.setTimeout(callback, 1000 / 60);
    });
}

特別注意：js中給定時器規定的時間間隔僅僅表示最少的時間，而非確切的時間，對于過復雜需要超過時間間隔才執行完的程序，執行時間就會被延后。

其實無論是requestAnimationFrame還是定時器，都不能保證以特定速率播放。也就是說復雜的動畫在性能較差的計算機上播放，會比它設計速度慢。這個在游戲的體驗上是十分不友好的，所以就有了游戲里常見的跳幀做法。
其實就是使用真實的時間來度量每個物體的運動變化，而不是依靠每幀的變化。將物體每幀移動距離，轉變為物體每秒移動距離。
由于demo都是簡單動畫，所以暫時不會使用這個操作。

日常我們使用角度會比較多，應該沒有人不知道一個圓是360度吧（笑）。但計算機中不使用角度概念而是使用弧度。學校也有說過，這里就不講解他們的關系了，只要明確一圓周是2π弧度，兩者的轉換用代碼表示就是：

let radians = degrees * Math.PI / 180;
let degrees = radians * 180 / Math.PI;

計算機里的坐標系也不是日常使用的標準坐標系，可以說是標準坐標系的顛倒版本，如下圖，越往右x軸值越大，越往下y軸值越大，反之亦然。

【科普】這個坐標系有一定的歷史背景，因為“大屁股”顯示器里的電子槍是從左往右，從上往下掃描屏幕的。

這個坐標系還導致了另一個問題，就是角度的正負值是與標準坐標系相反的，如下圖，順時針角度才是正值，逆時針為負值。