cytoscape-animate-flow
v0.0.2
Published
Show animation on the edge
Downloads
2
Readme
cytoscape-cytoscape.js-animate-flow
Description
Show animation on the edge
Dependencies
- Cytoscape.js ^2.7.0
Usage instructions
Download the library:
- via npm:
npm install cytoscape-cytoscape.js-animate-flow
, - via bower:
bower install cytoscape-cytoscape.js-animate-flow
, or - via direct download in the repository (probably from a tag).
require()
the library as appropriate for your project:
CommonJS:
var cytoscape = require('cytoscape');
var animateFlow = require('cytoscape-animate-flow');
cytoscape.animateFlow( cytoscape ); // register extension
AMD:
require(['cytoscape', 'cytoscape-animate-flow'], function( cytoscape, animateFlow ){
animateFlow( cytoscape ); // register extension
});
Plain HTML/JS has the extension registered for you automatically, because no require()
is needed.
API
Please briefly describe your API here:
var af = cy.animateFlow({
stackOrder: 4, // which z-index to show the master layer, since cytoscape already takes 1,2,3, this order should start from 4
rate: 100, // how fast to show the animation, we've 100 frames for any edge, every frame will be rendered every rate milliseconds
size: 20, // the diameter of the rect to show for animation
startColor: 'rgba(0,255,0,0)', // the color at the edge of the rect
endColor: '#0F0', // the color at the center of the rect
sizeKey: null // we could use the edge.data(sizeKey) as the size for the rect
});
// start the animation
af.start(/* pass the elements which needs animation here */);
// stop the animation
af.stop();
Publishing instructions
This project is set up to automatically be published to npm and bower. To publish:
- Set the version number environment variable:
export VERSION=1.2.3
- Publish:
gulp publish
- If publishing to bower for the first time, you'll need to run
bower register cytoscape-cytoscape.js-animate-flow https://github.com/tongbin/cytoscape.js-animate-flow.git