10个利用SVG创建动画的最好 JavaScript 库

使用 SVG来创建动画和图形非常便利， 有许多专用的JavaScript库能够轻松地操纵SVG图形和创建动画。

Velocity

Velocity is one of my personal favourites when it comes to bringing life to graphics. Velocity is built for speed and renders animations real fast. It is real easy to get started with Velocity if you are already familiar with animations in jQuery. It uses the same API that is used for jQuery’s $.animate ().

The best thing about velocity library is its full support for SVG element animation which includes SVG specific properties like x, rx, stroke-width etc. Color animation is also supported for fill, stroke and stopColor properties of SVG.

You can read more about Velocity at - julian.com.

SVG.JS

Are you looking for a lightweight library? SVG.JS is the one for you, the size of this library is around 11k only gzipped and that is all. You get all the powers to play around with scalable vector graphics a.k.a. SVG with this 11k size packet in your pocket.

SVG.JS is readable and uncluttered, supports animations on size, position,, transformations and color for sure. It supports binding events to elements, opacity masks, clipping paths, text paths and dynamic gradients to name a few.

SVG.JS is here to stay for long for the simple reason that it is modular which makes it a breeze to create extension and plugins to extend the base functionality. It is well documented too.

You can know more about svg.js at - svgjs.com.

Walkway

Looking for something very basic and specific for path drawing, line and polyline elements, walkway is the library for you. It does just the minimum, what does it well. It is a very small library created by Connor Atherton inspired by polygon ps4 review line animation. 

You can know more about Walkway.js at - connoratherton.com/walkway.

RaphaelJS

Why use RaphaelJS? You can use RaphaelJS for creating vector graphics as well as manipulating or animating them. It follows W3C SVG standards which mean that the graphic object crated with this library is a DOM object too and can be manipulated, of course, with JavaScript. Browser support is excellent, you can guess that from the fact that it works even in IE 6.0.

You can know more about Raphael.js at - raphaeljs.com.

Snap.Svg

If you want to leverage the latest of SVG features including masking, clipping, full gradients, groups and patterns. Snap .svg is the library to manipulate all of these.  It is for forward looking designers and targets modern web browsers. Snap provides simple JavaScript API for creating animations and making content more engaging.

Snap can be used for creating SVG and animating SVG created using graphic design tools like Sketch, Illustrator or Inkscape.

Snap is open source, free to use and available under Apache2 license, you can clone it from GitHub. All credit goes to Dmitry Baranovskiy for creating this library, the guy who also authored RaphaelJS.

You can know more about Snap.svg at - snapsvg.io.

Bonsai

Bonsai is a complete toolset for graphics manipulation and animations. It is one of the most powerful libraries available as of today. It comes with an SVG rendered which essentially means you can create SVG with Bonsai as well as use graphics API for manipulation and animations. The key features of Bonsai that make it real powerful are –

• Runner and renderer are separated at the core
• Supports path morphing, assets including images, fonts, audio and video
• Keyframe  and time based animations

There is an online editor as well that gives you playground to try your hands with bonsai. It is a real fun and power working with this library.

You can know more about bonsai.js at - bonsaijs.org.

Lazy Line Painter

Lazy line painter is a small jQuery plugin for SVG path animation. This is what it does and for sure does with style.  Creating path animations is as easy as exporting the line art from illustrator as .svg , use the “SVG to Lazy Converter” and define the path durations in the code.  That is it, three step recipe for creating SVG path animation.

You can know more about lazylinepainter.js at - lazylinepainter.info.

Vivus

Draw graphics with elegance by using Vivus library, the big daddy of SVG animation when it comes to line drawing.

Vivus library has no external dependencies and can run standalone. Library comes with out of the box animation styles as well as gives you an option to draw your SVG the way you want it to be. 

You can read more about Vivus at - maxwellito.github.io/vivus.

ProgressBar.js

This small JavaScript library is aimed at creating animated SVG progress bars. It comes packed with basic shapes like line, circle and square etc., but that is just the basic. One can create graphical progress bars with illustrator or other vector graphic editors and create animated SVG progress bars using this library.

You can read more about Progressbar.js at - kimmobrunfeldt.github.io/progressbar.js.

Two.JS

Two.JS is the library for playing around with SVG, Canvas and webgl and focuses completely on two dimensional shapes. This library relies on the scenegraph and operations like rotation, translation, scale etc. can be applied easily on the drawn objects. Two.js comes packed with SVG interpreter that ensures that vector graphics created in commercial software’s like Adobe Illustrator etc. can be imported in Two.js scene and manipulated further. 

You can read more about Two.js at - jonobr1.github.io/two.js.