如何改善动画的移动性能？

Question

So, I built this little interactive roulette:

http://techgoldmine.com/roulette/

I need it to work on mobile as well as desktop. Originally I handled interaction by having the user interact with an SVG circle overlapping the image, however for testing purposes I have removed that.

Currently the animation is carried out using an event with a setInterval function:

        $('.roulette').bind('touchstart', function () {
            if (inMotion == true) {
                cleanUp();
            }
            intervalvar = setInterval(spinWheel, 24);
            // spinWheel();
            $(document).bind('touchend', function () {
                count = Math.abs(force)
                mouseup = 1;
            });
        });

After calculations are carried out, I rotate the roulette with this function:

        function rotate(a) {
            roulette.css({
                '-webkit-transform': 'rotate(' + a + 'deg)',
                '-ms-transform': 'rotate(' + a + 'deg)',
                '-o-transform': 'rotate(' + a + 'deg)',
                '-moz-transform': 'rotate(' + a + 'deg)',
                'transform': 'rotate(' + a + 'deg)'
            });
        }

It works perfectly well within the browser, however when it comes to mobile it lags up very much. Any ideas on how performance may be improved?

Answer 1

Do not use setInterval for the animation. Mobile devices have CSS animations capabilities, use CSS for your animations. However if you really need to do a JS animation use requestAnimationFrame instead of setInterval and sync your frames with the browser refresh.