10 個非常有用的 SVG 動畫的 JavaScript 庫

TP_funny發表於2015-03-01
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等等。

來自:PHP100
評論(1)

相關文章