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:当前版本或Bugged版本

简而言之(如果你刚刚跳到最后)我需要旋转一个圆圈而不会完全停止圆圈的动画.我知道,因为在动画暂停时我不能打电话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 动画的优越性（;-)），并受到你的代码的启发，让你在 codepen 上做了一点小提琴： https: //codepen.io/soentio/pen/YEBgyj 也许你的目标只能用 css 来实现？