Question

我尝试使用svg创建一个简单的测试，允许我更改svg的质量设置（FPS）和旋转速度。

我注意到转换，旋转功能与度数一起使用。据我所知，不可能通过使用小数作为度数来提高精度。

那么我们是否坚持使用旋转度，这给我们最多360件来划分圆圈，或者有办法以某种方式提高精度？

我问的原因是因为我创建了一支笔https://codepen.io/KaGys/pen/yKVjrr?editors=1111，其中添加了几个质量设置。更高的质量设置导致每秒更多的帧数。这意味着如果1度是我可以旋转的最小单位，我需要开始延迟动画以使每帧慢于1度，这在我的最高质量设置（每秒最快帧数）仍然是一个非常快的旋转。我希望这个问题很清楚，如果没有，请告诉我，我会尽力澄清。

    var ultra = 1000 / 120;
    var high = 1000 / 60;
    var medium = 1000 / 30;
    var low = 1000 / 10;

    var quality = ultra;

    var speed = 1; // degrees per frame on ultra quality (converts to lower quality settings to maintain consistency)
    // I tried doing this on per second basis, which works but the problem is that degrees can not be decimals which causes inconsistent behavior
    speed = (speed * quality) / ultra; // Recalculate the speed for consistency across quality settings

  var rotateSettings = {
    path: document.getElementById("pathGroup"),
    active: false,
    speed: speed,
    quality: quality
  };

  function rotate() {
    if (this.active) {
      setTimeout(rotate.bind(this), this.quality);
      var currentRotation = Number(
        /\d+/.exec(this.path.getAttributeNS(null, "transform"))
      );
  currentRotation = currentRotation%360;
      console.log(this.speed);
      this.path.setAttributeNS(
        null,
        "transform",
        `rotate(${currentRotation + this.speed}, 60, 60)`
      );
    }
  }

  document.getElementById("btnRotate").addEventListener("click", e => {
    if (!rotateSettings.active) {
      rotateSettings.active = true;
      document.getElementById("btnRotate").style.background = "green";
      document.getElementById("btnRotate").style.color = "white";
      rotate.bind(rotateSettings)();
    } else {
      rotateSettings.active = false;
      document.getElementById("btnRotate").style.background = "white";
      document.getElementById("btnRotate").style.color = "green";
    }
  });

Answer 1

您可以通过SVG DOM

读取变换角度

var currentRotation = this.path.transform.animVal[0].angle;

svg变换旋转精度

1 个答案: