gpt4 book ai didi

javascript - 如何提高动画的移动性能?

转载 作者:行者123 更新时间:2023-11-28 13:08:14 25 4
gpt4 key购买 nike

所以,我构建了这个小型交互式轮盘赌:

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

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

最佳答案

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

关于javascript - 如何提高动画的移动性能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15731823/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com