1

そのため、私はこの問題に少し取り組んでいましたが、さらに別の障害にぶつかりました。

基本的に、Raphael.js で作成された一連の svg オブジェクトで、マウス クリックによって回転アニメーションがトリガーされるようにしようとしています。そして、実際のアニメーションを解決しましたが、その後のクリックで実行できないようです... 1回実行するだけで、それだけです。

だから、私が含めることを怠っているコードが少しあると思います..または、適用されたアニメーションの後に座標が変更された後にアニメーションが壊れる可能性がありますか? とにかく困ってます…

これがJSFiddle デモです。

コードは次のとおりです。

var rsr = Raphael('rsr', 320, 240),
    circle_01 = rsr.circle(160, 120, 20).attr({fill:"#666666"}),
    circle_02 = rsr.circle(160, 220, 20),
    circle_03 = rsr.circle(160, 20, 20),
    circle_04 = rsr.circle(20, 120, 20),
    circle_05 = rsr.circle(300, 120, 20),
    group = rsr.set();

group.push(
    circle_02, 
    circle_03, 
    circle_04, 
    circle_05
);

var aa = group.getBBox();

circle_01.click(function() {

    var group_x_center = aa.x + (aa.width / 2),
        group_y_center = aa.y + (aa.height / 2);

    group.animate({
        transform: group.attr("transform") + "R360," 
            + group_x_center + "," 
            + group_y_center
    }, 1000); 
});
4

1 に答える 1

2

あなたが見ている問題は、アニメーションを最初に実行するときに、セットを目的の角度だけ回転させ、その後同じアニメーションを起動すると、セットがすでに回転しているため何もしないことだと思います角度。

絶対に設定するのではなく、変換に追加することでこの問題を解決します。

group.animate({transform: group.attr("transform") + "...R45,"+group_x_center+","+group_y_center}, 1000);

または、現在の角度を追跡し、クリックするたびに角度を増やしてから、可変に設定することもできますが、それはおそらくより多くの作業になるでしょう =)

于 2012-05-11T23:59:26.400 に答える