javascript - 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);

这样旋转将是动画的。

代码笔:https://codepen.io/soentio/pen/POVLYV

---

其他可能的解决方案是利用 css 进行过渡。通过添加以下行:

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

你要确保无论何时旋转一个组(即你的 svg 根节点的直接子节点)，它都会平滑地动画。

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

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

---

奖励:我相信 od css 动画 ( ;-) ) 的优越性，并受到你的代码的启发让你成为一个小代码笔 fiddle 手:https://codepen.io/soentio/pen/YEBgyj也许您的目标仅通过 css 来实现？