3

I'm having an issue with snap.svg where whenever I animate a rotation between 269 and 270 degrees the whole thing spins around the entire circle instead of advancing a single degree. Here is a minimal code snippet that recreates the problem:

function testRotation() {
  var draw = Snap('#test');
  var box = draw.rect(0, 0, 100, 161.5);
  var rotation = 268;
  var increment = 1;
  var transform = 't200,200r'+rotation+',50,80.75';
  console.log(transform)
  box.attr({
    fill: '#000000',
    transform: transform});

  function rotate() {
    if (rotation > 271) increment = -1;
    if (rotation < 269) increment = 1;
    rotation += increment;
    var transform = 't200,200r'+rotation+',50,80.75';
    console.log(rotation);
    box.animate({transform: transform}, 1000);
    setTimeout(rotate, 1000);
  }

  setTimeout(rotate, 1000)
}

Here is a JSFiddle version where you can see it in action: http://jsfiddle.net/qsmzexut/2/

It starts at 268 degrees and then every second it increases the angle by one degree. When it passes from 269 to 270 it goes all the way around. When it gets up to 272 it goes back down, then back up etc. As you can see this behavior is present in both directions.

Any way to avoid this behavior? I would love to be able to rotate a single degree and not have it swing around the entire circle! Thanks.

dcorking
  • 1,146
  • 1
  • 14
  • 24
prismofeverything
  • 8,799
  • 8
  • 38
  • 53
  • You can still use JSFiddle. You just need to add a link to Snap in the Resources section. [Like this](http://jsfiddle.net/qsmzexut/) – Paul LeBeau Dec 04 '18 at 21:16
  • Ah okay, thanks! Got the fiddle working now: http://jsfiddle.net/qsmzexut/2/ – prismofeverything Dec 05 '18 at 18:26
  • @prismofeverything I'm not sure I understand the behavior your looking for. Are you attempting to make the rect oscillate back and forth between the angles of 268 and 272? Like a jitter affect? – kyler Jan 15 '19 at 22:32
  • @flybear Rotating between 268 and 272 is just a demonstration of the failure. It should rotate smoothly one degree at a time, but instead it rotates entirely around when passing from 269 to 270. – prismofeverything Jan 16 '19 at 04:16

1 Answers1

0

in order to move it a bit each time - rotation = rotation - increment;

MorLavender
  • 106
  • 1
  • 8
  • Hey @MorLavender, I am already doing `rotation += increment`, which when increment is 1 or -1 is equivalent to your suggestion. Did you mean something beyond this? – prismofeverything Dec 05 '18 at 18:53
  • here you are using "+=" operator with negative value (as -1) I think that's what makes the difference. ''m adding the solution in the js fiddle - is that what you are trying to get? http://jsfiddle.net/qsmzexut/6/ – MorLavender Dec 06 '18 at 22:21
  • No, you are not rotating over the 270 degree mark. If you wait long enough you will see the behavior with your fiddle : ) – prismofeverything Jan 08 '19 at 23:34