requestAnimationFrame 不适用于小于 1 的小数

Question

requestAnimationFrame 由于某些原因不能使用小数。通常在 canvas 中制作动画时我可以使用小数，但在 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()

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

Answer 1

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

使用 parseFloat 应该可以解决问题：https://jsfiddle.net/m1qzqvu8/1/

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

requestAnimationFrame 不适用于小于 1 的小数

requestAnimationFrame not working with decimal numbers below 1

javascript

requestanimationframe