18

I have an SVG object that I am adding to my page using Raphael. With roughly 175 paths in 6 sets I suspect it counts as complex.

I am animating each of the 6 sets using the .animate function

function anim(direction, duration){
    return Raphael.animation({transform: "r"+direction+"360 250 250"}, duration).repeat("Infinity");
}
IG.sets.white_outer.animate(anim("",100000)); // 2 paths 
IG.sets.grey_outer.animate(anim("-",100000)); // 25 paths
IG.sets.grey_inner.animate(anim("",100000));  // 25 paths

$(window).load(function(){                      
    IG.sets.BLUE.animate({transform: "r0 250 250"}, 4000, ">");  // 32 paths
    IG.sets.RED.animate({transform: "r0 250 250"}, 3000, ">");   // 29 paths
    IG.sets.GREEN.animate({transform: "r0 250 250"}, 2000, ">"); // 24 paths
}

the problem is that in some browsers, this is very choppy looking.

It's smooth as butter on Mac (tested: FF, Chrome, Safari). It's also lovely on Windows in Chrome, but when I load up windows FF, Safari or IE8 the animations are choppy and a bit stuttering.

It even looks great on a an iPad!

I'd love to be able to make them all look great... so I'm trying to figure out what's costing all the power in FF and Safari (and at the end of the day, hopefully whatever override I manage brings up a fix for IE8 as well).

From the other questions I've seen about choppy animation on Raphael, I see mention of "getting into the guts" to add a timeout to the animate function... (as seen in raphael-min.js)

cz= window.requestAnimationFrame||
    window.webkitRequestAnimationFrame||
    window.mozRequestAnimationFrame||
    window.oRequestAnimationFrame||
    window.msRequestAnimationFrame||
    function(a){setTimeout(a,16)}, /* there is a function here that animates */

Though it looks like in FF for example RequestAnimationFrame gives a smoother performance than setTimeout. (I tested this by deleting the mozRequestAnimationFrame condition and reloading, tried various intervals for the timeout)

Is there something else I might be missing that might help improve the cross browser frame rates of my animations?

Note for example image is at its default 500x500 and the rotation is happening around the image center (point 250x250) however the Image is being displayed on page at 1000x1000 (with viewport doing the scaling at page load.

Is it possible that if I have the designer resize the image to a 1000x1000 canvas and I display at full size from the start that I'll have a boost? Maybe a "smoother ride"? I'm not sure what factors effect SVG animation and performance.

Alex C
  • 16,624
  • 18
  • 66
  • 98
  • 2
    I doubt you will get quick hits patching Raphael. Perhaps if you bypass the animation engine. http://jsfiddle.net/qSZ75/ does this work better for you on windows? – methodofaction Oct 01 '12 at 00:20
  • The only other suggestion is to try using TweenMax JS instead of animate, but as that also uses rAF, Im not sure if it will be an improvement or not. – Neil Oct 01 '12 at 08:41
  • @Duopixel that looks really smooth! I'll try that and see. – Alex C Oct 01 '12 at 14:51
  • 1
    @Duopixel That looks really interesting, can you add an answer explaining the basics of what you are doing there in implementing your own animation engine fixed to frames every 2ms (?) and why it helps? – user56reinstatemonica8 Jan 09 '13 at 11:58
  • 5
    It would be great to see a proper answer to this - explaining what it is about the Raphael 2 animation engine that leads to stuttering under some circumstances in some browsers, and roughly under what circumstances it's better to roll your own. I get the impression that Raphael has trouble animating multiple paths at once in some browsers due to each having its own thread, and I think the approach suggested by @Duopixel involves one call for each frame for every animating path or shape of a type, but I could well be wrong. – user56reinstatemonica8 Mar 04 '13 at 14:00
  • 2
    @user568458 To tell you the truth I know about as much as you do in this matter. If you don't need old IE support D3 is much more performant with animations http://stackoverflow.com/questions/8239235/smoothly-animate-attribute-changes-to-3000-raphael-objects-at-once. Let's hope someone with more insight into the inner workings of Raphael can answer this question. – methodofaction Mar 04 '13 at 14:50
  • 1
    @Duopixel - sadly I do need IE support. As I understand it, Raphael in SVG mode and D3 are more or less equivalent - both control SVG shapes using Javascript, and in theory, anything in SVG could be re-written as a patch for SVG-mode Raphael. Do you know anything about how Raphael's approach to animating SVG is different to D3's approach to animating SVG? (I don't mind using a patched version of Raphael that gives clunky, choppy but *functional* animation on VML in <=IE8, and slick, smooth animation for everything else - people stuck on old IE must be used to using an uglier web by now) – user56reinstatemonica8 Mar 05 '13 at 12:32
  • 2
    Did you also pose this question to the Rafael group? (http://groups.google.com/group/raphaeljs, #raphael.js on irc.freenode.net, or filing an issue on https://github.com/DmitryBaranovskiy/raphael) If they come back with an answer that would be worth listing here, too. – Mike 'Pomax' Kamermans Mar 09 '13 at 15:37

1 Answers1

3

You should look into Element.animateWith (http://raphaeljs.com/reference.html#Element.animateWith). It has a feature that lets you sync one animation with another animation so that everything is updated in lock step. The choppiness can't helped if the browser or device is slow, but syncing animations should make it look better.

r2jitu
  • 177
  • 1
  • 4