JavaScript:实现精确的动画最终值？

Question

我目前正在尝试编写自己的 JavaScript 库。我正在编写动画回调，但无法获得精确的最终值，特别是当动画持续时间较短时。

现在，我只针对位置动画(左、上、右、下)。当我的动画完成时，对于更快的动画，最终的误差范围为 5px~，对于 1000+ 毫秒或更长的动画，最终误差范围为 0.5px~。这是回调的大部分内容，后面有注释。

var current = parseFloat( this[0].style[prop] || 0 )
    // If our target value is greater than the current
    , gt = !!( value > current )
    , delta = ( Math.abs(current - value) / (duration / 13) ) * (gt ? 1 : -1)
    , elem = this[0]
    , anim = setInterval( function(){
        elem.style[prop] = ( current + delta ) + 'px';
        current = parseFloat( elem.style[prop] );
        if ( gt && current >= value || !gt && current <= value ) clearInterval( anim );
     }, 13 );

this[0] 和 elem 都引用目标 DOM 元素。

prop 引用动画属性，left、top、bottom、right等

current 是 DOM 元素属性的当前值。

value 是动画所需的值。

duration 是动画应持续的指定持续时间(以毫秒为单位)。

13 是 setInterval 延迟(大致应该是所有浏览器的绝对最小值)。

gt 是一个 var，如果 value 超过初始，则为 true 当前，否则为false。

如何解决误差范围？

Answer 1

您可能会遇到舍入错误，最终加起来的值与您预期的不同。您可以看一下一个非常简单的动画库，看看他们用来克服这个问题的方法(以及一些缓动技术)。这是 Thomas Fuchs 的 Emile，大约有 50 行代码:

http://github.com/madrobby/emile/blob/master/emile.js