前言

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

何為動畫/游戲

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

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

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

H5相關(guān)技術(shù)概述

canvas

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

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

用戶交互

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

• 演示所有鼠標(biāo)事件
• 演示鼠標(biāo)按下坐標(biāo)獲取
• 演示觸摸事件
• 演示鍵盤事件
• 演示鍵盤上、下、左、右

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

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; };

動畫循環(huán)

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

基于幀的動畫（requestAnimationFrame）

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

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

基于定時器的動畫

在requestAnimationFrame還未出現(xiàn)的時代，一般是用setTimeout和setInterval實現(xiàn)動畫，也可以使用他們模擬requestAnimationFrame，只需把時間間隔設(shè)為1000/60毫秒，也就是大約16.7毫秒執(zhí)行下一個循環(huán)，當(dāng)然你也可以定義自己需要的幀率，達到游戲中常見的鎖幀效果。
所謂模擬，另一層意思就是不可能相同，我們的程序在瀏覽器沙盒中運行是不知道顯卡和顯示器硬件實際是否在刷新的，但瀏覽器是可以知道的，所以瀏覽器才可以真正的知道什么時候屏幕會刷新，更好的配合硬件工作，這也是requestAnimationFrame優(yōu)于定時器的原因。
基于此我們可以創(chuàng)造一個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中給定時器規(guī)定的時間間隔僅僅表示最少的時間，而非確切的時間，對于過復(fù)雜需要超過時間間隔才執(zhí)行完的程序，執(zhí)行時間就會被延后。

基于時間的動畫

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

計算機中一些數(shù)學(xué)概念與標(biāo)準(zhǔn)的差異

弧度(radian)與角度(degree)

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

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

坐標(biāo)系

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

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

這個坐標(biāo)系還導(dǎo)致了另一個問題，就是角度的正負(fù)值是與標(biāo)準(zhǔn)坐標(biāo)系相反的，如下圖，順時針角度才是正值，逆時針為負(fù)值。

超強干貨來襲 云風(fēng)專訪：近40年碼齡，通宵達旦的技術(shù)人生

總結(jié)

以上是生活随笔為你收集整理的【30分钟学完】canvas动画|游戏基础(1)：理论先行的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。