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”传递给传入的函数。可以找到该文档的文档{ {3}}

这样，你不关心以前的变换（存储为矩阵）的动画，你可以控制每个动画循环中发生的真实细节。

您可能只需要调整它并在每次调用func时存储旋转（而不是仅在完成时），具体取决于在动画中期如果按钮在完成之前按下时要执行的操作。

第一次旋转后SnapSVG旋转问题

1 个答案: