摘要：直到年，世界上第一部動畫片滑稽臉的幽默相問世。上一次視神經傳遞的圖像將會在大腦中存留，直到下一次神經信號到達。移動設備還是相當慘烈，并沒有開始支持。市面上有很多動畫庫，大家可以開箱即用。有一些是針對操作的，也有一些是針對對象。

138.2億年前，世界上沒有時間和空間，或許世界都不存在，在一個似有似無的點上，匯集了所有的物質，它孕育著無限的能量與可能性。

巨大的內力已無法被抑制，瞬間爆發，它爆炸了！世界上有了時間和空間，隨著歲月的變遷，時光的流逝，無數的星系、恒星、衛星、彗星形成。我們生活的地球，只是茫茫宇宙中的一個小小的天體，或許在遙遠的宇宙的另一邊，會有平行世界的存在，或許在那里，我們可能是醫生、老師、公務員。科學家說我們的宇宙正在加速度的膨脹，暗能量在無限吞噬著暗物質，未來的世界將會變得虛無縹緲。

宇宙的形成，帶來了無限可能性，人類釋放著欲望和克制，對宇宙的渴望產生于公元前五世紀，古巴比倫人通過觀察天體的位置以及外觀變化，來預測人世間的各種事物。在遙遠的古羅馬，人們也舞弄著靈魂，把不羈的想象賦予肉體。Anim，來源于拉丁語，代表著靈魂與生命，代表著所有與生俱來。似乎世間萬物都存在聯系，宇宙、自然都存在靈魂。

兩萬五前年錢的石器時代，石洞中的野獸奔跑分析圖，這是人類開始試圖捕捉動作最早證據。文藝復興時期的達芬奇畫作上，用兩只手臂兩條腿來標識上下擺動的動作，在一張畫作上做出不同時間的兩個動作。
直到1906年，世界上第一部動畫片《滑稽臉的幽默相》問世。

所以動畫是否就是將多個畫面連起來播放呢？

時間是連續的嗎？是可以無線分割的嗎？我也不太清楚，你看到的流星、人們的動作是連續的嗎？或許是吧，畢竟現實生活中還沒有像瞬間移動這種事情發生吧。

神經可能不是連續的，生物課學過，神經的傳遞是一個電信號傳遞過程，并且是顆粒的(神經信號)，那么我們看到的東西在我們腦海里的成像一定不是連續的。

那么我們為什么能看到連續的動作呢？

視覺暫留（Persistence of vision），讓我們看到了連續的畫面，視神經反應速度大約為1/16秒，每個人不太一樣，有些人高一點，一些人低一點。上一次視神經傳遞的圖像將會在大腦中存留，直到下一次神經信號到達。維基百科上說，日常用的日光燈每秒鐘大約會熄滅100次，但是你并沒有感覺。

一般電影的在幀率在24FPS以上，一般30FPS以上大腦會認為是連貫的，我們玩的游戲一般在30FPS，高幀率是60FPS。

小時候一定看過翻頁動畫吧，可以看一看翻頁動畫-地球進化史

Atwood 定律：Any application that can be written in JavaScript will eventually be written in JavaScript.

前端做動畫不是什么新鮮事了，從jQuery時代，到當下，無不是前端動畫橫行的時代。

我們知道多張不同的圖像連在一起就變成了動態的圖像。

在前端的世界里，瀏覽器在視覺暫留時間內，連續不斷的逐幀輸出圖像。每一幀輸出一張圖像。

提及動畫一定會討論到幀率(FPS, Frame Per Second)，代表每秒輸出幀數，也就是瀏覽器每秒展示出多少張靜態的圖像。

CSS3 動畫是當今盛行的 Web 端制作動畫的方式之一，對于移動設備來說覆蓋率已經非常廣泛，在日常開發中可以使用。CSS3 動畫只能通過對 CSS 樣式的改變控制 DOM 進行動畫

CSS3 Animation MDN

CSS3 Translate MDN

WebAnimation 還在草案階段，在Chrome可以嘗試使用一下。移動設備還是相當慘烈，iOS 并沒有開始支持。

Element Animation MDN

CSS3 和 WebAnimation 都只能作用于DOM，那么，如果我們想讓 Canvas 上的對象產生動畫，那我們該怎么辦呢？

既然我們知道動畫的原理，其實就是讓用戶看到連續的圖片，并且每一張圖片是有變化的。

對于事物來講，我們可以通過改變某些數值來修改他的屬性，從來改變他的外在展示。比如正方形的邊長，顏色的RGB值，臺風的位置（世界坐標），在每一幀去改變這些數值，根據這些數值將對象繪依次制到屏幕上，將會產生動畫。

通過上面的描述，我們知道，實現一個動畫，其實是數值隨時間變化，以幀為時間單位。

在很久很久以前，JavaScript 使用 setInterval 進行定時調用函數。所以可以使用setInterval來進行數值的改變。

為了更好的讓各位前端小哥哥小姐姐們做動畫，出現了requestAnimationFrame，requestAnimationFrame 接收一個函數，這個函數將在下一幀渲染之前執行，也就是說，不需要太多次的計算，只要在下一幀渲染之前，我們將需要修改的數值修改掉即可。requestAnimationFrame 的幀率和硬件以及瀏覽器有關，一般是60FPS(16.66666666ms/幀)。

我們利用 Dom 進行動畫的演示~

創建一個方塊

設置寬高和背景顏色

.box {
    width: 100px;
    height: 100px;
    background: red;
}

const box = document.querySelector(".box") // 獲取方塊元素
let value = 0 // 設置初始值
// 創建每一幀渲染之前要執行的方法
const add = () => {
    requestAnimationFrame(add) // 下一幀渲染之前繼續執行 add 方法
    value += 5 // 每幀加數值增加5
    box.style.transform = `translateX(${value}px)` // 將數值設置給 方塊 的 css 屬性 transform 屬性可以控制元素在水平方向上的位移
}
requestAnimationFrame(add) // 下一幀渲染之前執行 add 方法

這樣，方塊每幀向右移動 5 像素，每秒移動60*5=300像素，不是每秒跳動一下，而是一秒在300像素內均勻移動哦。

上一個demo實現了小方塊從左到右的移動，但是貌似他會永無止境的移動下去，直到數值溢出，小時候學過flash的朋友都知道補間動畫，其實就是讓小方塊0px到300px平滑移動。其實就是固定的時間點，有固定的位置。

所以我們只需要根據運動的已過時間的百分比去計算數值。

保持之前的 HTML 和 CSS 不變

/**
 *  執行補間動畫方法
 *
 * @param      {Number}    start     開始數值
 * @param      {Number}    end       結束數值
 * @param      {Number}    time      補間時間
 * @param      {Function}  callback  每幀的回調函數
 */
function animate(start, end, time, callback) {
    let startTime = performance.now() // 設置開始的時間戳
    let differ = end - start // 拿到數值差值
    // 創建每幀之前要執行的函數
    function loop() {
        raf = requestAnimationFrame(loop) // 下一陣調用每幀之前要執行的函數
        const passTime = performance.now() - startTime // 獲取當前時間和開始時間差
        let per = passTime / time // 計算當前已過百分比
        if (per >= 1) { // 判讀如果已經執行
              per = 1 // 設置為最后的狀態
              cancelAnimationFrame(raf) // 停掉動畫
        }
        const pass = differ * per // 通過已過時間百分比*開始結束數值差得出當前的數值
        callback(pass) // 調用回調函數，把數值傳遞進去
    }
    let raf = requestAnimationFrame(loop) // 下一陣調用每幀之前要執行的函數
}

我們調用一下補間動畫，讓數值經過1秒勻速從0變成400。

let box = document.querySelector()
animate(0, 400, 1000, value => {
    box.style.transform = `translateX(${value}px)` // 將數值設置給 方塊 的 css 屬性 transform 屬性可以控制元素在水平方向上的位移
})

一個簡單的勻速補間動畫就這么被我們做好了。

那萬一，這個動畫不是非勻速的，比如抖一抖啊，彈一彈，那該怎么辦呢？

當然也是一樣，根據已過時間的百分比去計算數值

時間是勻速的，但是數值不是，如果數值變化是有規律的，那么我們就可以使用時間來表示數值，創建一個接收時間比例（當前時間百分比），返回當前位置比例（當前位置百分比）的方法。

我們稱這個方法叫做緩動方法。

如果速度從慢到快，我們可以把時間和數值的圖像模擬成以下的樣子。

公式為 rate = time ^ 2

對應的函數應該是

function  easeIn(time) { // 接收一個當前的時間占總時間的百分比比
    return time ** 2
}

這個實現加速后抖動結束的效果，在Time小于0.6時是一個公式，time大于0.6是另外一個公式。

Time < 0.6 時： Rate = Time / 0.6 ^ 2

Time > 0.6 時： Rate = Math.sin((Time-0.6) ((3 Math.PI) / 0.4)) * 0.2 + 1

最終實現的函數是

function shake(time) {
    if (time < 0.6) {
        return (time / 0.6) ** 2
    } else {
        return Math.sin((time-0.6) * ((3 * Math.PI) / 0.4)) * 0.2 + 1
    }
}

我們改造一下之前的 animate 函數，接收一個 easing 方法。

/**
 *  執行補間動畫方法
 *
 * @param      {Number}    start     開始數值
 * @param      {Number}    end       結束數值
 * @param      {Number}    time      補間時間
 * @param      {Function}  callback  每幀回調
 * @param      {Function}  easing    緩動方法，默認勻速
 */
function animate(start, end, time, callback, easing = t => t) {
    let startTime = performance.now() // 設置開始的時間戳
    let differ = end - start // 拿到數值差值
    // 創建每幀之前要執行的函數
    function loop() {
        raf = requestAnimationFrame(loop) // 下一陣調用每幀之前要執行的函數
        const passTime = performance.now() - startTime // 獲取當前時間和開始時間差
        let per = passTime / time // 計算當前已過百分比
        if (per >= 1) { // 判讀如果已經執行
            per = 1 // 設置為最后的狀態
            cancelAnimationFrame(raf) // 停掉動畫
        }
        const pass = differ * easing(per) // 通過已過時間百分比*開始結束數值差得出當前的數值
        callback(pass)
    }
    let raf = requestAnimationFrame(loop) // 下一陣調用每幀之前要執行的函數
}

測試一下，將我們剛剛創建的 easing 方法傳進來

加速運動

let box = document.querySelector(".box")
animate(0, 500, 400, value => {
    box.style.transform = `translateX(${value}px)` // 將數值設置給 方塊 的 css 屬性 transform 屬性可以控制元素在水平方向上的位移
}, easeIn)

加速后抖一抖

let box = document.querySelector(".box")
animate(0, 500, 400, value => {
    box.style.transform = `translateX(${value}px)` // 將數值設置給 方塊 的 css 屬性 transform 屬性可以控制元素在水平方向上的位移
}, shake)

這些只是 JavaScript 動畫基礎中的基礎，理解動畫的原理后，再做動畫就更得心應手了。

市面上有很多JS動畫庫，大家可以開箱即用。有一些是針對DOM操作的，也有一些是針對 JavaScript 對象。實現原理你都已經懂了。

上述代碼已發布到Github: https://github.com/fanmingfei/animation-base

我的另外兩篇關于動畫的文章：

為何 Canvas 內元素動畫總是在顫抖？

前端動畫/游戲開發 requestAnimationFrame 之 鎖幀