SVG在动画svgjs时旋转元素

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 根节点的直接子节点）旋转时，它都会平滑地进行动画处理。

代码笔：https://codepen.io/soentio/pen/gXqqNQ

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

---

奖金： 我相信优势 od css 动画 (;-)) 并受到您的代码的启发，使您成为了一个小小的 codepen 小提琴：https://codepen.io/soentio/pen/YEBgyj 也许您的目标只能通过 css 来实现？