10 very useful JavaScript libraries for SVG animations

SVG can often be used as a cross-resolution video. This means that the sharpness of the image is not lowered on a high-score screen. In addition, you can even let SVG move up by using some JavaScript class libraries. Below, we share some JavaScript class libraries that will help us to increase the level of SVG animation.

Vivus

Vivus is a can animation JS class library, it can show the SVG image is drawn out process. Vivus is not dependent on other class libraries (such as jquery). You just need to add the. js file to the page and then pass in the SVG part that you want to animate. At the same time, by specifying some configuration, it can directly display the animation effect after the page loads.

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, you can even draw a rich multiplayer cartoon game to go in.

Velocity

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

Raphael

Raphaeljs is also commonly used to draw SVG diagrams and animations on Web pages. It is compatible with a variety of Windows browsers until IE6, as this makes Raphael the most trusted JS class library on the market. With it, you can make analytic charts, maps, games like cooking in the kitchen.

Snap

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

Lazy Line Painter

Laid back Range Painter is a jQuery plugin that is often used as a drawing atlas, somewhat like Vivus. Usually you can spit the groove is that it's only such a special function. Let me explain, if you are an SVG image made with illustrator or Inkscape, and the SVG image does not change in any color, it is only the change of the trajectory that can be used.

Svg.js

Svg.js is a lightweight SVG class library for manipulating and animating. You can manipulate the change direction, position and color. It's not over yet, you can even implement some other features like plugins yourself. This example can attach some plug-ins, such as Svg.filter.js, he can implement for your picture Gaussian blur, desaturase, compare, sepia and so on.

Walkway

Walkway supports 3 ways, path, line, and SVG lines drawn with polyline . It provides a good example of drawing a set of PlayStation animations.

Progressbar.js

Progressbar.js is a lovely and easy-to-accept 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 chart yourself through illustrator or other vector drawing tools. Progressbar.js is lightweight, MIT licensed and supports ie9+. You can modify the large histogram growth chart through it. You can also change properties to generate animations such as stroke breadth, load opacity, load coloring, and so on.

English Original: Helpful JavaScript Libraries to Animate SVG

10 very useful JavaScript libraries for SVG animations