Question

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

我需要它在移动设备和桌面设备上工作。最初我通过让用户与重叠图像的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，并使用浏览器刷新同步你的帧。

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

1 个答案: