Javascript Snap.svg：旋转动画在 270 度左右旋转很长一段路要走

Question

我遇到了 snap.svg 的问题，每当我在 269 到 270 度之间设置旋转动画时，整个物体都会围绕整个圆圈旋转，而不是前进一个度数。这是重现问题的最小代码 sn-p：

function testRotation() {
  var draw = Snap('#test');
  var box = draw.rect(0, 0, 100, 161.5);
  var rotation = 268;
  var increment = 1;
  var transform = 't200,200r'+rotation+',50,80.75';
  console.log(transform)
  box.attr({
    fill: '#000000',
    transform: transform});

  function rotate() {
    if (rotation > 271) increment = -1;
    if (rotation < 269) increment = 1;
    rotation += increment;
    var transform = 't200,200r'+rotation+',50,80.75';
    console.log(rotation);
    box.animate({transform: transform}, 1000);
    setTimeout(rotate, 1000);
  }

  setTimeout(rotate, 1000)
}

这是一个 JSFiddle 版本，您可以在其中看到它的实际效果：http://jsfiddle.net/qsmzexut/2/

它从 268 度开始，然后每秒将角度增加 1 度。当它从 269 到 270 时，它会一路转来转去。当它达到 272 时，它会回落，然后回升等等。正如您所看到的，这种行为在两个方向上都存在。

有什么方法可以避免这种行为？我希望能够旋转一个度数而不是让它围绕整个圆圈摆动！谢谢。

Answer 1

为了每次移动一点 - rotation = rotation - increment;