8个SVG动画JavaScript库

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

在先前的SVG系列文章之一中，我们向您展示了SVG动画如何与<animate>元素一起工作，尽管它处于较低水平。 这次，我们将共享几个JavaScript库，这些库有助于将SVG动画扩展到一个新的水平。

• Animate.css – CSS3库轻松创建动画
• 使用Textillate.js轻松设置文本动画
• 如何将Photoshop文本转换为SVG
• 动画以使用jQuery隐藏和滑动内容

1. Vivus

Vivus是一个JavaScript库， 使您的SVG可以被绘制 。 Vivus开箱即用，无需任何依赖项（例如jQuery）。 只需在HTML中包含.js文件，然后指定要设置动画的SVG元素以及一些预设选项即可立即开始动画。

例如：

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

上面的内容将使我的SVG元素（在200毫秒内）具有svg-element ID的动画。 该SVG的每个元素将在该时间范围内一个接一个地绘制。