javascript - 旋转动画停止时如何确定元素的 Angular ？

Question

我有一些内嵌的 SVG，我在其上设置旋转动画，通过在 div 上单击鼠标来控制。

当按下鼠标 (mousedown) 时，动画开始并最多旋转 180 度。松开鼠标 (mouseup) 时，动画将终止。

问题是我不知道动画在什么 Angular 终止。这会产生一个问题，因为 javascript 假定动画已成功将 SVG 旋转 180 度，因此将从错误的点开始下一个动画序列。

可以在 JSFiddle 找到此问题的示例.我怀疑该解决方案与 DOM 有关，但我在尝试挖掘所有可用信息时迷路了。

Answer 1

您可以像这样使用 SVG DOM 读取动画值...

$('#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);
    }

});