動畫中的相對旋轉

Question

我有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);

Answer 1

就像你說的那樣，問題是你將所有元素設置為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);
}

Answer 2

快速觀察一下：

看起來“旋轉”不再是Atrr的一部分，因為版本2，所以你不能在“動畫”中使用它，但你可以用“transform：”r“+（某種程度）”替換它。

例如：

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