Web 動效四大才子簡述

本文做者：張鑫旭
原創聲明：本文爲閱文前端團隊 YFE 成員出品，請尊重原創，轉載請聯繫公衆號 ( id: yuewen_YFE ) 獲取受權，並註明做者、出處和連接。

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

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

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

1、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() 功能符，還支持 steps() 功能符，能夠實現不少小而美的逐幀動畫效果。例如 twitter 的 Like 的效果：

   

   把全部序列幀圖片合在一張圖片上，而後逐幀顯示對應畫面，常做爲背景圖，而後控制 background-position 實現效果。

   demo

3. 對於複雜動畫，咱們能夠對動畫進行分解，經過標籤嵌套，分別應用在祖先元素和後代元素上，例以下圖這個拋物線動畫效果：

   

2、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

3、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>
複製代碼

如有興趣瞭解能夠訪問這裏。

4、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 等。

查看更多分享，請關注閱文集團前端團隊公衆號: