代码之家 › 专栏 › 技术社区 › ground5hark

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

core-animation interface animation jquery javascript

ground5hark · 技术社区 · 16 年前

现在,我只针对位置动画(左,上,右,下)。当我的动画完成时,速度更快的动画的误差为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

value 是要设置动画的目标值。

duration 动画应持续的指定持续时间(毫秒)。

13 是 setInterval

gt 是一个 var true 如果 价值 最初的 ,否则就是 false .

如何解决误差?

2 回复 | 直到 16 年前

Alex Sexton 16 年前

您可能会遇到舍入错误,这些错误最终会导致与预期值不同的值。您可以查看一个非常简单的动画库,并了解它们用来克服此问题的方法(以及一些缓解技术)。这是托马斯·福斯的《埃米尔》,大约有50行代码:

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

bobince 16 年前

除了Alex所说的,你通常最好使用基于时间的计算,而不是试图做离散的步骤。这确保了准确性,并允许动画以合理的速度运行,当浏览器的速度不够快,无法可靠地每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);
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前