0

所以，我建立了这个小的交互式轮盘赌：

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

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

4

1 回答 1

0

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

于 2013-04-25T22:16:20.513 回答