JavaScript：實現精確的動畫結束值？

我目前正在嘗試編寫自己的JavaScript庫。我正在編寫動畫回調函數，但我無法獲得精確的結束值，尤其是當動畫持續時間較短時。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。

我該如何解決誤差？

來源

2010-04-19 ground5hark

您可能會遇到四捨五入錯誤，最終會加上一個與您預期不同的值。你可以看看一個非常簡單的動畫庫，看看它們用來克服這個問題的方法（以及一些緩解技術）。這裏是托馬斯·富克斯埃米爾大約是50行代碼：

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

來源

2010-04-19 17:07:02

除了亞歷克斯說，你平時最好使用基於時間的計算，而不是試圖讓離散的步驟。這確保了準確性，並且在瀏覽器速度不足以每隔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); 
}

來源

2010-04-19 18:14:14 bobince

JavaScript：實現精確的動畫結束值？

回答

相關問題