Web 動效四大才子簡述

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

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

CSS3 動畫
Web animation
SVG SMIL
Canvas 等硬核繪製

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

一、CSS3 動畫

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

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

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

CSS3 動畫是可以隨時暫停的，真暫停，紋絲不動的那種，使用這段CSS宣告即可：
```
animation-play-state: paused;
複製程式碼
```
CSS3 動畫的 animation-timing-function 屬性值除了支援 cubic-bezier() 功能符，還支援 steps() 功能符，可以實現很多小而美的逐幀動畫效果。例如 twitter 的 Like 的效果：

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

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

二、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 更底層方法實現動畫效果需要有下面這些知識：

一定的 JS 基本功

複雜動效往往都會有較多的迴圈遍歷和資料處理。
熟悉相關技術領域API

如何畫一個圓，如何改變位置等。
知道一些動畫演算法

A 到 B 如何運動，可以藉助 Tween.js。
掌握常見的曲線函式

圖形到本質是數學，運動的本質也是數學。這裡有篇關於三角函式不錯的文章。
瞭解一些上層框架

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

Web 動效四大才子簡述

一、CSS3 動畫

二、Web animation

三、SVG SMIL

四、Canvas 等硬核繪製

檢視更多分享，請關注閱文集團前端團隊公眾號:

相關文章