CODEWITHSUNDEEP
animationcytoscape.js
Carl Moder
Carl Moder

Reputation: 35

Cytoscape.js: cose layout with animation

I am trying to animate the change between layouts of a Cytoscape.js graph.

When switching from cose to grid, the change is animated. When switching from grid to cose, only the end position is shown without any animation.

I use a simple test scenario starting with a small graph in grid layout and this code to switch layouts:

...
function changeLayout(type){
  var options = {
    name: type,
    animate: true
  };
  cy.layout(options);
}
...
<div onclick="changeLayout('cose')">to cose</div>
<div onclick="changeLayout('grid')">to grid</div>

I also tried the other options listed here: http://js.cytoscape.org/#layouts/cose but I am not able to animate from grid to cose.

What am I doing wrong?

Upvotes: 2

Views: 3717

Answers (2)

Ben Rudolph
Ben Rudolph

Reputation: 2517

You can do this now using animate: 'end' in the layout definition. See https://github.com/cytoscape/cytoscape.js/blob/unstable/src/extensions/layout/cose.js#L31. This will animate the nodes from their initial starting position to their end position, in contrast with animate: true which will animate the changes in the layout, and only do so after a certain threshold of time (see animateThreshold).

Upvotes: 1

maxkfranz
maxkfranz

Reputation: 12250

A continuous layout like CoSE animates live. That is, it animates during the iterations of the calculations it does. If the layout runs very quickly -- as CoSE often does -- then you won't get much if any animation.

There is a proposal being discussed to have an option to animate continuous layouts like discrete ones (i.e. tweening between the start and end positions).

If you want this behaviour for now, you'll have to run the layout while batching. Now that you have saved the start and end positions for each node, you can just end batching and animate.

Upvotes: 1

Related Questions