cytoscape-animate-flow

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:

1. Set the version number environment variable: export VERSION=1.2.3
2. Publish: gulp publish
3. 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