Question

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

现在，我只针对位置动画（左，上，右，下）。当我的动画完成时，他们最终会在动画速度更快的情况下获得5px~的误差范围，并且在1000 + ms或更长的动画上获得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，则

true为value，current为false，{{1}}为{{1}} }}

如何解决错误边际？

Answer 1

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

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

Answer 2

除了亚历克斯所说的，你通常最好不要使用基于时间的计算，而不是试图做出不连续的步骤。这样可以确保准确性，并且当浏览器速度不够快，每隔n微秒可靠地回拨一次时，动画就能以合理的速度运行。

function animate(element, prop, period, value) {
    var v0= parseFloat(element.style[prop] || 0); // assume pre-set in px
    var dv= value-v0;
    var t0= new Date().getTime();
    var anim= setInterval(function() {
        var dt= (new Date().getTime()-t0)/period;
        if (dt>=1) {
            dt= 1;
            clearInterval(anim);
        }
        element.style[prop]= v0+dv*dt+'px';
    }, 16);
}

JavaScript：实现精确的动画结束值？

2 个答案: