SVG 通常可以用作跨分辨率視頻。這意味著在一塊高分屏幕上不會(huì)降低圖片的銳度。此外，你甚至可以讓SVG動(dòng)起來(lái)，通過(guò)使用一些javascript類庫(kù)。下面，我們分享一些javascript類庫(kù)，這些類庫(kù)會(huì)幫助我們將SVG動(dòng)畫提高一個(gè)等級(jí)。

Vivus

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

Bonsai

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

Velocity

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

Raphael

RaphaelJS 也通常是用來(lái)在網(wǎng)頁(yè)上畫SVG圖和動(dòng)畫的。它兼容各種windows瀏覽器一直到IE6，因?yàn)槿绱耍琑aphael成為了市面上最受信賴的js（svg）類庫(kù)。有了它，你可以制作分析圖表、地圖、游戲就像在廚房做飯一樣。

Snap

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

Lazy Line Painter

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

SVG.js

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

Walkway

Walkway 支持3種方式,path,line和用polyline來(lái)畫的svg線。它提供了一個(gè)很好的例子，繪制了一個(gè)PlayStation 的集合動(dòng)畫。

Progressbar.js

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

Chartlist.js

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

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

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

最新評(píng)論