这是我参与11月更文挑战的第19天,活动详情查看:2021最后一次更文挑战
本篇译自:https://blog.bitsrc.io/top-5-javascript-libraries-for-svg-animation
现如今,SVG 已经广泛应用于 Web 开发当中,可缩放而不失真(矢量图形),就是它的最大优势!
但是,你知道 SVG 除了可以被用作于静态图片,还可以应用于 SVG 动画
吗?
本篇带来实现 SVG 动画的 5 个 JavaScript 库!
点赞 + 收藏 === 学会,一气呵成!👍👍👍
具有直观的图形 API,是一个基于 SVG 渲染的轻量级图形库;
BonsaiJS 是创建通用图形(从简单图标到复杂图表)的绝佳选择。它使用关键帧完全控制 SVG 中的路径和动画效果;
除此之外,BonsaiJS 有良好的文档维护,并且还有一些其它惊人的特性。
特性
安装及使用
npm 安装
npm install bonsai
然后,就可以使用 BonsaiJS API了,嵌入 SVG 图像并设置其动画,如下所示:
bonsai.run(document.body, {
width: 600,
height: 600,
code: function() {
var url = 'example.svg';
new Bitmap(url).on('load', function() {
this.attr('width', 200);
this.addTo(stage);
this.animate('3s', {
x: 200
});
});
}
});
这里有一个可供在线编辑的例子 online editor,以及文档和更多细节在 documentation。
VivusJS 是一个设置 SVG 动画的轻量级 JavaScript 库。
它提供了多种动画选择,还可以根据需要编写脚本来绘制 SVG。此外,VivusJS 没有任何依赖,还有一些其它吸引人的特性。
特性
安装及使用
VivusJS 每周 NPM 下载量超过 4500 次,GitHub stars 的下载量达到 135 万次。
您可以使用 NPM、Bower 或 CDN 安装;
// NPM
npm install vivus
// Bower
bower install vivus
// jsDelivr CDN
cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js
使用方式:
// Inline
<svg id="my-svg">
<path...>
</svg>
<script>
new Vivus('example.svg', {duration: 200}, myCallback);
</script>
----------------------------------------------------------
// Dynamic
<div id="svg-div"></div>
<script>
new Vivus('svg-div', { duration: 200, file: 'example.svg' }, callback);
</script>
SVG.js 是一个操纵 SVG 并设置 SVG 动画的 JS 库。
它允许从3个不同方面设置SVG动画:大小、位置和颜色。与其他动画库相比,SVG.js 简单且轻量,并且具有一些令人兴奋的特性。
特性
安装及使用
可以 NPM、Yarn 或 CDN 安装SVG.js。
// NPM
npm install @svgdotjs/svg.js
// Yarn
yarn add @svgdotjs/svg.js
// CDNs
https://cdnjs.com/libraries/svg.js
https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js
https://unpkg.com/@svgdotjs/svg.js
安装后,根据 API 开始绘制 SVG 和设置SVG动画:
import { SVG } from '@svgdotjs/svg.js'
var draw = SVG().addTo('body').size(300, 300)
var rect = draw.rect(100, 100).animate({
duration: 2000,
delay: 1000,
when: 'now',
swing: true,
times: 5,
wait: 200
}).attr({ fill: '#f06' })
Snap.svg 是一个让 SVG 焕然一新的 JS 库。
它支持所有最新的SVG功能,如遮罩、剪裁、模式设置和全渐变等;
特性
安装及使用
// NPM
npm i snapsvg
// Bower
bower install snap.svg
用于创建 SVG 路径动画;
Lazy Line Painter 与上述库稍有不同,它专门用于路径动画。此外,它还提供了一个名为 Lazy Line Composer 的在线工具,允许您在几秒钟内创建 SVG 动画。
安装及使用
// NPM
npm i lazy-line-painter
// CDN
<script src="https://cdn.jsdelivr.net/npm/lazy-line-painter@1.9.4/lib/lazy-line-painter-1.9.4.min.js"></script>
使用:
import LazyLinePainter from 'lazy-line-painter'
let el = document.querySelector('#example-svg')
let myAnimation = new LazyLinePainter(el, { strokeWidth : 10 })
myAnimation.paint()
OK,以上就是本篇要推荐的 5 种不同的 JavaScript SVG 动画库。
我们的 slogan 就是:对于好资源的收藏从不手软!!
我是掘金安东尼,公众号同名,日拱一卒、日掘一金,再会~