如何提高动画的移动性能？答案

【问题标题】：How can I improve my animation's mobile performance?如何提高动画的移动性能？
【发布时间】：2013-03-31 16:43:51
【问题描述】：

所以，我制作了这个小型交互式轮盘赌：

我需要它在移动设备和桌面设备上工作。最初，我通过让用户与与图像重叠的 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)'
            });
        }

它在浏览器中运行良好，但在移动设备上却非常滞后。关于如何提高性能的任何想法？

【问题讨论】：

CSS3 没问题，但我认为使用 HTML5 画布会更好。这应该在移动设备上看起来/感觉更好也。

标签： javascript jquery css physics interaction

【解决方案1】：

不要对动画使用 setInterval。移动设备具有 CSS 动画功能，请使用 CSS 制作动画。但是，如果您确实需要制作 JS 动画，请使用 requestAnimationFrame 而不是 setInterval 并将帧与浏览器刷新同步。

【讨论】：