摘要：關鍵幀是用來通知瀏覽器在規定的時間點上應有的屬性值然后填充空白。每一對數值內包含表示三次貝塞爾曲線控制點的和坐標。即使每個控制點的和值的微小差異都會輸出完全不同的貝塞爾曲線。

原文請查閱這里，本文采用知識共享署名 4.0 國際許可協議共享，BY Troland。

本系列持續更新中，Github 地址請查閱這里。

這是 JavaScript 工作原理的第十三章。

正如你所知，動畫在創建令人嘆服的網絡應用中扮演著一個關鍵角色。由于用戶越來越注重用戶體驗，商戶開始意識到完美，令人愉悅的用戶體驗的重要性，結果網絡應用變得越來越重并且擁有更多動態交互的功能。這就要求網絡應用提供更加復雜的動畫來實現平滑的狀態過渡貫穿于用戶的使用過程當中。現在，這已經司空見慣。用戶變得越來越挑剔，他們潛意識期許可以獲得快速響應和良好交互的用戶界面。

然而，讓界面具有動畫效果不一定是件簡單的事情。動畫的時機，方面及采用何種動畫效果都是很模糊的概念。

JavaScript 和 CSS 是創建網頁動畫的兩條主要途徑。兩種不分好賴，看情況用吧。

使用 CSS 動畫是讓元素在屏幕上移動的最簡單方法。

我們將會以如何讓元素在 X 和 X 座標上移動元素 50 像素作為小示例開始。通過持續 1 秒的 CSS 過渡來移動元素。

.box {
  -webkit-transform: translate(0, 0);
  -webkit-transition: -webkit-transform 1000ms;

  transform: translate(0, 0);
  transition: transform 1000ms;
}

.box.move {
  -webkit-transform: translate(50px, 50px);
  transform: translate(50px, 50px);
}

當為元素添加 move 類的時候，改變 transform 的值然后開發發生過渡效果。

除了過渡持續時間，還有 easing 參數，它主要負責動畫體驗。該參數會在之后詳細介紹。

如果通過以上的代碼片段可以創建多帶帶的樣式類來操作動畫，那么也可以使用 JavaScript 來切換每個動畫。

如下元素：

  Sample content.

然后，使用 JavaScript 來切換每個動畫。

var boxElements = document.getElementsByClassName("box"),
    boxElementsLength = boxElements.length,
    i;

for (i = 0; i < boxElementsLength; i++) {
  boxElements[i].classList.add("move");
}

以上代碼片段為每個包含 box 類的元素添加 move 類來觸發動畫。

這樣做可以很好為你的網絡應用提供很好的平衡。你就可以專注于使用 JavaScript 來操作應用狀態，然后只需為目標元素設置合適的類，讓瀏覽器來處理動畫。如若你選擇這么處理，就可以監聽元素的 transitionend 事件，除了處理IE 老版本瀏覽器兼容問題之外。

如下監聽 transitioned 事件，該事件會在動畫結束時觸發。

var boxElement = document.querySelector(".box"); // 獲取第一個包含 box 類的元素
boxElement.addEventListener("transitionend", onTransitionEnd, false);

function onTransitionEnd() {
  // Handle the transition finishing.
}

除了使用 CSS 過渡，還可以使用 CSS 動畫，CSS 動畫可以讓你更好地控制多帶帶的動畫關鍵幀，持續時間以及循環次數。

關鍵幀是用來通知瀏覽器在規定的時間點上應有的 CSS 屬性值然后填充空白。

看下例子：

/**
 * 該示例是沒有包含瀏覽器前綴的精簡版。加上以后會更加準確些。
 *
 */
.box {
  /* 選擇動畫名稱 */
  animation-name: movingBox;

  /* 動畫時長 */
  animation-duration: 2300ms;

  /* 動畫循環次數 */
  animation-iteration-count: infinite;

  /* 每次奇數次循環時反轉動畫 */
  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.4;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(150px, 200px);
    opacity: 0.2;
  }

  100% {
    transform: translate(40px, 30px);
    opacity: 0.8;
  }
}

效果示例－https://sessionstack.github.i...

通過使用 CSS 動畫定義獨立于目標元素的動畫本身，然后設置元素的 animation-name 屬性來使用想要的動畫效果。

CSS 動畫仍然是需要加瀏覽器前綴的，在 Safari, Safari 移動瀏覽器和 Android 端添加 -webkit- 前綴。Chrome, Opera, Internet Explorer, and Firefox?端全部不需要添加前綴。有很多工具可以用來創建包含任意前綴的樣式，這樣就不需要在源文件中帶樣式前綴。

可以使用 autoprefixer 或者 cssnext 來自動為樣式添加前綴。

和 CSS 過渡或者 CSS 動畫相比，使用 JavaScript 來創建動畫要更加復雜些，但是一般而言，它會為開發進行提供強大的功能。

一般情況下，可以內聯 JavaScript 動畫作為代碼的一部分。也可以把它們封裝在其它對象之中。以下為復現之前描述的 CSS 過渡的 JavaScript 代碼：

var boxElement = document.querySelector(".box");
var animation = boxElement.animate([
  {transform: "translate(0)"},
  {transform: "translate(150px, 200px)"}
], 500);
animation.addEventListener("finish", function() {
  boxElement.style.transform = "translate(150px, 200px)";
});

默認情況下，網頁動畫只是修改了元素的展示效果。如果想要讓元素停留在其移動到的目標位置，那么就得在動畫結束的時候修改其底層樣式。這也是為什么在以上的示例中監聽 finish 事件然后設置 box.style.transform 屬性為 translate(150px, 200px) 的原因，該屬性值和 CSS 動畫執行的第二個樣式轉換是一樣的。

通過使用 JavaScript 動畫，可以完全控制每一步元素的樣式。這意味著可以隨心所欲地減速，暫停，停止或者翻轉動畫進而操作目標元素。由于可以適當地封裝動畫行為，所以當在構建復雜面向對象的應用程序的時候會特別有用。

自然平滑地移動會讓網絡應用擁有更好的用戶交互體驗。

自然條件下，沒有事物可以直線地從一個點運動到另一個點。現實生活中，在我們周圍的物理世界中物體在移動的時候會加速或減速，因為我們并不生活在真空狀態下且有不同的因素來影響事物的運行狀態。人類的大腦會期望感受這樣的移動，所以當為網絡應用制作動畫的時候，利用此類知識會對自己會有好處。

這是你所應該理解的術語：

『ease in』－開始移動緩慢而后加速

『ease out』－開始移動迅速而后減速

可以合并兩個動畫，比如 『ease in out』。

Easing 可以使得動畫更加自然平滑。

可以為 CSS 過渡和動畫選擇任意的 easing 方法。不同的關鍵字會影響動畫的 easing。你也可以完全自定義 easing 方法。

以下為可以選擇用來控制 easing 的 CSS 關鍵字：

linear

ease-in

ease-out

ease-in-out

讓我們深入了解并查看他們的效果。

不使用任何的 easing 方法的動畫即為 linear。

以下為 linear 過渡效果的圖示：

值隨著時間流逝，值等比增加。使用 linear 動效，會讓動畫不自然。一般來說，避免使用 linear 動效。

使用如下代碼實現一個簡單的線性動畫：

transition: transform 500ms linear;

正如前所述，和 linear 對比，easing out 讓動畫快速啟動，結束時會減速。以下為圖示：

總之，easing out 是最適合做界面體驗的，因為快速地啟動會給人以快速響應的動畫的感覺，而結束時讓人感覺很平滑這得歸功于不一致的移動速度。

打個比喻，比如那些跑車，首先啟動速度相當的快，這就給人以愉悅的感覺。這個就比較符合人類對于動畫的感知。

有很多的方法來實現 ease out 動畫效果，而最簡單的即為 CSS 中的 ease-out 關鍵字。

transition: transform 500ms ease-out;

和 ease-out 動畫相反－其啟動慢然后結束時變快。圖示如下：

和 ease-out 動畫比較，由于他們啟動緩慢給人以反應卡頓的感覺，所以 ease-in 讓人感覺動畫不自然。動畫結束時很快給人一種奇怪的感覺，因為整個動畫一直在加速，而現實世界中當事物突然停止運動的時候會減速而不是加速。

和 ease-out 和 linear 動畫類似，使用 CSS 關鍵字來實現 ease-in 動畫：

transition: transform 500ms ease-in;

該動畫為 ease-in 和 ease-out 的合集。圖示如下：

不要設置動畫持續時間過長，否則會給人一種界面不響應的感覺。

使用 ease-in-out CSS 關鍵字來實現 ease-in-out 動畫：

transition: transform 500ms ease-in-out;

你可以自定義自己的 easing 曲線，這樣就更有效地控制項目中的動畫。

實際上， ease-in，linear 及 ease 關鍵字映射到預定義貝塞爾曲線 ，可以在 CSS transitions specification 和 Web Animations specification 中查找更多關于貝塞爾曲線的內容。

讓我們看一下貝塞爾曲線的運行原理。一條貝塞爾曲線包含四個點，或者準確地說是包含兩組數值。每一對數值內包含表示三次貝塞爾曲線控制點的 X 和 Y 坐標。貝塞爾曲線的起點坐標為 (0, 0) ，終點坐標為 (1, 1)。可以設置兩組數值對。每個控制點的 X 軸值必須在 [0, 1] 之間，而 Y 軸值可以超過 [0, 1]，雖然規范并沒有明確允許超過的數值。即使每個控制點的 X 和 Y 值的微小差異都會輸出完全不同的貝塞爾曲線。

查看維基百科關于貝塞爾曲線的說明，通俗一點講即，現在所說的即三次貝塞爾曲線，該曲線由四個點組成，P0, P1, P2, P3 組成，那么，P0 和 P1 組成一對，P2 和 P3 組成一對，P1 和 P2 即為控制點，P0 和 P3 即為起始和結束節點。如下圖所示：

看下兩張擁有相近但不同坐標的控制結點的貝塞爾曲線圖。

和

如你所見，兩張圖有很大不同。第一個控制點矢量差異為 (0.045, 0.183)，而第二個控制點矢量差異為 (-0.427, -0.054)。

第二條曲線的樣式為：

transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);

第一組數值為起始控制點的 X 和 Y 坐標而第二組數值為第二個控制點的 X 和 Y 坐標。

你得維持動畫幀數為 60 幀每秒，否則會影響到用戶體驗。

和世界上其它事物一樣，動畫會有性能開銷。一些屬性的動畫性能開銷相比其它屬性要小。比如，為元素的 width 和 height 做動畫會更改其幾何結構并且可能會造成頁面上的其它元素移動或者大小的改變。這一過程被稱為布局。之前的文章中有詳細介紹過布局和渲染。

總之，應該盡量避免為會引起布局和繪制的屬性做動畫。對于大多數現代瀏覽器而言，即把動畫局限于 opacity 和 transform 屬性。

可以使用 will-change 來通知瀏覽器將會更改某個元素的屬性。這會允許瀏覽器當更改某個元素屬性的時候，事先進行最恰當的優化。但不要濫用 will-change，因為這樣做會適得其反，使得瀏覽器浪費更多的資源，從而造成更多的性能問題。

為 transforms 和 opacity 添加 will-change 代碼如下：

.box {
  will-change: transform, opacity;
}

該屬性在 Chrome, Firefox，Opera 得到很好的兼容。

這個問題是無解的。只需謹記以下原則：

基于 CSS 的動畫和原生支持的網頁動畫一般都是由被稱為『合成線程』的線程來處理的。這不同于瀏覽器的主線程，主線程是用來執行計算樣式，布局，繪制及 JavaScript 代碼的。這即意味著如果瀏覽器在主線程上運行耗時的任務，不會中斷動畫的運行。

很多時候，也可以由合成線程來處理 transforms 和 opacity 屬性值的更改。

如果有任何動畫觸發繪制，布局或者同時觸發兩者，『主線程』將不得不來進行處理。事實是基于 CSS 和 JavaScript 的動畫和布局或者繪制的性能開銷將很有可能會阻塞所有和 CSS 或者 JavaScript 運行相關的工作，從而使得渲染問題變得毫無意義。

良好的動畫為項目添加一層令人愉快和互動的用戶體驗。你可以隨意使用動畫，不管是寬度，調試，定位，顏色或背景色，但必須注意潛在的性能瓶頸。糟糕的動畫選擇會影響用戶體驗，所以動畫必須是高效和適當的。盡可能減少使用動畫。只使用動畫來讓用戶體驗流暢自然而不是濫用。

不要因為只是為了用而去使用動畫。相反，有策略性地使用動畫來加強用戶交互體驗。避免使用不必要的動畫來打斷或者阻礙用戶的使用。

比糟糕的動畫使用更糟的是那些會引起頁面卡頓的動畫。這類動畫讓用戶感到懊喪和不快。

https://developers.google.com...

https://developers.google.com...

https://developers.google.com...

可以看下網上的這篇介紹貝塞爾曲線的文章，那么可以如何使用貝塞爾曲線來做出令人驚嘆的動畫呢？

本系列持續更新中，Github 地址請查閱這里。