10 個很是有用的 SVG 動畫的 JavaScript 庫

時間 2019-11-09

標籤很是有用 svg 動畫 javascript 欄目 JavaScript 简体版

原文原文鏈接

　SVG 一般能夠用做跨分辨率視頻。這意味着在一塊高分屏幕上不會下降圖片的銳度。此外，你甚至可讓SVG動起來，經過使用一些javascript類庫。下面，咱們分享一些javascript類庫，這些類庫會幫助咱們將SVG動畫提升一個等級。javascript

　　Vivusphp

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

　　Bonsaihtml5

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

　　Velocitygit

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

　　Raphaelwindows

　　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等等。

　　英文原文：10 Helpful JavaScript Libraries to Animate SVG