Snap.svg icon indicating copy to clipboard operation
Snap.svg copied to clipboard

Rotation animation goes the long way around at 270 degrees

Open prismofeverything opened this issue 6 years ago • 8 comments

Hello,

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

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.

prismofeverything avatar Dec 04 '18 18:12 prismofeverything

I have added a JSFiddle to demonstrate this effect: http://jsfiddle.net/qsmzexut/2/

prismofeverything avatar Dec 05 '18 18:12 prismofeverything

Fixed by downgrading snap.svg to 0.4.1. Apparently this is broken in 0.5.*

prismofeverything avatar Dec 06 '18 17:12 prismofeverything

Hmmm looks like downgrading to 0.4.1 introduces new rotation animation problems. Looks like I'll have to use another svg library : P

prismofeverything avatar Dec 10 '18 23:12 prismofeverything

Any update on this one? Seems fairly significant and I'm not sure why no one else has come across this yet. I ask because I just got back around to this and if there is no solution I have to port this project to another svg library.

prismofeverything avatar Jan 08 '19 23:01 prismofeverything

Have you tried 0.5.2 (think thats the dev branch, but a while since I've looked)?

ibrierley avatar Jan 09 '19 07:01 ibrierley

BTW, I also have a jsfiddle demonstrating this problem: http://jsfiddle.net/qsmzexut/2/

Have you tried 0.5.2 (think thats the dev branch, but a while since I've looked)?

I have not, is there a url for that I can add into this jsfiddle? Currently only seeing 0.5.1 as an option for download.

prismofeverything avatar Jan 09 '19 18:01 prismofeverything

Try https://github.com/adobe-webplatform/Snap.svg/tree/dev

ibrierley avatar Jan 09 '19 19:01 ibrierley

Ah yeah, went through there but dist was last updated a year ago.... are you suggesting I should download/build/host the latest dev version somewhere? Sorry I thought perhaps there was a release somewhere, but I can take care of that I guess.

prismofeverything avatar Jan 09 '19 20:01 prismofeverything