第一次旋转后的 SnapSVG 旋转问题

Question

我在this codepen 中创建了一个小演示。

当点击四个按钮中的任何一个时，使用以下方法将对象旋转到正确的位置...

function rotateTo(angle) {
      var ring = paper.select("#INNER_RING");
      var bbox = ring.getBBox();
      var cx = bbox.cx;
      var cy = bbox.cy;

      var trans = 'r' + angle + ' ' + cx + ' ' + cy; // + 's1,1,' + cx + ',' + cy;
      console.log(trans);

      ring.stop().animate({
          transform: trans
        },
        750,
        mina.linear,
        function() {
          settings.currentRotation = angle;
        });
    }

在第一次轮换中，一切都很顺利。然而，随后的旋转不仅会旋转，而且会随着旋转的发生而按比例缩放。对象确实最终处于正确的最终位置，但不需要缩放。

作为第一个转换的一部分，会发生什么会导致后续转换执行此操作？

Answer 1

从以前的矩阵中生成动画矩阵通常会变得非常混乱，因为它们通常不会做我们认为它们会做的事情（我在过去问过一个类似的问题here 可能有用，让你头脑清醒如果您想更深入地了解矩阵动画）。在第一个动画开始时，没有用于制作动画的变换矩阵，所以一切都非常简单。

但是，在第一个动画结束时，有一个变换矩阵应用于元素，这会导致问题，因为它试图从最后一个矩阵制作动画。

在随后按下按钮时，您实际上想要做什么还不是很清楚。无论您是想“再”旋转 90 度，还是再次从头开始旋转 90 度。

如果您只是想重复动画，您可以将变换重置为从头开始，这样可以轻松解决问题（但请注意，如果您按下动画中的按钮可能会出现问题）。

ring.attr('transform','')

jsbin

如果您想做更复杂的事情，并且需要从以前的状态进行动画处理，我会使用稍微不同的动画方法，而不是在元素上进行动画处理，而是使用 Snap.animate 并每次都构建您的转换字符串.所以可能看起来更像这样......

var rotateFrom = settings.currentRotation;
var rotateTo = rotateFrom + parseInt(angle)

Snap.animate(rotateFrom, rotateTo, function( val ) {
    ring.transform( 'r' + val + ',' + cx + ',' + cy )
}, 750, mina.linear, function() {
    settings.currentRotation = rotateTo;
});

jsbin2

Snap.animate() 接受 2 个初始参数，即起始值和结束值，然后在它们之间进行插值，将其作为 'val' 传递给传入的函数。可以找到该文档 @ 987654324@

这样，您不必关心从以前的变换（存储为矩阵）制作动画，而是控制每个动画循环发生的真实细节。

您可能只需要在每次调用 func 时（而不是仅在完成时）对其进行调整并存储旋转，这取决于如果在按钮完成之前按下按钮，您想要在动画中执行什么操作。