动画中的相对旋转

我对Raphael.js有问题。我想以相对的方式旋转“compassScale” - 设置在下面的代码中。动画中的相对旋转

这适用于路径，但所有文本“动画”到30度的绝对旋转。我希望他们旋转到相对于他们实际位置的30度。

var compassScale = paper.set(); 

var centerX = 200; 
var centerY = 200; 
var radius = 195; 

var compasCircle = paper.circle(centerX, centerY, radius); 

for(var i = 0; i < 360; i++) { 
    var winkelRad = i * (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);

来源

2011-03-03 speznaz

就像你说的，问题在于你将所有元素设置为30度，而不是当前旋转+ 30度。一旦你想到这一点，其实很简单。这里是你的作品修改后的代码：

var compassScale = paper.set(); 
var texts = []; // array to hold the text elements 

var centerX = 200; 
var centerY = 200; 
var radius = 195; 

var compasCircle = paper.circle(centerX, centerY, radius); 

for(var i = 0; i < 360; i++) { 
    var winkelRad = i * (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 the text elements, adjusting their rotation by adding 30 to their individual rotation 
for (var i = 0, l = texts.length; i < l; i += 1) { 
    // node.attr("rotation") returns something like 50 200 200, so we have to split the string and grab the first number with shift 
    texts[i].animate({rotation: (30 + +texts[i].attr("rotation").split(" ").shift()) + " " + centerX + " " + centerY}, 5000); 
}

来源

2011-05-12 00:49:08 wambotron

感谢。我在inkskape中创建了一个png（形成上面的代码）并在raphael中旋转了图像。这在移动设备上也表现更好。 – speznaz 2011-05-12 05:19:04

只是一个快速的观察：

貌似“旋转”是不是Atrr的一部分了，因为第二版，所以你不能用它“动画”，但你可以替换成 “改造： ”R“ +（一定程度上）” ..

如：

 element.animate({transform: "r" + (-90)}, 2000, 'bounce');

来源

2012-03-09 17:28:10 Edward

动画中的相对旋转

回答

相关问题