svg庫

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

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

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

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

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

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

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

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

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

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

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

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

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • SVG 通常可以用作跨分辨率視頻。這意味著在一塊高分屏幕上不會降低圖片的銳度。此外,你甚至可以讓SVG動起來,通過...
    cbw100閱讀 14,530評論 0 31
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,076評論 25 708
  • 張天愛跟金晨都撕兩天了。。。 兩個因為網劇紅起來的女演員因為一個角色撕出了火花。 金晨更是憤怒到發微博,用文言文泄...
    熊貓姐妹花閱讀 1,141評論 0 1
  • 人有了優秀的行動力以后,通常會進入越來越優秀的良性循環。 想有好的行為習慣,要先培養正確的思維習慣,多讀書,多聽 ...
    FineYoga小芳閱讀 82評論 0 0
  • 有時會遺忘 自己當初的模樣 時光不似流水 而似巖層 記憶如化石 深深埋在 山水之下
    影雨空明閱讀 285評論 0 0