15個利用SVGs實現動畫的jQuery插件
1 – Vivus.js
Vivus is a little JavaScript class (little because it’s lightweight and have no dependency) to make animations with SVGs in a webpage. Different animations are available, even scripting the entire SVG to do whatever you want.
2 – Lazy Line Painter
A Jquery plugin for path animation using the Rapha?l Library.
3 – Snap.svg
SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.
Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups, and more.
4 – svg.js
A lightweight library for manipulating and animating SVG
Svg.js has no dependencies and aims to be as small as possible.
Svg.js is licensed under the terms of the MIT License.
5 – SVG Animation
a jQuery function for animating SVG multiple path asynchronously
6 – Velocity.js
Velocity is an animation engine that re-implements jQuery’s $.animate() for significantly greater performance (making Velocity also faster than CSS animation libraries) while including several new features.
In just 9Kb zipped, Velocity includes all of $.animate()’s features while packing in color animation, transforms, loops, easings, SVG support, and scrolling. Velocity is the best of jQuery, jQuery UI, and CSS transitions combined.
7 – Stroke Animation
SVG Stroke Animation Plugin.
8 – SVGMagic
SVGMagic is a simple jQuery plugin that searchs for SVG images (including background-images) on your website and creates PNG versions if the browser doesn’t support SVG.
9 – Two.js
Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.
10 – jQuery SVG
jQuery SVG Plugin allows you to easily drive the SVG canvas from your JavaScript code. The main jQuery SVG package provides the basic SVG functionality including drawing primitives (rectangles, ellipses, lines, etc.), structural elements (definitions, groups, etc.), and supporting objects (paths and text).
11 – Zino UI
Zino UI SVG is a SVG micro-library for drawing two-dimensional vector graphics.
12 – Rapha?l—JavaScript Library
Rapha?l is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
Rapha?l ['r?fe??l] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Rapha?l’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.
Rapha?l currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
13 – walkway
An easy way to animate simple SVG elements.
14 – Drawpage
Draw outline of your web page and disappear.
15 – Flight Indicators
The Flight Indicators Plugin allows you to display high quality flight indicators using html, css3, jQuery and SVG images. The methods make customization and real time implementation really easy. Further, since all the images are vector svg you can resize the indicators to your application without any quality loss !
16 – bonsai.js
Bonsai js is a lightweight graphics library with an intuitive graphics API and an SVG renderer.
Bonsai’s main features include:
- Architecturally separated runner and renderer
- iFrame, Worker and Node running contexts
- Paths
- Assets (Videos, Images, Fonts, SubMovies)
- Keyframe and time based animations (easing functions too)
- Path morphing
- and much more…