2019独角兽企业重金招聘Python工程师标准>>>

SVG 通常可以用作跨分辨率视频。这意味着在一块高分屏幕上不会降低图片的锐度。此外,你甚至可以让SVG动起来,通过使用一些javascript类库。下面,我们分享一些javascript类库,这些类库会帮助我们将SVG动画提高一个等级。

1. Vivus

Vivus
Vivus 是一个能动画js类库,它能够给SVG图像显示出被画出来的过程。Vivus是没有其他类库依赖的(比如jQuery)。你仅仅需要在页面中加入这个.js文件,然后传入需要被用来动画的SVG部分就行。同时通过指定一些配置,它能够在页面加载后直接显示动画效果。

2.Bonsai

Bonsai
Bonsai 是一个功能丰富的 JS 类库,你能够用它来画和 animate 动态内容在网站上。这些内容包括了 HTML5video、变化的 Canvas 和 SVG。通过 Bonsai 框架,你能画一个简单的矩形、甚至一段矩形,如果你喜欢甚至可以画一个丰富的多人卡通游戏进去。

3. Velocity

Velocity
Velocity 是一个 JS 类库,它是用来做频繁动画用的。Velocity 的 js 动画“速度”是非常快的。它比JQuery 快,甚至比 CSS 动画还要快。Velocity 的 API 和 $.fn.animate 很像,都是通过$()来操作。velocity()是另一种方法,相比 $().animate()。总而言之,你应该使用一致的animate效果,包括 fadeIn 和 fadeOut 方法(译者:Velocity 提供了 fadeIn 和 fadeOut 方法)。

4. Raphael

Raphael

RaphaelJS 也通常是用来在网页上画SVG图和动画的。它兼容各种windows浏览器一直到IE6,因为如此,Raphael成为了市面上最受信赖的js(svg)类库。有了它,你可以制作分析图表、地图、游戏就像在厨房做饭一样。

5. Snap

Snap
SnapSVG 是另一个知名 JS 类库,它是由 Dmitry Baranovskiy 开发的(Raphael 同样也是)。同样它也是 Adobe Web Software Group 来维护。和 Raphael 不同的是,它只提供了 ie 最新版支持。这使得 SnapSVG 在体积上小了许多(相比 Raphel)以实现相同的功能(比如 trim)和支持最新的功能。

6. Lazy Line Painter

Lazy Line Painter
Laid back Range Painter 是一个 jQuery 插件,通常被用来作绘制图集,有点像 Vivus。通常你会吐槽的是它的也就只有这么一个特殊的功能。让我来解释下,如果你是用Illustrator 或者Inkscape制作的SVG图像,而且SVG图像没有任何颜色上的变化,仅仅是轨迹的变化,可以用它。

7. SVG.js

SVG.js
SVG.js 是一个轻量级的操作和动画 SVG 类库。你能够操作变化方向、位置和颜色。这还没完,你甚至可以自己实现插件等一些其他功能。这个实例可以attach一些插件,比如svg.filter.js,他可以为你的图片实现 Gaussian blur, desaturase, compare, sepia 等等功能。

8. Walkway

Walkway
Walkway 支持3种方式, path, line 和 用polyline来画的svg线。它提供了一个很好的例子,绘制了一个PlayStation 的集合动画。

9. Progressbar.js

Progressbar.js
ProgressBar.js 是一个可爱的和易于接受的增长曲线图用来绘制卡通SVG线条。有了它,各种形状都可以用作增长曲线。它集成了一些实用的形状如Range,Circle和Block,你甚至可以自行开发一个增长图通过Illustrator或者其他的矢量图绘制工具。 ProgressBar.js 是轻量级,MIT许可的而且支持IE9+。你可以通过它修改大型柱状增长图。你还可以改变属性生成动画,比如stroke breadth, load opacity, load coloring等等。

转载于:https://my.oschina.net/cllgeek/blog/1584749

10 个非常有用的 SVG 动画的 JavaScript 库相关推荐

  1. html流程svg动画,html5 svg动画

    以上是svg的一个线上编辑器,也可以adobe Illustrator制作生成. 我们通过以上编辑器可以获得以下代码. 例: Layer 1 给路径path 添加 class 为 path1 .pat ...

  2. svg动画制作_制作第一个SVG动画

    svg动画制作 Story of a designer trying to code animations instead of asking a dev to figure it out. 一位设计 ...

  3. 使用 SVG 动画实现弹性的页面元素效果

    Codrops 分享了一些给SVG元素加上弹性动画的灵感.实现的思路是把一个SVG元素整合成一个组件,然后从一个路径弹性动画到另一个.这种效果可以应用到像菜单,按钮或其它元素,使得交互更有趣,看起更原 ...

  4. 自定义动画属性java_创建酷炫动画效果的10个JavaScript库

    原标题:创建酷炫动画效果的10个JavaScript库 1) Dynamics.jsDynamics.js是设计基于物理规律的动画的重要Java库.它可以赋予生命给所有包含CSS 和SVG属性的DOM ...

  5. SVG开发包, 20 个有用的 SVG 工具,提供更好的图像处理

    20 个有用的 SVG 工具,提供更好的图像处理 SVG 现正在 Web 设计领域变得越发流行, 你可以使用 Illustrator 或者 Inkscape 来创建 SVG 图像. 但当进行 Web ...

  6. svg交互_如何创建交互式SVG动画鼓套件

    svg交互 View demo 查看演示Download Source 下载源 Today we're going to create an animated SVG drum kit that ca ...

  7. 超级强大的SVG动画详解

    这篇文章发布于 2014年08月31日,星期日,03:07,归类于 SVG相关. 阅读 83178 次, 今日 194 次 本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究. 本 ...

  8. 大爱jQuery,10美女模特有用jQuery/CSS3插入(集成点免费下载)

    整合下载地址:http://download.csdn.net/detail/yangwei19680827/7343001 jQuery真的是一款非常犀利的Javascript框架,利用jQuery ...

  9. svg配合css3动画_带有Adobe Illustrator,HTML和CSS的任何网站的SVG动画

    svg配合css3动画 A top trend in web design for 2020 is the increased use of SVG animations on web pages a ...

最新文章

  1. 图灵科普系列丛书封面有奖征集(贴图送书)
  2. [SAP ABAP开发技术总结]选择屏幕——SELECT-OPTIONS
  3. js动态创建样式style
  4. (十三) 深入浅出TCPIP之TCP套接字参数
  5. HTML5与搜索引擎优化[转载]
  6. python的dataframe的groupby_python pandas.DataFrame.groupby()方法详解
  7. 献给自己技术成长的第一年
  8. matlab用ezplot绘制参数方程,MATLAB学习1 之画图函数
  9. Java随机数的使用
  10. Z逆变换(2020.10.21)
  11. 计算机一级试题库app,计算机一级题库app
  12. 一个驱动级别的 键盘鼠标模拟工具
  13. sopcast在ubuntu上的安装与使用
  14. QoS(Quality of Service),中文名为服务质量。
  15. Win10禁止Nvidia显卡驱动程序自动更新
  16. 商品详情页商品属性选择,包含多规格
  17. 简单的购物车和购物车结算
  18. 评高级用计算机合格证吗,副教授评审什么情况下可以免计算机合格证
  19. J2EE架构师[转]
  20. P2320 [HNOI2006] 鬼谷子的钱袋

热门文章

  1. docker使用网桥网络
  2. 什么是 JS 原型链?
  3. python爬虫05--添加header
  4. mysql 给指定用户指定数据库
  5. Atomic原子类和Unsafe魔法类 详解
  6. 《Go语言程序设计》读书笔记(七) 包
  7. 面试题:ConcurrentHashMap 和 Hashtable 的区别
  8. 关于ElasticSearch整合SpringBoot
  9. maven项目的pom文件中各标签理解
  10. Netty架构设计与功能特性