diff --git a/src/motio.js b/src/motio.js index 6e8d75f..547082b 100644 --- a/src/motio.js +++ b/src/motio.js @@ -31,6 +31,15 @@ } }()); + // Returns time in as precise manner as possible + var getTime = (function () { + var perf = w.performance; + if (perf && perf.now) return perf.now.bind(perf); + return function () { + return +new Date(); + }; + }()); + /** * Motio. * @@ -51,7 +60,7 @@ var callbacks = {}; var animation = {}; var active = 0; - var pos, bgPos, lastPos, frameID, renderID, i, l; + var pos, bgPos, lastPos, frameID, i, l; // Exposed properties self.element = element; @@ -66,10 +75,9 @@ * @return {Object} Motio instance. */ self.pause = function () { - // frameID can be timeout, or animationFrame ID cAF(frameID); - clearTimeout(frameID); frameID = 0; + animation.lastFrame = 0; if (!self.isPaused) { self.isPaused = true; trigger('pause'); @@ -104,7 +112,7 @@ if (!frameID) { self.isPaused = false; trigger('play'); - requestRender(); + frameID = rAF(render); } } @@ -233,8 +241,14 @@ * @return {Void} */ function render() { - // Reset renderID - renderID = 0; + frameID = rAF(render); + var time = getTime(); + + // Don't render when it's not time for next frame yet + if (o.fps < 60 && animation.lastFrame && animation.lastFrame + (1000 / o.fps) + 1 > time) return; + + animation.lastFrame = time; + positionTick(); // Prepare new background position bgPos = isPan ? Math.round(pos.x) + 'px ' + Math.round(pos.y) + 'px' : frames[active]; @@ -257,29 +271,6 @@ } } - /** - * Render rAF wrapper. - * - * @return {Int} Animation frame index. - */ - function requestRender() { - if (!(animation.finite && animation.to === active)) { - if (animation.immediate) { - frameID = 0; - } else { - if (o.fps >= 60) { - frameID = rAF(requestRender); - } else { - frameID = setTimeout(requestRender, 1000 / o.fps); - } - } - positionTick(); - if (!renderID) { - renderID = rAF(render); - } - } - } - /** * Update one of the dynamic option properties. *