Snap.svg
Snap.svg copied to clipboard
Rotation animation goes the long way around at 270 degrees
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.
I have added a JSFiddle to demonstrate this effect: http://jsfiddle.net/qsmzexut/2/
Fixed by downgrading snap.svg to 0.4.1. Apparently this is broken in 0.5.*
Hmmm looks like downgrading to 0.4.1 introduces new rotation animation problems. Looks like I'll have to use another svg library : P
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.
Have you tried 0.5.2 (think thats the dev branch, but a while since I've looked)?
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.
Try https://github.com/adobe-webplatform/Snap.svg/tree/dev
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.