推荐:实现 SVG 动画的 5 个 JavaScript 库~

举报
掘金安东尼 发表于 2022/09/15 09:06:57 2022/09/15
【摘要】 现如今,SVG 已经广泛应用于 Web 开发当中,可缩放而不失真(矢量图形),就是它的最大优势!但是,你知道 SVG 除了可以被用作于静态图片,还可以应用于 SVG 动画吗?本篇带来实现 SVG 动画的 5 个 JavaScript 库!点赞 + 收藏 === 学会,一气呵成!👍👍👍 1. BonsaiJS具有直观的图形 API,是一个基于 SVG 渲染的轻量级图形库;BonsaiJS...

现如今,SVG 已经广泛应用于 Web 开发当中,可缩放而不失真(矢量图形),就是它的最大优势!

但是,你知道 SVG 除了可以被用作于静态图片,还可以应用于 SVG 动画吗?

本篇带来实现 SVG 动画的 5 个 JavaScript 库!

点赞 + 收藏 === 学会,一气呵成!👍👍👍

1. BonsaiJS

image.png

具有直观的图形 API,是一个基于 SVG 渲染的轻量级图形库;

BonsaiJS 是创建通用图形(从简单图标到复杂图表)的绝佳选择。它使用关键帧完全控制 SVG 中的路径和动画效果;

除此之外,BonsaiJS 有良好的文档维护,并且还有一些其它惊人的特性。

特性

  • 支持 HTML5 canvas 和 SVG;
  • 运行和渲染在结构上,是分开的;
  • 支持关键帧和传统动画;
  • 在 Node 环境下运行上下文;
  • 适配所有主流浏览器;

安装及使用

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](<http://orbit.bonsaijs.org/#new Rect(100%2C 100%2C 100%2C 100).fill(%22red%22).addTo(stage)%3B>),以及文档和更多细节在 documentation

2. VivusJS

image.png

VivusJS 是一个设置 SVG 动画的轻量级 JavaScript 库。

它提供了多种动画选择,还可以根据需要编写脚本来绘制 SVG。此外,VivusJS 没有任何依赖,还有一些其它吸引人的特性。

特性

  • 提供3种主要动画类型:delayed、sync 和 one by one;
  • 为path和动画提供5种计时选项;
  • 高性能;
  • 允许自定义SVG.
  • 安装之前就能测试 Vivus instant

安装及使用

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>

3. SVG.js

image.png

SVG.js 是一个操纵 SVG 并设置 SVG 动画的 JS 库。

它允许从3个不同方面设置SVG动画:大小、位置和颜色。与其他动画库相比,SVG.js 简单且轻量,并且具有一些令人兴奋的特性。

特性

  • The syntax is simple to read and understand.
  • 16KB when gzipped and 62KB when minified.
  • Size, position, transformations, color, and other animations.
  • There are several plugins available for additional customization.
  • Clipping paths and opacity masks are fully supported.

安装及使用

可以 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' })

4. Snap.svg

image.png

Snap.svg 是一个让 SVG 焕然一新的 JS 库。

它支持所有最新的SVG功能,如遮罩、剪裁、模式设置和全渐变等;

特性

  • 支持最新的SVG功能;
  • 可以在Illustrator、Inkscape或Sketch中创建SVG内容,然后使用Snap设置动画;
  • 良好的浏览器支持;
  • 百分百开源免费;

安装及使用

// NPM
npm i snapsvg

// Bower
bower install snap.svg

5. Lazy Line Painter

image.png

用于创建 SVG 路径动画;

Lazy Line Painter 与上述库稍有不同,它专门用于路径动画。此外,它还提供了一个名为 Lazy Line Composer 的在线工具,允许您在几秒钟内创建 SVG 动画。

image.png

安装及使用

// 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 就是:对于好资源的收藏从不手软!!

我是掘金安东尼,公众号同名,日拱一卒、日掘一金,再会~

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。