A JavaScript library with 10 SVG animations recommended

This article mainly recommended 10 SVG animation JavaScript Library, very practical, the effect is also very good, the need for friends can refer to.

SVG can often be used as a cross resolution video. This means that the sharpness of the picture will not be lowered on a high score screen. In addition, you can even get SVG to move by using some JavaScript class libraries. Next, we'll share some JavaScript class libraries that will help us improve the SVG animation by one level.

Vivus

Vivus is a kind of animation JS class Library, which can give SVG images to show the process of being painted. Vivus is not dependent on other classes of libraries (such as jquery). You just need to add this. js file to the page, and then pass in the SVG section that needs to be animated. At the same time, by specifying some configuration, it can display animation effects directly after the page is loaded.

Bonsai

Bonsai is a feature-rich JS class library that you can use to draw and animate dynamic content on the site. These include HTML5 video, changing Canvas, and SVG. Through the bonsai frame, you can draw a simple rectangle, or even a rectangle, if you like, and even draw a rich multiplayer cartoon game to go in.

Velocity

Velocity is a JS class library, which is used for frequent animation. Velocity's JS animation "Speed" is very fast. It's faster than jquery, even faster than CSS animations. The Velocity API is similar to $.fn.animate, and is operated by $ (). Velocity () is another method, compared to $ (). Animate (). In conclusion, you should use a consistent animate effect, including the FadeIn and Fadeout methods (translator: Velocity provides FadeIn and Fadeout methods).

Raphael

Raphaeljs is also often used to draw SVG diagrams and animations on Web pages. It is compatible with various Windows browsers until IE6, because of this, Raphael becomes the most trusted JS (SVG) class library on the market. With it, you can make analytic charts, maps, games, just like cooking in the kitchen.

Snap

Snapsvg is another well-known JS class library, which was developed by Dmitry Baranovskiy (Raphael). It is also the Adobe Web Software Group to maintain. Unlike Raphael, it only provides the latest version of IE support. This makes snapsvg a lot smaller in volume (compared to Raphel) to achieve the same functionality (such as trim) and support the latest features.

Lazy line painter

The laid back Range painter is a jQuery plug-in that is often used as a drawing atlas, a bit like Vivus. Usually you'll spit it out and it's just such a special feature. Let me explain, if you are using illustrator or Inkscape SVG images, and the SVG image does not change any color, only the changes in the trajectory, you can use it.

Svg.js

Svg.js is a lightweight operation and animation SVG class library. You can manipulate the direction, position and color of the change. This is not finished, you can even implement some other features such as Plug-ins. This example can attach some plug-ins, such as svg.filter.js, he can implement Gaussian blur, Desaturase, compare, sepia, etc. for your picture.

Walkway

Walkway supports 3 ways to Path,line and use polyline to draw SVG lines. It provides a good example of drawing a PlayStation set of animations.

Progressbar.js

Progressbar.js is a lovely and easily accepted growth graph used to draw cartoon svg lines. With it, various shapes can be used as growth curves. It integrates some useful shapes such as range,circle and block, and you can even develop a growth graph using illustrator or other vector drawing tools. Progressbar.js is lightweight, MIT licensed and supports ie9+. You can modify a large columnar growth chart by using it. You can also change attributes to generate animations, such as stroke breadth,load opacity, load coloring, and so on.

Chartlist.js

Chartist.js is a simple, easily accepted icon library that is drawn through SVG. Chartist's mission is to provide a simple, lightweight, non-intrusive Chart library. You need to provide some JavaScript configuration objects to do some custom configuration, otherwise it will use the default configuration, which is already sorted by default.

Chartist is drawn by inline-svg, so it has little impact on DOM operations, as opposed to the functionality it provides. And it means that Chartist will not provide personal control, watermarks, behavior, etc. you can do with simple HTML, JavaScript and CSS.

The above is described in this article to you recommend the SVG animation of the JavaScript Library, hope to be able to learn JavaScript to help you.