推薦10 款 SVG 動(dòng)畫的 JavaScript 庫
SVG 通常可以用作跨分辨率視頻。這意味著在一塊高分屏幕上不會(huì)降低圖片的銳度。此外,你甚至可以讓SVG動(dòng)起來,通過使用一些javascript類庫。下面,我們分享一些javascript類庫,這些類庫會(huì)幫助我們將SVG動(dòng)畫提高一個(gè)等級(jí)。
Vivus 是一個(gè)能動(dòng)畫js類庫,它能夠給SVG圖像顯示出被畫出來的過程。Vivus是沒有其他類庫依賴的(比如jQuery)。你僅僅需要在頁面中加入這個(gè).js文件,然后傳入需要被用來動(dòng)畫的SVG部分就行。同時(shí)通過指定一些配置,它能夠在頁面加載后直接顯示動(dòng)畫效果。

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

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

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

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

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

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

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

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

Chartist.js 是一個(gè)簡單的容易被接受的圖標(biāo)庫,它是通過SVG繪制的。Chartist的宗旨是提供一個(gè)簡單的,輕量級(jí)的,非侵入式的圖表庫。你需要提供一些javascript配置對(duì)象做一些自定義配置,要不然它會(huì)使用默認(rèn)的配置,即已經(jīng)默認(rèn)是排序過后的。
Chartist是通過 inline-SVG繪制的,所以它對(duì)DOM操作影響很小,相對(duì)于它提供的功能來說。而且意味著Chartist不會(huì)提供個(gè)人控制、水印、行為等等一些你能夠通過簡單的HTML, JavaScript and CSS實(shí)現(xiàn)的。
以上所述就是本文給大家推薦的SVG動(dòng)畫的javascript庫了,希望能夠?qū)Υ蠹覍W(xué)習(xí)javascript有所幫助。
相關(guān)文章
JavaScript判斷輸入是否為數(shù)字類型的方法總結(jié)
這篇文章主要介紹了JavaScript判斷輸入是否為數(shù)字類型的方法總結(jié)的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09
很酷的星級(jí)評(píng)分系統(tǒng)原生JS實(shí)現(xiàn)
這篇文章主要weidajiaxiangxi介紹了很酷的星級(jí)評(píng)分系統(tǒng)原生JS實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08
JavaScript的基礎(chǔ)語法和數(shù)據(jù)類型詳解
這篇文章主要介紹了JavaScript的基礎(chǔ)語法和數(shù)據(jù)類型,保姆級(jí)的詳細(xì)教程,萬字長文詳細(xì)的列出了JavaScript的各種語法,建議收藏系列,希望可以有所幫助2021-09-09
使用js正則表達(dá)式驗(yàn)證文件擴(kuò)展名方法實(shí)例
文件上傳時(shí),為了安全驗(yàn)證,對(duì)于手工改動(dòng)文件后綴名產(chǎn)生的偽造文件進(jìn)行判斷過濾,下面這篇文章主要給大家介紹了關(guān)于如何使用js正則表達(dá)式驗(yàn)證文件擴(kuò)展名的相關(guān)資料,需要的朋友可以參考下2022-11-11
JavaScript生成隨機(jī)數(shù)的各種方法大全
JavaScript 是一門強(qiáng)大的編程語言,在前端和后端開發(fā)中廣泛使用,生成隨機(jī)數(shù)是 JavaScript 開發(fā)中的常見需求,應(yīng)用場(chǎng)景包括游戲開發(fā)、驗(yàn)證碼生成、數(shù)據(jù)模擬等,本文將詳細(xì)介紹 JavaScript 中生成隨機(jī)數(shù)的各種方法,并分析其適用場(chǎng)景和優(yōu)缺點(diǎn),需要的朋友可以參考下2025-03-03
原生js實(shí)現(xiàn)圖片放大縮小計(jì)時(shí)器效果
本文主要介紹了原生js實(shí)現(xiàn)圖片放大縮小計(jì)時(shí)器效果的示例代碼。具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01
前端實(shí)現(xiàn)文件下載常見的幾種方法總結(jié)
這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)文件下載常見的幾種方法,需要的朋友可以參考下2025-01-01
調(diào)試代碼導(dǎo)致IE出錯(cuò)的避免方法
這篇文章主要介紹了避免調(diào)試代碼導(dǎo)致IE出錯(cuò)的方法,需要的朋友可以參考下2014-04-04
JavaScript中的for...of和for...in循環(huán)容易遇到的問題及解決方法總結(jié)
在 JavaScript 編程中,for...of 和 for...in 是常用的循環(huán)語法,但它們?cè)谑褂脮r(shí)可能會(huì)引發(fā)一些意想不到的問題,本文將分享我在使用這兩種循環(huán)時(shí)所遇到的坑和經(jīng)驗(yàn),需要的朋友可以參考下2023-08-08

