javascript - A relative rotation in an animation -


i have problem raphael.js. want rotate "compassscale" - set in following code - in relative manner.

this works paths, texts "animate" absolute rotation of 30 degree. want them rotate 30 degrees relative actual positions.

var compassscale = paper.set();  var centerx = 200; var centery = 200; var radius = 195;  var compascircle = paper.circle(centerx, centery, radius);  for(var = 0; < 360; i++) {     var winkelrad = * (math.pi/180)     var xstart = centerx + math.sin(winkelrad) * radius;     var ystart = centery + math.cos(winkelrad) * radius;     var diff = 6;      if(i % 10 === 0){         compassscale.push(paper.text(centerx, centery - radius + 18, i).rotate(i, centerx, centery, true));         diff = 12;     } else if(i % 5 === 0) {         diff = 8;     }      var xend = centerx + math.sin(winkelrad) * (radius - diff);     var yend = centery + math.cos(winkelrad) * (radius - diff);      compassscale.push(paper.path("m" + xstart + " " + ystart + " l" + xend + " " + yend)); }  compassscale.animate({rotation:"30 " + centerx + " " + centery}, 5000); 

like said, problem you're animating elements 30 degrees, not current rotation + 30 degrees. it's quite simple once think of way. here revised code works:

var compassscale = paper.set(); var texts = []; // array hold text elements  var centerx = 200; var centery = 200; var radius = 195;  var compascircle = paper.circle(centerx, centery, radius);  for(var = 0; < 360; i++) {     var winkelrad = * (math.pi/180)     var xstart = centerx + math.sin(winkelrad) * radius;     var ystart = centery + math.cos(winkelrad) * radius;     var diff = 6;      if(i % 10 === 0){         texts.push(paper.text(centerx, centery - radius + 18, i).rotate(i, centerx, centery, true));         diff = 12;     } else if(i % 5 === 0) {         diff = 8;     }      var xend = centerx + math.sin(winkelrad) * (radius - diff);     var yend = centery + math.cos(winkelrad) * (radius - diff);      compassscale.push(paper.path("m" + xstart + " " + ystart + " l" + xend + " " + yend)); }  compassscale.animate({rotation:"30 " + centerx + " " + centery}, 5000); // loop through text elements, adjusting rotation adding 30 individual rotation (var = 0, l = texts.length; < l; += 1) {     // node.attr("rotation") returns 50 200 200, have split string , grab first number shift     texts[i].animate({rotation: (30 + +texts[i].attr("rotation").split(" ").shift()) + " " + centerx + " " + centery}, 5000); } 

Comments

Popular posts from this blog

c# - How to set Z index when using WPF DrawingContext? -

razor - Is this a bug in WebMatrix PageData? -

visual c++ - Using relative values in array sorting ( asm ) -