5

I'm using Javascript, Jquery, SVG, and SVG.js right now. I would like to rotate a circle about its origin while it's animating. The animation is doing the same thing, so I could use some sort of step function but I couldn't find anything. The problem is that with my current solution the animation is janky, it has to stop the animation, rotate the circle, and then start it again. Which in sequence has too much of a delay and causes a wiggling motion. Here's the setup code:

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

And the executing code right now, which I need to change to something is here:

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();
}

Here's the CodePen that I'm working on right now to make it: Current Version or Bugged Version

In short (if you just skipped to the end here) I need to rotate a circle without stopping the animation of the circle completely. I know that play(), pause() doesn't work because I can't call rotate() while the animations paused.

Preston Hager
  • 1,514
  • 18
  • 33
  • 2
    You can describe your question in a better way if you add a CodePen example which includes HTML, CSS & JS so that people can answer quickly. – Bhavesh B Nov 28 '17 at 10:33
  • @BhaveshB I added the CodePen link for you, thanks. – Preston Hager Nov 29 '17 at 16:28
  • I still need some clarification, do you want the red ball to rotate around the black while its path is rotating as well, or do you want the red ball to rotate around the black while also rotating around itself? – U Rogel Dec 02 '17 at 08:10
  • 1
    Your CodePen isn't working at least in Chrome and Firefox where I tested it. Please provide a working CodePen then someone might be able to help you. – Hexodus Dec 02 '17 at 13:36
  • It might not have been animating, I accedently commented out that line whilst working on it a while ago. It works in Chrome fine for me. Try this, https://codepen.io/Piist300/pen/LOqvZo – Preston Hager Dec 03 '17 at 21:00
  • Is there a video or a GIF that could describe how you are expecting the animation to be? – Nandu Kalidindi Dec 03 '17 at 21:11

1 Answers1

3

Accepted answer:

Try to wrap your element with one more element and animate them separately.

One of the solutions is to change this line:

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

into that:

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

This way rotation will be animated.

Codepen: https://codepen.io/soentio/pen/POVLYV

Other of the possible solutions i to utilise css for your transitions. By adding following line:

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

you make sure that whenever a group (that is direct children of your svg root node) is rotated, it's gonna be animated smoothly.

CodePen: https://codepen.io/soentio/pen/gXqqNQ

Advantage of this approach is that whatever your rotation is, browser picks the shortest path.

Bonus: I believe in superiority od css animations ( ;-) ) and inspired by your code made you a little codepen fiddle: https://codepen.io/soentio/pen/YEBgyj Maybe your goals are to be achieved with css only?

entio
  • 3,816
  • 1
  • 24
  • 39
  • These are interesting, but unfortunately they don't solve my problem. The problem is that when I try to stop the animation via `animate().stop();` it takes a few seconds to stop the animation and a little more to rotate it and play the animation again. And I know that the play, pause won't work because the rotate doesn't work on a paused animation. So I need to find a way to rotate the circle without stopping the animation completely. – Preston Hager Dec 03 '17 at 20:56
  • 1
    @PrestonHager can't you solve it by adding some container and animating it separately from the inner content? – entio Dec 03 '17 at 21:10
  • That is such a simple solution and it works. Why didn't I think of that? Thank you so much! I had been trying to come up with a solution for 3 days before I posted the question to here, and it was that simple all along! Thanks again. – Preston Hager Dec 03 '17 at 21:40