JavaScript: Achieving precise animation end values?
- by bobthabuilda
I'm currently trying to write my own JavaScript library. I'm in the middle of writing an animation callback, but I'm having trouble getting precise end values, especially when animation duration times are smaller.
Right now, I'm only targeting positional animation (left, top, right, bottom). When my animations complete, they end up having an error margin of 5px~ on faster animations, and 0.5px~ on animations 1000+ ms or greater. Here's the bulk of the callback, with notes following.
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] and elem both reference the target DOM element.
prop references the property to animate, left, top, bottom, right, etc.
current is the current value of the DOM element's property.
value is the desired value to animate to.
duration is the specified duration (in ms) that the animation should last.
13 is the setInterval delay (which should roughly be the absolute minimal for all browsers).
gt is a var that is true if value exceeds the initial current, else it is false.
How can I resolve the error margin?
