如何改善動畫的移動性能？

Question

因此，我建立了這個互動小輪盤：

http://techgoldmine.com/roulette/

我需要它既可以在移動設備上也可以在台式機上工作。 最初，我通過讓用戶與覆蓋圖像的SVG圈進行交互來處理交互，但是出於測試目的，我已將其刪除。

當前，使用帶有setInterval函數的事件來執行動畫：

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

計算完成后，我使用以下功能旋轉輪盤：

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

它在瀏覽器中可以很好地工作，但是在移動方面卻滯后很多。 關於如何提高性能的任何想法？

Answer 1

不要將setInterval用於動畫。 移動設備具有CSS動畫功能，請將CSS用於動畫。 但是，如果您確實需要執行JS動畫，請使用requestAnimationFrame而不是setInterval並通過瀏覽器刷新來同步幀。