10 個非常實用的 SVG 動畫操作JavaScript 庫

SVG 通常可以用作跨分辨率視頻。這意味著在一塊高分屏幕上不會降低圖片的銳度。此外，你甚至可以讓SVG動起來，通過使用一些javascript類庫。下面，我們分享一些javascript類庫，這些類庫會幫助我們將SVG動畫提高一個等級。

Vivus

Vivus 是一個能動畫js類庫，它能夠給SVG圖像顯示出被畫出來的過程。Vivus是沒有其他類庫依賴的（比如jQuery)。你僅僅需要在頁面中加入這個.js文件，然后傳入需要被用來動畫的SVG部分就行。同時通過指定一些配置，它能夠在頁面加載后直接顯示動畫效果。

Bonsai

Bonsai 是一個功能豐富的 JS 類庫，你能夠用它來畫和 animate 動態內容在網站上。這些內容包括了 HTML5 video、變化的 Canvas 和 SVG。通過 Bonsai 框架，你能畫一個簡單的矩形、甚至一段矩形，如果你喜歡甚至可以畫一個豐富的多人卡通游戲進去。

Velocity

Velocity 是一個 JS 類庫，它是用來做頻繁動畫用的。Velocity 的 js 動畫“速度”是非常快的。它比JQuery 快，甚至比 CSS 動畫還要快。Velocity 的 API 和 $.fn.animate 很像，都是通過$()來操作。velocity()是另一種方法，相比 $().animate()。總而言之，你應該使用一致的animate效果，包括 fadeIn 和 fadeOut 方法（譯者：Velocity 提供了 fadeIn 和 fadeOut 方法）。

Raphael

RaphaelJS 也通常是用來在網頁上畫SVG圖和動畫的。它兼容各種windows瀏覽器一直到IE6，因為如此，Raphael成為了市面上最受信賴的js（svg）類庫。有了它，你可以制作分析圖表、地圖、游戲就像在廚房做飯一樣。

Snap

SnapSVG 是另一個知名 JS 類庫，它是由 Dmitry Baranovskiy 開發的（Raphael 同樣也是）。同樣它也是 Adobe Web Software Group 來維護。和 Raphael 不同的是，它只提供了 ie 最新版支持。這使得 SnapSVG 在體積上小了許多（相比 Raphel）以實現相同的功能（比如 trim）和支持最新的功能。

Lazy Line Painter

Laid back Range Painter 是一個 jQuery 插件，通常被用來作繪制圖集，有點像 Vivus。通常你會吐槽的是它的也就只有這么一個特殊的功能。讓我來解釋下，如果你是用Illustrator 或者Inkscape制作的SVG圖像，而且SVG圖像沒有任何顏色上的變化，僅僅是軌跡的變化，可以用它。

SVG.js

SVG.js 是一個輕量級的操作和動畫 SVG 類庫。你能夠操作變化方向、位置和顏色。這還沒完，你甚至可以自己實現插件等一些其他功能。這個實例可以attach一些插件，比如 svg.filter.js，他可以為你的圖片實現 Gaussian blur, desaturase, compare, sepia 等等功能。

Walkway

Walkway 支持3種方式, path, line 和 用polyline來畫的svg線。它提供了一個很好的例子，繪制了一個PlayStation 的集合動畫。

Progressbar.js

ProgressBar.js 是一個可愛的和易于接受的增長曲線圖用來繪制卡通SVG線條。有了它，各種形狀都可以用作增長曲線。它集成了一些實用的形狀如Range,Circle和Block，你甚至可以自行開發一個增長圖通過Illustrator或者其他的矢量圖繪制工具。 ProgressBar.js 是輕量級，MIT許可的而且支持IE9+。你可以通過它修改大型柱狀增長圖。你還可以改變屬性生成動畫，比如stroke breadth, load opacity, load coloring等等。

Chartlist.js

Chartist.js is often a simple receptive charting library constructed with SVG. The Chartist’s aim would be to offer a simple, lightweight and non-intrusive library to help receptive create charts on the internet site. It’s vital that you recognize that several objectives regarding Chartist.js would be to depend upon standards instead of supplying any personal treatment for the condition and that is has already been sorted by the typical.

Chartist works with inline-SVG and as a consequence harnesses the power with the DOM to provide areas of its features. This also means that Chartist seriously isn’t supplying its personal function controlling, brands, behaviors and everything else that may you have to be completed with simple HTML, JavaScript and CSS.