请求动画帧不适用于小于 1 的十进制数

requestAnimationFrame not working with decimal numbers below 1

本文关键字：十进制数 小于 适用于 动画 不适用 请求      更新时间：2023-09-26

requestAnimationFrame由于某种原因不适用于小数。通常在画布上制作动画时，我可以使用小数，但在 dom 元素的情况下，我会失败。正如您在下面看到的，我正在对单个div 的左侧位置进行动画处理，该位置适用于 n> 1，但不适用于 n <1（0.1、0.2 等）。

为什么会这样呢？

https://jsfiddle.net/m1qzqvu8

var elem = document.getElementsByTagName('div')[0]
function fn(){
var x = parseInt(elem.style.left);
x += 0.4
elem.style.left = x + "px"
    requestAnimationFrame(fn)
}
fn()

我试图完成这项工作的原因是速度。我需要让事情变慢或更快。

您正在使用parseInt .这会将十进制值舍入为整数，因此您总是会得到parseInt(10.4) + 0.4 = 10 + 0.4 = 10.4，无休止地迭代。

使用 parseFloat 应该可以纠正此问题：https://jsfiddle.net/m1qzqvu8/1/

注意：您应该始终提供基数参数以parseInt 。

相关文章：