1

いくつかのインラインSVGがあり、その上で回転をアニメーション化しています。これは、divでのマウスクリックによって制御されます。

マウスを押す（マウスダウン）と、アニメーションが開始され、最大180度回転します。マウスを離すと（マウスアップ）、アニメーションは終了します。

問題は、アニメーションがどの角度で終了したかわからないことです。これにより、JavaScriptがアニメーションがSVGを180度正常に回転させたと想定し、誤ったポイントから次のアニメーションシーケンスを開始するため、問題が発生します。

この問題の例は、JSFiddleにあります。解決策はDOMに関連していると思いますが、入手可能なすべての情報を掘り下げようとして迷子になっています。

4

1 に答える 1

2

このようにSVGDOMを使用して、アニメーション化された値を読み取ることができます...

$('#control1').mouseup(function() {
    // get the animation element
    var anim = document.getElementById("rotatePolysvg3");

    // stop the animation (in case it is running)
    anim.endElement();

    var g = document.getElementById("polysvg2");

    if (g.transform.animVal.numberOfItems > 0) {
      alert(g.transform.animVal.getItem(0).angle);
    }

});
于 2012-09-29T07:33:59.970 に答える