Closed ghost closed 10 years ago
Mappers are not supported in animations, at least not yet. There are important performance considerations, because the animations and the mappers can both be expensive on their own. I'll take a look at this, and I'll put my updates in this ticket for you to follow. Thanks -Max
On Monday, 19 August 2013 at 10:20, salpen wrote:
cy.nodes().animate({css:"height" :10},{duration:1000}); works but cy,nodes().animate({css:"height":'mapData(weight,20,40,10,80)'},{duration:1000}); does not work
— Reply to this email directly or view it on GitHub (https://github.com/cytoscape/cytoscape.js/issues/316).
Unless this can be done without impacting performance, it's not worth it to add. A mirror of the mapping function could be created to manually calculate the final animation value.
e.g. ele.mapData('weight', 20, 40, 10, 80)
I'm changing this ticket. A better solution than supporting programmatic access to calculated mapper values is to allow for animation transitions. This should support your usecase: Rather than manually specifying the same mapper used in a stylesheet in the call to eles.animate()
, you could simply specify style properties to transition.
Something along the lines of:
node {
height: 10px;
width: 10px;
}
node:selected {
height: mapData(weight, 20, 40, 10, 80);
width: mapData(weight, 20, 40, 10, 80);
transition-property: height, width;
transition-duration: 1s;
}
So instead, it becomes the responsibility of the styler to add the animation on the state change to node:selected
.
Try to use syntax from: http://www.w3schools.com/css/css3_transitions.asp
cy.nodes().animate({css:"height" :10},{duration:1000}); works but cy.nodes().animate({css:"height":'mapData(weight,20,40,10,80)'},{duration:1000}); does not work