javascript – SVG旋转元素,同时动画svgjs

我现在正在使用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).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);
  elms[j].instance.animate(6000).rotate(360,0).loop();
}

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

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

最佳答案

接受的答案：

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

其中一个解决方案是更改此行：

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

进入：

elms[j].instance.animate(1000).rotate(Math.random()*360,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实现？

animation animation animation

javascript – SVG旋转元素,同时动画svgjs

相关文章