Web 動效四大才子簡述

摘要： 本文作者：張鑫旭 原創宣告：本文為閱文前端團隊 YFE 成員出品，請尊重原創，轉載請聯絡公眾號 ( id: yuewen_YFE ) 獲取授權，並註明作者、出處和連結。 Web 動效四大才子主要指下面這 4 個： CSS3 動畫 Web animation SV...

本文作者：張鑫旭

原創宣告：本文為閱文前端團隊 YFE 成員出品，請尊重原創，轉載請聯絡公眾號 ( id: yuewen_YFE ) 獲取授權，並註明作者、出處和連結。

Web 動效四大才子主要指下面這 4 個：

1. CSS3 動畫
2. Web animation
3. SVG SMIL
4. Canvas 等硬核繪製

我們一個一個簡單瞭解下。

一、CSS3 動畫

在 CSS 中指定關鍵幀實現動畫效果，例如一個常用的淡出效果：

.fadeIn {
animation: fadeIn .2s both;
}
@keyframes fadeIn {
from { opacity: 0; }
to{ opacity: 1; }
}
複製程式碼

基本用法想必大家見得多用得也多，不展開，不過可以提一提一些不常用的點：

1. CSS3 動畫是可以隨時暫停的，真暫停，紋絲不動的那種，使用這段CSS宣告即可：

   animation-play-state: paused;
   複製程式碼

2. CSS3 動畫的 animation-timing-function 屬性值除了支援 cubic-bezier() 功能符，還支援 ofollow,noindex"> steps() 功能符 ，可以實現很多小而美的逐幀動畫效果。例如 twitter 的 Like 的效果：

   

   把所有序列幀圖片合在一張圖片上，然後逐幀顯示對應畫面，常作為背景圖，然後控制 background-position 實現效果。

   demo

3. 對於複雜動畫，我們可以對動畫進行分解，通過標籤巢狀，分別應用在祖先元素和後代元素上，例如下圖這個拋物線動畫效果：

   

二、Web animation

指Web animation API，簡言之就是把 CSS3 實現的 animation 動畫變成由 JS 程式碼實現。語法如下：

var myAnimation = element.animate(keyframes, options);
複製程式碼

其中 keyframes 對應 CSS3 中 @keyframes 中的宣告塊， options 對應 animation-* 屬性及屬性值。 myAnimation 為動畫的 Animation 物件，包含多種方法。例如我們實現一個透明度不斷變化的動畫，可以這樣：

element.animate([
{ opacity: 0 },
{ opacity: 1, offset: 0.4 },
{ opacity: 0 }
], {
duration: 3000,
delay: 0,
fill: 'forwards',
easing: 'steps(8, end)',
iterations: Infinity
});
複製程式碼

效果如下圖：

Web animation API 特別使用用在動畫引數是動態變化的場景，目前還有一點的相容性問題，可以試試下面的 polyfill： web-animations-js

三、SVG SMIL

SVG SMIL 指 SVG 同步多媒體整合語言，就是直接通過 XML 標籤，就可以在 web 中呈現各類動畫效果。舉個例子，下面程式碼：

<svg width="320" height="320">
<g>
<text font-family="microsoft yahei" font-size="120" y="160" x="160">馬</text>
<animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 160 160" to="360 160 160" repeatCount="indefinite"/>
</g>
</svg>
複製程式碼

效果如下截圖 GIF：

SMIL 由下面 5 類元素構成：

• 直接定位，可延時。
• 基礎過渡效果。
• 顏色動畫，比較雞肋，使用上面元素代替。
• transform 變換動畫。
• 按照特定路徑運動。

甚至支援新增點選行為觸發動畫執行：

<svg id="svg" width="320" height="200">
<circle id="circle" cx="100" cy="100" r="50"></circle>
<text font-family="microsoft yahei" font-size="120" y="160" x="160">馬
<animate attributeName="x" to="60" begin="circle.click" dur="3s" />
</text>
</svg>
複製程式碼

若有興趣瞭解可以訪問這裡。

四、Canvas 等硬核繪製

以 JS 為引擎的重新整理與繪製。這類動畫效果通過定時器不斷改變圖形元素等位置／透明度／變換等視覺特性來實現。 包括使用 JS 改變 DOM，使用 JS 改變 SVG 屬性值，以及使用 JS 對 Canvas 重新整理繪製。

使用 JS 更底層方法實現動畫效果需要有下面這些知識：

1. 一定的 JS 基本功

   複雜動效往往都會有較多的迴圈遍歷和資料處理。

2. 熟悉相關技術領域API

   如何畫一個圓，如何改變位置等。

3. 知道一些動畫演算法

   A 到 B 如何運動，可以藉助 Tween.js 。

4. 掌握常見的曲線函式

   圖形到本質是數學，運動的本質也是數學。這裡有篇關於三角函式不錯的文章。

5. 瞭解一些上層框架

   Snap.svg, greensock, spritejs。3D 領域：threeJS，pixi 等。