摘要：關(guān)鍵幀是用來通知瀏覽器在規(guī)定的時(shí)間點(diǎn)上應(yīng)有的屬性值然后填充空白。每一對數(shù)值內(nèi)包含表示三次貝塞爾曲線控制點(diǎn)的和坐標(biāo)。即使每個(gè)控制點(diǎn)的和值的微小差異都會(huì)輸出完全不同的貝塞爾曲線。

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

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

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

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

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

JavaScript 和 CSS 是創(chuàng)建網(wǎng)頁動(dòng)畫的兩條主要途徑。兩種不分好賴，看情況用吧。

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

我們將會(huì)以如何讓元素在 X 和 X 座標(biāo)上移動(dòng)元素 50 像素作為小示例開始。通過持續(xù) 1 秒的 CSS 過渡來移動(dòng)元素。

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

當(dāng)為元素添加 move 類的時(shí)候，改變 transform 的值然后開發(fā)發(fā)生過渡效果。

除了過渡持續(xù)時(shí)間，還有 easing 參數(shù)，它主要負(fù)責(zé)動(dòng)畫體驗(yàn)。該參數(shù)會(huì)在之后詳細(xì)介紹。

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

如下元素：

  Sample content.

然后，使用 JavaScript 來切換每個(gè)動(dòng)畫。

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

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

以上代碼片段為每個(gè)包含 box 類的元素添加 move 類來觸發(fā)動(dòng)畫。

這樣做可以很好為你的網(wǎng)絡(luò)應(yīng)用提供很好的平衡。你就可以專注于使用 JavaScript 來操作應(yīng)用狀態(tài)，然后只需為目標(biāo)元素設(shè)置合適的類，讓瀏覽器來處理動(dòng)畫。如若你選擇這么處理，就可以監(jiān)聽元素的 transitionend 事件，除了處理IE 老版本瀏覽器兼容問題之外。

如下監(jiān)聽 transitioned 事件，該事件會(huì)在動(dòng)畫結(jié)束時(shí)觸發(fā)。

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

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

除了使用 CSS 過渡，還可以使用 CSS 動(dòng)畫，CSS 動(dòng)畫可以讓你更好地控制多帶帶的動(dòng)畫關(guān)鍵幀，持續(xù)時(shí)間以及循環(huán)次數(shù)。

關(guān)鍵幀是用來通知瀏覽器在規(guī)定的時(shí)間點(diǎn)上應(yīng)有的 CSS 屬性值然后填充空白。

看下例子：

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

  /* 動(dòng)畫時(shí)長 */
  animation-duration: 2300ms;

  /* 動(dòng)畫循環(huán)次數(shù) */
  animation-iteration-count: infinite;

  /* 每次奇數(shù)次循環(huán)時(shí)反轉(zhuǎn)動(dòng)畫 */
  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;
  }
}

效果示例－h(huán)ttps://sessionstack.github.i...

通過使用 CSS 動(dòng)畫定義獨(dú)立于目標(biāo)元素的動(dòng)畫本身，然后設(shè)置元素的 animation-name 屬性來使用想要的動(dòng)畫效果。

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

可以使用 autoprefixer 或者 cssnext 來自動(dòng)為樣式添加前綴。

和 CSS 過渡或者 CSS 動(dòng)畫相比，使用 JavaScript 來創(chuàng)建動(dòng)畫要更加復(fù)雜些，但是一般而言，它會(huì)為開發(fā)進(jìn)行提供強(qiáng)大的功能。

一般情況下，可以內(nèi)聯(lián) JavaScript 動(dòng)畫作為代碼的一部分。也可以把它們封裝在其它對象之中。以下為復(fù)現(xiàn)之前描述的 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)";
});

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

通過使用 JavaScript 動(dòng)畫，可以完全控制每一步元素的樣式。這意味著可以隨心所欲地減速，暫停，停止或者翻轉(zhuǎn)動(dòng)畫進(jìn)而操作目標(biāo)元素。由于可以適當(dāng)?shù)胤庋b動(dòng)畫行為，所以當(dāng)在構(gòu)建復(fù)雜面向?qū)ο蟮膽?yīng)用程序的時(shí)候會(huì)特別有用。

自然平滑地移動(dòng)會(huì)讓網(wǎng)絡(luò)應(yīng)用擁有更好的用戶交互體驗(yàn)。

自然條件下，沒有事物可以直線地從一個(gè)點(diǎn)運(yùn)動(dòng)到另一個(gè)點(diǎn)。現(xiàn)實(shí)生活中，在我們周圍的物理世界中物體在移動(dòng)的時(shí)候會(huì)加速或減速，因?yàn)槲覀儾⒉簧钤谡婵諣顟B(tài)下且有不同的因素來影響事物的運(yùn)行狀態(tài)。人類的大腦會(huì)期望感受這樣的移動(dòng)，所以當(dāng)為網(wǎng)絡(luò)應(yīng)用制作動(dòng)畫的時(shí)候，利用此類知識(shí)會(huì)對自己會(huì)有好處。

這是你所應(yīng)該理解的術(shù)語：

『ease in』－開始移動(dòng)緩慢而后加速

『ease out』－開始移動(dòng)迅速而后減速

可以合并兩個(gè)動(dòng)畫，比如 『ease in out』。

Easing 可以使得動(dòng)畫更加自然平滑。

可以為 CSS 過渡和動(dòng)畫選擇任意的 easing 方法。不同的關(guān)鍵字會(huì)影響動(dòng)畫的 easing。你也可以完全自定義 easing 方法。

以下為可以選擇用來控制 easing 的 CSS 關(guān)鍵字：

linear

ease-in

ease-out

ease-in-out

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

不使用任何的 easing 方法的動(dòng)畫即為 linear。

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

值隨著時(shí)間流逝，值等比增加。使用 linear 動(dòng)效，會(huì)讓動(dòng)畫不自然。一般來說，避免使用 linear 動(dòng)效。

使用如下代碼實(shí)現(xiàn)一個(gè)簡單的線性動(dòng)畫：

transition: transform 500ms linear;

正如前所述，和 linear 對比，easing out 讓動(dòng)畫快速啟動(dòng)，結(jié)束時(shí)會(huì)減速。以下為圖示：

總之，easing out 是最適合做界面體驗(yàn)的，因?yàn)榭焖俚貑?dòng)會(huì)給人以快速響應(yīng)的動(dòng)畫的感覺，而結(jié)束時(shí)讓人感覺很平滑這得歸功于不一致的移動(dòng)速度。

打個(gè)比喻，比如那些跑車，首先啟動(dòng)速度相當(dāng)?shù)目欤@就給人以愉悅的感覺。這個(gè)就比較符合人類對于動(dòng)畫的感知。

有很多的方法來實(shí)現(xiàn) ease out 動(dòng)畫效果，而最簡單的即為 CSS 中的 ease-out 關(guān)鍵字。

transition: transform 500ms ease-out;

和 ease-out 動(dòng)畫相反－其啟動(dòng)慢然后結(jié)束時(shí)變快。圖示如下：

和 ease-out 動(dòng)畫比較，由于他們啟動(dòng)緩慢給人以反應(yīng)卡頓的感覺，所以 ease-in 讓人感覺動(dòng)畫不自然。動(dòng)畫結(jié)束時(shí)很快給人一種奇怪的感覺，因?yàn)檎麄€(gè)動(dòng)畫一直在加速，而現(xiàn)實(shí)世界中當(dāng)事物突然停止運(yùn)動(dòng)的時(shí)候會(huì)減速而不是加速。

和 ease-out 和 linear 動(dòng)畫類似，使用 CSS 關(guān)鍵字來實(shí)現(xiàn) ease-in 動(dòng)畫：

transition: transform 500ms ease-in;

該動(dòng)畫為 ease-in 和 ease-out 的合集。圖示如下：

不要設(shè)置動(dòng)畫持續(xù)時(shí)間過長，否則會(huì)給人一種界面不響應(yīng)的感覺。

使用 ease-in-out CSS 關(guān)鍵字來實(shí)現(xiàn) ease-in-out 動(dòng)畫：

transition: transform 500ms ease-in-out;

你可以自定義自己的 easing 曲線，這樣就更有效地控制項(xiàng)目中的動(dòng)畫。

實(shí)際上， ease-in，linear 及 ease 關(guān)鍵字映射到預(yù)定義貝塞爾曲線 ，可以在 CSS transitions specification 和 Web Animations specification 中查找更多關(guān)于貝塞爾曲線的內(nèi)容。

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

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

看下兩張擁有相近但不同坐標(biāo)的控制結(jié)點(diǎn)的貝塞爾曲線圖。

和

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

第二條曲線的樣式為：

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

第一組數(shù)值為起始控制點(diǎn)的 X 和 Y 坐標(biāo)而第二組數(shù)值為第二個(gè)控制點(diǎn)的 X 和 Y 坐標(biāo)。

你得維持動(dòng)畫幀數(shù)為 60 幀每秒，否則會(huì)影響到用戶體驗(yàn)。

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

總之，應(yīng)該盡量避免為會(huì)引起布局和繪制的屬性做動(dòng)畫。對于大多數(shù)現(xiàn)代瀏覽器而言，即把動(dòng)畫局限于 opacity 和 transform 屬性。

可以使用 will-change 來通知瀏覽器將會(huì)更改某個(gè)元素的屬性。這會(huì)允許瀏覽器當(dāng)更改某個(gè)元素屬性的時(shí)候，事先進(jìn)行最恰當(dāng)?shù)膬?yōu)化。但不要濫用 will-change，因?yàn)檫@樣做會(huì)適得其反，使得瀏覽器浪費(fèi)更多的資源，從而造成更多的性能問題。

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

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

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

這個(gè)問題是無解的。只需謹(jǐn)記以下原則：

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

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

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

良好的動(dòng)畫為項(xiàng)目添加一層令人愉快和互動(dòng)的用戶體驗(yàn)。你可以隨意使用動(dòng)畫，不管是寬度，調(diào)試，定位，顏色或背景色，但必須注意潛在的性能瓶頸。糟糕的動(dòng)畫選擇會(huì)影響用戶體驗(yàn)，所以動(dòng)畫必須是高效和適當(dāng)?shù)摹１M可能減少使用動(dòng)畫。只使用動(dòng)畫來讓用戶體驗(yàn)流暢自然而不是濫用。

不要因?yàn)橹皇菫榱擞枚ナ褂脛?dòng)畫。相反，有策略性地使用動(dòng)畫來加強(qiáng)用戶交互體驗(yàn)。避免使用不必要的動(dòng)畫來打斷或者阻礙用戶的使用。

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

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

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

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

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

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