| animate: function( | opt, | | versor | ) |
|
Animates a Graph by interpolating some Graph.Node, Graph.Adjacence or Graph.Label properties.
Parameters
| opt | (object) Animation options. The object properties are described below |
| duration | (optional) Described in Options.Fx. |
| fps | (optional) Described in Options.Fx. |
| hideLabels | (optional|boolean) Whether to hide labels during the animation. |
| modes | (required|object) An object with animation modes (described below). |
Animation modes
Animation modes are strings representing different node/edge and graph properties that you’d like to animate. They are represented by an object that has as keys main categories of properties to animate and as values a list of these specific properties. The properties are described below
| position | Describes the way nodes’ positions must be interpolated. Possible values are ‘linear’, ‘polar’ or ‘moebius’. |
| node-property | Describes which Node properties will be interpolated. These properties can be any of the ones defined in Options.Node. |
| edge-property | Describes which Edge properties will be interpolated. These properties can be any the ones defined in Options.Edge. |
| label-property | Describes which Label properties will be interpolated. These properties can be any of the ones defined in Options.Label like color or size. |
| node-style | Describes which Node Canvas Styles will be interpolated. These are specific canvas properties like fillStyle, strokeStyle, lineWidth, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, etc. |
| edge-style | Describes which Edge Canvas Styles will be interpolated. These are specific canvas properties like fillStyle, strokeStyle, lineWidth, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, etc. |
Example
var viz = new $jit.Viz(options);
//...tweak some Data, CanvasStyles or LabelData properties...
viz.fx.animate({
modes: {
'position': 'linear',
'node-property': ['width', 'height'],
'node-style': 'shadowColor',
'label-property': 'size'
},
hideLabels: false
});
//...can also be written like this...
viz.fx.animate({
modes: ['linear',
'node-property:width:height',
'node-style:shadowColor',
'label-property:size'],
hideLabels: false
});