推荐10 款 SVG 动画的 JavaScript 库

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 同样也是）。同样它也是 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等等。

Chartlist.js

Chartist.js 是一个简单的容易被接受的图标库，它是通过SVG绘制的。Chartist的宗旨是提供一个简单的，轻量级的，非侵入式的图表库。你需要提供一些javascript配置对象做一些自定义配置，要不然它会使用默认的配置，即已经默认是排序过后的。

Chartist是通过 inline-SVG绘制的，所以它对DOM操作影响很小，相对于它提供的功能来说。而且意味着Chartist不会提供个人控制、水印、行为等等一些你能够通过简单的HTML, JavaScript and CSS实现的。

以上所述就是本文给大家推荐的SVG动画的javascript库了，希望能够对大家学习javascript有所帮助。

赞 (0)

相关推荐

  • SVG动画vivus.js库使用小结(实例代码)

    SVG动画vivus.js库使用小结(实例代码)

    SVG动画vivus.js库使用整理,具体实例代码如下所示: 使用方法如图: HTML例子代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta

  • svg动画之动态描边效果

    svg动画之动态描边效果

    1.首先先做一个简单的线一点一点画出来的效果,主要使用svg中的"strokeDasharray"."strokeDashoffset"属性,通过css3中的transtion改变strokeDashoffset来实现动画. 注:path中的数据通过在ai中划线后存储为svg格式就可以拿到: 效果图: 代码如下: <svg class="move_line1" xmlns="http://www.w3.org/2000/svg&q

  • 基于jquery和svg实现超炫酷的动画特效

    基于jquery和svg实现超炫酷的动画特效

    今天给大家分享一款基于jquery和svg超炫的网页动画.这款动画效果非常炫.下面还有重播.慢速.和反向动画按钮.效果非常漂亮.一起看下效果图: 实现的代码. html代码: 复制代码 代码如下: <div id="intro">         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"          

  • SVG描边动画

    SVG描边动画

    效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>nubia</title> <style> .nubia_logo{ position: absolute; opacity: 0; animation:fadeIn 2s ease-in forwards; -webki

  • 推荐10 款 SVG 动画的 JavaScript 库

    推荐10 款 SVG 动画的 JavaScript 库

    SVG 通常可以用作跨分辨率视频.这意味着在一块高分屏幕上不会降低图片的锐度.此外,你甚至可以让SVG动起来,通过使用一些javascript类库.下面,我们分享一些javascript类库,这些类库会帮助我们将SVG动画提高一个等级. Vivus Vivus 是一个能动画js类库,它能够给SVG图像显示出被画出来的过程.Vivus是没有其他类库依赖的(比如jQuery).你仅仅需要在页面中加入这个.js文件,然后传入需要被用来动画的SVG部分就行.同时通过指定一些配置,它能够在页面加载后直接显

  • 2020年10款优秀的Python第三方库,看看有你中意的吗？

    2020年10款优秀的Python第三方库,看看有你中意的吗？

    相对于numpy.TensorFlow.pandas这些已经经过多年维护.迭代,对于大多数Python开发者耳熟能详的库不同. 今天要给大家介绍的是诞生于2020年的新鲜Python库,而且,本文介绍的这10个Python库一直都受到非常好的维护. 废话不多说,下面开始本文的正式内容! 1. Typer 或许,你并非经常编写 CLI 应用程序,但是当你编写时,有可能会遇到很多障碍. 继FastAPI的巨大成功之后,tiangolo用同样的原则为我们带来了Typer[1]:一个新的库,它能让你利用

  • Google排名中的10个最著名的 JavaScript库

    Google排名中的10个最著名的 JavaScript库

    JavaScript 是 Web 开发与设计中不可或缺的东西,不管是一个简单的网页还是一个专业的站点,也不管你是高手还是菜鸟,如今 JavaScript 库越来越强大,可以胜任许多复杂的工作,然而同时,人们在众多 JavaScript 库面前又觉得无所适从,本文,我们将使用 Google 搜索出排名前 10 位的 JavaScript 库,并对它们逐一进行介绍. 1. jQuery: The Write Less, Do More, JavaScript Library jQuery 是一个很新

  • 推荐10款最受Python开发者欢迎的Python IDE

    推荐10款最受Python开发者欢迎的Python IDE

    Python 非常易学,强大的编程语言.Python 包括高效高级的数据结构,提供简单且高效的面向对象编程. Python 的学习过程少不了 IDE 或者代码编辑器,或者集成的开发编辑器(IDE).这些 Python 开发工具帮助开发者加快使用 Python 开发的速度,提高效率.高效的代码编辑器或者 IDE 应该会提供插件,工具等能帮助开发者高效开发的特性. 1.  Vim Vim 可以说是 Python 最好的 IDE.Vim 是高级文本编辑器,旨在提供实际的 Unix 编辑器'Vi'功能,

  • 推荐10款最热门jQuery UI框架 原创

    推荐10款最热门jQuery UI框架 原创

    1.国产jQuery UI框架 (jUI) DWZ DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. 设计目标是简单实用,快速开发,降低ajax开发成本. 欢迎大家提出建议,我们将在下一版本中进一步调整和完善功能．共同推进国内整体ajax开发水平. 在线演示地址:http://j-ui.com http://runjs.cn/detail/x9c7d6qb 2.jQuery的界面插件 Ninja UI jQuer

  • 推荐10款能大大提高IntelliJ Idea开发效率的常用插件

    我们先来介绍下IntelliJ Idea插件安装方式: 新版本IDE安装方式略有不同,不一一赘述 1.Background Image Plus 这款插件并不能直接提高你的开发效率,但是可以让你面对的IDE不再单调,当把背景设置成你自己心仪的的图片, 是不是会感觉很赏心悦目,编码效率会不会因此间接的提高 使用方法: 2.Mybatis Log Plugin Mybatis现在是java中操作数据库的首选,在开发的时候,我们都会把Mybatis的脚本直接输出在console中, 但是默认的情况下,

  • 极力推荐10个短小实用的JavaScript代码段

    JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaScript的身影.JavaScript正在逐渐进化为一门全能的开发语言. 但用好JavaScript并不容易,你除了需要掌握它的语法并知道如何写出高质量的代码之外,还需要了解如何解决那些几乎在每个项目中都会遇到的需求场景,比如:判断日期,高亮文本,限制字符数等等,有很多第三方库可以解决这些问题,但这些

  • 推荐10款扩展Web表单的JS插件

    推荐10款扩展Web表单的JS插件

    在网站建设中,你可以使用java开发大量酷炫的特效放到你网站上,但我们知道,互联网上也有很多开源的js库和插件可供选择.如果你正在设计用户注册/登录,访客留言或活动报名等自定义表单,那么下面这些插件,可以让你的表单获得更好的用户体验. JCF Forms 我最喜欢的一款js表单插件是 PSD2HTML 上的 JCF Forms.其名称 JCF 是 Java Custom Forms 的缩写,意思是"Java 自定义表单". 使用这款插件,你可以自定义下拉列表.范围滑块.单选/复选按钮.

  • 10 款珍藏已久的 Chrome 浏览器插件(程序员必装)

    10 款珍藏已久的 Chrome 浏览器插件(程序员必装)

    Firebug 的年代,我是火狐(Mozilla Firefox)浏览器的死忠:但后来不知道为什么,该插件停止了开发,导致我不得不寻求一个新的网页开发工具.那段时间,不少人开始推荐 Chrome 浏览器,我想那就试试吧,期初我觉得用起来很别扭,毕竟我不是一个"喜新厌旧"的人.但用的次数越来越多,也就习惯了. Chrome 浏览器有一个好处,就是插件极其丰富,只有你想不到的,没有你找不到的,这恐怕是 Chrome 浏览器被众多爱好者钟爱的原因吧.当然了,Chrome 浏览器本身也非常强大

随机推荐