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
Post a Comment