現代 Web 開發在將體驗和功能做到極致的同時，對於美觀的追求也越來越高，數據可視化、動畫交互、2D/3D 等元素已然成為標配。

以下是為 Web 開發者推薦的一些精品開源圖形庫，旨在專註於最常見的問題和最常用的東西。將針對動畫（Animation）、數據可視化（Data Visualization）、2D/3D 分別整理，歡迎保持關注。

動畫

一、效果（Effects）

1、切換和過渡

Animate.css：https://www.oschina.net/p/animate-css

一個跨瀏覽器的 css3 動畫庫，內置了抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉（flip）、旋轉（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）、放大縮小（等多達 60 多種動畫效果，幾乎包含了所有常見的動畫效果。在炫酷的同時，還一直保持著易於使用的特點。

效果預覽：點此查看（https://daneden.github.io/animate.css/）

Magic Animations：https://www.oschina.net/p/magic-css3-animations

一個獨特的 CSS3 動畫特效包，可以自由地使用在 Web 項目中。包括：Magic Effects、Bling、Static Effects、Static Effects Out、Perspective、Rotate、Slide、Math、Tin、Bomb 等各類效果。

效果預覽：點此查看（https://minimamente.com/example/magic_animations/）

Effeckt.css：https://www.oschina.net/p/effeckt-css

同樣是一個包含眾多精妙的 CSS3 切換和動畫效果庫，例如：彈窗、按鈕、導航、列表、頁面切換等，適用於網站和移動 Web 開發。

效果預覽：點此查看（http://h5bp.github.io/Effeckt.css/）

還有：

Velocity.js：一個簡單易用、高性能、功能豐富的輕量級動畫庫。它能和 jQuery 完美協作，並和 $.animate() 有相同的 API， 但它不依賴 jQuery，可單獨使用。 Velocity 不僅包含了 $.animate() 的全部功能， 還有變換、循環、縮放等特色功能。（http://velocityjs.org/）

Anime.js：可以和 CSS3 屬性、SVG、DOM 元素和 JS 對象一起工作，製作出各種高性能，平滑過渡的動畫效果。

數量太多，不一一列舉。（http://anime-js.com/）

2、懸停

Hover：https://github.com/IanLunn/Hover

一款基於 CSS3 的懸停特效合集，可以輕鬆的被應用到鏈接、按鈕、LOGO、SVG 以及圖片等元素和修飾上。可用於 CSS、Sass 和 LESS 。

效果預覽：點此查看（http://ianlunn.github.io/Hover/）

3、圖標

Transformicons：http://transformicons.com/

一個結合 SVG、CSS 和 HTML 技術，讓圖標、按鈕和符號具有變種（特殊）動畫效果的庫。它幾乎可完成開發所需的任意動畫效果，還提供了一些可選參數方便對效果進行自定義。

4、載入

Loaders.css：https://www.oschina.net/p/loaders-css

一款追求性能和體驗感的載入動畫合集，利用純 CSS 實現多種樣式的 Loading 載入動畫。這些動畫並不需要圖片來輔助，以避免昂貴的繪畫和布局成本，同時也對運行效率有所保證。

SpinKit：https://www.oschina.net/p/SpinKit

同樣是一款 CSS 載入動畫合集，可高度自定義動畫效果，並且提供多個參數可供選擇，運行性能流暢。

類似的 spin.js 也不錯，壓縮後僅 1.9K，在此不多贅述。

5、行為速度（Easing）

d3-ease：https://github.com/d3/d3-ease

這是一個讓動畫更為平滑的 Easing 庫。Easing 是一種通過調整時間映射來控制動畫中的行為的方法。它最常用於緩慢進退，讓動畫轉換更為平滑，行為更加合理。

6、滾動

ScrollReveal：https://scrollrevealjs.org/

一款頁面滾動顯示動畫，可以播放一次也可以播放無限次，能讓頁面更加有趣，更吸引用戶眼球。

ScrollMagic:https://scrollrevealjs.org/

一個用來創建魔幻滾動交互的 JavaScript 庫，可以像使用進度條一樣使用滾動條。支持在特定的滾動位置開始一個動畫，並且讓動畫同步滾動條的動作，和把元素粘在一個特定的滾動位置。當用戶到達某個滾動位置時，可以調用函數，或以任何其他方式來和當前的滾動位置進行交互。

7、視差

Parallax：https://www.oschina.net/p/parallax-js

一款簡單，輕量級的視差效果生成器，可以對智能設備點擊運動的方向作出反應，不需要任何識別方向，檢測位置的設備，只需要游標（滑鼠運動的方向等）的方向。

效果預覽：點此查看（http://matthew.wagerfield.com/parallax/）

RELLAX：https://dixonandmoe.com/rellax/

同樣是一款主打輕量級的純 JavaScript 視差效果庫，但和 Parallax 的游標視覺差不同的是，它傾向於滾動視覺差。RELLAX 壓縮後的版本僅 1021 個位元組，在手機等小屏幕設備中,插件會自動限制視覺差特性。

8、翻轉（Flip）

React FLIP Move：http://joshwcomeau.github.io/react-flip-move/examples/

一個翻轉移動的庫，旨在解決當列表的順序發生變化時，項目列表動畫化的問題。DOM 節點實際上不能重新排序，創建新的節點，因此簡單的 CSS 轉換不起作用。react-flip-move 利用 FLIP 技術來計算出這樣的轉換將是什麼樣的，並使用硬體加速 CSS 轉換。

效果預覽：點此查看

從阿里的 Ant Design 中提煉出來的動效語言 Ant Motion ，也能實現類似的效果。它同時也是一套 React 框架動效解決方案，提供了單項、組合動畫，以及整套解決方案。

9、數值

CountUp.js：https://www.oschina.net/p/countup-js

一個無依賴關係的輕量級 JavaScript 類，可以用來快速創建以一種更有趣的動畫方式顯示數值數據。儘管它的名字叫 countUp，但其實可以在兩個方向進行變化，取決於傳遞的 startVal 和 endVal 參數判斷。

10、關鍵幀/時間軸

Dynamics.js：https://www.oschina.net/p/dynamics-js

一款可以創建物理運動動畫效果 JavaScript 庫，只需把它引入頁面，即可激活任意 DOM 元素的 CSS 屬性動畫，也可結合 SVG 使用。

React-Motion：https://github.com/chenglou/react-motion

一個值得推薦的物理動畫庫， 使動畫看起來像一個彈簧那樣，配置合適的勁度係數和空氣阻力後，可以使網站增添一些俏皮的元素，讓用戶體驗起來更加舒暢。

11、軌跡/曲線

Mojs：http://mojs.io/

一個擁有極簡的聲明式 API ，能夠輕鬆掌控運動軌跡，為運動圖形而生的工具庫，允許模塊化需求定製，有良好的動畫效果和用戶體驗。

Vivus：https://www.oschina.net/p/vivus-js

一個無依賴的輕量級 Javascript 庫，可以繪製 SVG 圖形的外觀，執行 SVG 路徑動畫。它有各種不同的動畫效果可用，允許創建一個自定義腳本來繪製 SVG 。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！