requestAnimationFrame不能使用低于1的十进制数

Question

requestAnimationFrame 由于某种原因无法使用小数。通常在画布中制作动画时我可以使用小数，但在dom元素的情况下我失败了。正如你在下面看到的，我正在为一个div的左侧位置设置动画，该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提供基数参数。