×

前端SVG开发插件:8个用于SVG动画的JavaScript库

作者:Terry2021.08.20来源:Web前端之家浏览:10737评论:0
关键词:svgsvg动画

600.png

SVG 是与分辨率无关的图形。这意味着它在任何类型的屏幕上看起来都不错,而不会损失任何质量。除此之外,您还可以通过一些动画效果使 SVG 栩栩如生。

在我们之前 SVG 系列的一篇文章中,我们已经向您展示了SVG 动画如何与 <animate> 元素一起工作,尽管是在低级别。这一次,我们将分享几个有助于将 SVG 动画扩展到下一个级别的 JavaScript库。

1. Vivus【http://maxwellito.github.io/vivus/】

Vivus是一个 JavaScript 库,它使您的 SVG 具有被绘制的外观。Vivus 开箱即用,无需任何依赖项(例如 jQuery)。只需将.js文件包含在您的 HTML 中,并指定您想要动画的 SVG 元素,以及一些预设选项以立即开始动画。

例如:

new Vivus( 'svg-element', { type: 'oneByOne', duration: 200 });

以上将svg-element在 200 毫秒内为我的 SVG 元素设置动画。此 SVG 的每个元素都将在该时间范围内一个接一个地绘制。

1.jpg

2.Bonsai【https://bonsaijs.org/】

Bonsai是一个强大的 JavaScript 库,允许您在网页上绘制、变形和动画图形元素。

它支持 HTML5 图形类型Canvas和SVG。Bonsai,你可以建立一个简单的矩形或圆形或者如果你喜欢,一个完全成熟的多人动画游戏像这样【https://vimeo.com/53452607】的。

您可以使用 Orbit 来感受Bonsai如何在实景拍摄中发挥作用,或者查看这些令人印象深刻的示例以从中汲取灵感。

2.jpg

3. Velocity【http://velocityjs.org/】

Velocity是一个为快速动画而构建的 JavaScript 库。Velocity 渲染动画时的速度非常快。相比之下,它优于 jQuery,甚至优于 CSS。

Velocity 的 API 的工作原理类似于 jQuery 中的动画,只是它使用关键字别名$.velocity()而不是$.animate(). 除此之外,您可以使用完全相同的动画关键字,例如fadeInfadeOut

3.jpg

4. RaphaelJS【https://dmitrybaranovskiy.github.io/raphael/】

RaphaelJS是一个库,它允许您在网页上绘制矢量图形 SVG 以及动画。它支持广泛的浏览器,这几乎使 Raphael 成为利基市场中最可靠的 JavaScript 库。

使用 RaphaelJS,您可以构建类似于反恐精英的交互式分析图表、世界地图和游戏交互。

4.jpg

5. SnapSVG【http://snapsvg.io/】

SnapSVG是另一个流行的 SVG 动画 JavaScript 库,由 Raphael 开发人员 Dmitry Baranovskiy 与 Adobe Web 平台团队从头开始开发。

不过与 Raphael 不同,SnapSVG 仅适用于最新的浏览器。这使得库比 Raphael 小得多,并支持 SVG 功能,如剪辑和遮罩。

5.jpg

6.Lazy Line Painter【http://lazylinepainter.info/】

Lazy Line Painter是一个 jQuery 插件,用于动画 SVG 路径以动画绘制序列,类似于 Vivus。

坏消息是这个插件只做这个非常具体的事情。因此,当您从 Illustrator 或 Inkscape 等应用程序导入 SVG 时,请确保您的 SVG 上没有留下填充颜色,只有路径。

7. SVG.js【https://svgjs.com/docs/3.0/】

SVG.js是一个用于操作和动画 SVG 的轻量级库。使用此库,您将能够为 SVG 元素中的大小、位置或颜色设置动画。

它不仅动画;您还可以应用额外的插件来添加额外的功能。此示例使用 svg.filter.js插件将高斯模糊、去饱和、对比度、棕褐色等过滤器应用于图像。

7.jpg

8.Walkway

Walkway支持三种类型的元素,pathline,和polyline用于绘制SVG线。这是Polygon 的一个示例,显示了 PlayStation 4 控制台线动画。

8.jpg

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/svgyinyong20210820.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • jianj

    node看上有点复杂...

  • 访客

    正好遇到,谢谢分享...

  • jimmy

    这个很有趣,国内SEO更多的是百度...

  • jenny

    VUE的总结的不错啊,收藏了。下次搞点React的啊...

  • jenny

    win7最经典,想当初win8出来后都没它好用,怀恋经典。。。...

  • Terry

    谢谢提醒,插件已经修复。...

  • 访客

    士大夫士大夫...

  • 访客

    用這甚麼顏色...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2023 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2