Question

我现在正在使用Javascript，Jquery，SVG和SVG.js。我想在它动画时围绕它的原点旋转一个圆圈。动画做同样的事情，所以我可以使用某种步进功能，但我找不到任何东西。问题是，使用我当前的解决方案，动画很简陋，它必须停止动画，旋转圆圈，然后再次启动它。这依次具有太多的延迟并导致摆动运动。这是设置代码：

var draw = SVG('svg');
var innerCircle = draw.group().addClass("atom0g0").move(100,100);
innerCircle.circle(100).addClass("atom0p0").center(0, 0).attr({ fill: "white", stroke: "blue", "stroke-dasharray": "10" });
innerCircle.animate(6000).rotate(360, 0, 0).loop();

现在正在执行的代码，我需要更改为某些内容：

var elms = $(".atom"+atom.atom_id.toString()+"g0");
for (var j=0; j < elms.length; j++) {
  // this is the problem, too much of a delay, therefore causing a wiggle motion.
  elms[j].instance.animate().stop();
  elms[j].instance.rotate(step, 0, 0);
  elms[j].instance.animate(6000).rotate(360, 0, 0).loop();
}

以下是我正在制作的CodePen：Current Version或Bugged Version

简而言之（如果你刚刚跳到最后）我需要旋转一个圆圈而不会完全停止圆圈的动画。我知道play()，pause()不起作用，因为在动画暂停时我无法调用rotate()。

Answer 1

接受的答案：

尝试用另外一个元素包装元素并单独为它们设置动画。

其中一个解决方案是改变这一行：

elms[j].instance.rotate(Math.random()*360, 0, 0);

进入那个：

elms[j].instance.animate(1000).rotate(Math.random()*360, 0, 0);

这样就可以动画旋转。

Codepen：https://codepen.io/soentio/pen/POVLYV

我可以使用css进行转换的其他可能解决方案。通过添加以下行：

#svg > g {
    transition: transform 1s ease-in-out;
}

你确保每当一个组（你的svg根节点的直接子节点）被旋转时，它就会被平滑地动画化。

CodePen：https://codepen.io/soentio/pen/gXqqNQ

这种方法的优点在于，无论您的轮换是什么，浏览器都会选择最短的路径。

加成：我相信od css动画（;-)）的优越性，并且受到你的代码的启发，使你成为一个小小的代码小提琴：https://codepen.io/soentio/pen/YEBgyj 也许你的目标只能用css来实现？

SVG旋转元素，同时动画svgjs

1 个答案: