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 or 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

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

奖金：我相信 css 动画 ( ;-) ) 的优越性，并受到你的代码的启发，使你成为一个小代码笔 fiddle: https://codepen.io/soentio/pen/YEBgyj 也许您的目标仅需 css 即可实现？

SVG 在动画 svgjs 时旋转元素

SVG Rotate Element While Animating svgjs

javascript

jquery

animation

svg

svg.js