首頁 > web前端 > js教程 > 主體

推薦10 款 SVG 動畫的 JavaScript 函式庫_javascript技巧

WBOY
發布: 2016-05-16 16:07:54
原創
1681 人瀏覽過

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 同樣也是)。同樣它也是 Adob​​​​e 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 是一個簡單的容易被接受的圖示庫,它是透過SVG繪製的。 Chartist的宗旨是提供一個簡單的,輕量級的,非侵入式的圖表庫。你需要提供一些javascript配置物件做一些自訂配置,要不然它會使用預設的配置,也就是已經預設是排序過後的。

Chartist是透過 inline-SVG繪製的,所以它對DOM操作影響很小,相對於它提供的功能。而且意味著Chartist不會提供個人控制、浮水印、行為等等一些你能夠透過簡單的HTML, JavaScript and CSS實現的。

以上所述就是本文推薦給大家的SVG動畫的javascript庫了,希望能對大家學習javascript有幫助。

相關標籤:
svg
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板