SVG 通?？梢杂米骺绶直媛室曨l。這意味著在一塊高分屏幕上不會降低圖片的銳度。此外，你甚至可以讓SVG動起來，通過使用一些javascript類庫。下面，我們分享一些javascript類庫，這些類庫會幫助我們將SVG動畫提高一個等級。

Vivus

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

Bonsai

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

Velocity

Velocity 是一個 JS 類庫，它是用來做頻繁動畫用的。Velocity 的 js 動畫“速度”是非?？斓?。它比JQuery 快，甚至比 CSS 動畫還要快。Velocity 的 API 和 $.fn.animate 很像，都是通過$()來操作。velocity()是另一種方法，相比 $().animate()?？偠灾銘?yīng)該使用一致的animate效果，包括 fadeIn 和 fadeOut 方法（譯者：Velocity 提供了 fadeIn 和 fadeOut 方法）。

Raphael

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

Snap

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

Lazy Line Painter

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

SVG.js

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

Walkway

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

Progressbar.js

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

Chartlist.js

Chartist.js 是一個簡單的容易被接受的圖標(biāo)庫，它是通過SVG繪制的。Chartist的宗旨是提供一個簡單的，輕量級的，非侵入式的圖表庫。你需要提供一些javascript配置對象做一些自定義配置，要不然它會使用默認(rèn)的配置，即已經(jīng)默認(rèn)是排序過后的。

Chartist是通過 inline-SVG繪制的，所以它對DOM操作影響很小，相對于它提供的功能來說。而且意味著Chartist不會提供個人控制、水印、行為等等一些你能夠通過簡單的HTML, JavaScript and CSS實現(xiàn)的。

以上所述就是本文給大家推薦的SVG動畫的javascript庫了，希望能夠?qū)Υ蠹覍W(xué)習(xí)javascript有所幫助。

最新評論