From 0acca6e2dacab1cf1a5c12f48bb0a879aacab6e7 Mon Sep 17 00:00:00 2001 From: Zohaib Sibt-e-Hassan Date: Tue, 26 Apr 2011 22:44:03 +0500 Subject: [PATCH] Introducing the requestAnimationFrame... --- emile.js | 24 +++++++++++++++++++----- emile.min.js | 3 ++- 2 files changed, 21 insertions(+), 6 deletions(-) diff --git a/emile.js b/emile.js index e532aa9..048966d 100644 --- a/emile.js +++ b/emile.js @@ -2,6 +2,7 @@ // Licensed under the terms of the MIT license. (function(emile, container){ + var parseEl = document.createElement('div'), props = ('backgroundColor borderBottomColor borderBottomWidth borderLeftColor borderLeftWidth '+ 'borderRightColor borderRightWidth borderSpacing borderTopColor borderTopWidth bottom color fontSize '+ @@ -32,7 +33,17 @@ css = parseEl.childNodes[0].style; while(i--) if(v = css[props[i]]) rules[props[i]] = parse(v); return rules; - } + } + + // request animation step + var req_frame = window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.oRequestAnimationFrame || + window.msRequestAnimationFrame || + function(callback, element){ + window.setTimeout(callback, 1000 / 60); + }; container[emile] = function(el, style, opts, after){ el = typeof el == 'string' ? document.getElementById(el) : el; @@ -41,11 +52,14 @@ prop, current = {}, start = +new Date, dur = opts.duration||200, finish = start+dur, interval, easing = opts.easing || function(pos){ return (-Math.cos(pos*Math.PI)/2) + 0.5; }; for(prop in target) current[prop] = parse(comp[prop]); - interval = setInterval(function(){ + on_animate = function(){ var time = +new Date, pos = time>finish ? 1 : (time-start)/dur; for(prop in target) el.style[prop] = target[prop].f(current[prop].v,target[prop].v,easing(pos)) + target[prop].u; - if(time>finish) { clearInterval(interval); opts.after && opts.after(); after && setTimeout(after,1); } - },10); + if(time>finish) { opts.after && opts.after(); after && setTimeout(after,1); } + else { req_frame( on_animate, el ); } + }; + + req_frame( on_animate, el ); } -})('emile', this); \ No newline at end of file +})('emile', this); diff --git a/emile.min.js b/emile.min.js index 6408883..1f600df 100644 --- a/emile.min.js +++ b/emile.min.js @@ -1 +1,2 @@ -(function(f,a){var h=document.createElement("div"),g=("backgroundColor borderBottomColor borderBottomWidth borderLeftColor borderLeftWidth borderRightColor borderRightWidth borderSpacing borderTopColor borderTopWidth bottom color fontSize fontWeight height left letterSpacing lineHeight marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth opacity outlineColor outlineOffset outlineWidth paddingBottom paddingLeft paddingRight paddingTop right textIndent top width wordSpacing zIndex").split(" ");function e(j,k,l){return(j+(k-j)*l).toFixed(3)}function i(k,j,l){return k.substr(j,l||1)}function c(l,p,s){var n=2,m,q,o,t=[],k=[];while(m=3,q=arguments[n-1],n--){if(i(q,0)=="r"){q=q.match(/\d+/g);while(m--){t.push(~~q[m])}}else{if(q.length==4){q="#"+i(q,1)+i(q,1)+i(q,2)+i(q,2)+i(q,3)+i(q,3)}while(m--){t.push(parseInt(i(q,1+m*2,2),16))}}}while(m--){o=~~(t[m+3]+(t[m]-t[m+3])*s);k.push(o<0?0:o>255?255:o)}return"rgb("+k.join(",")+")"}function b(l){var k=parseFloat(l),j=l.replace(/^[\-\d\.]+/,"");return isNaN(k)?{v:j,f:c,u:""}:{v:k,f:e,u:j}}function d(m){var l,n={},k=g.length,j;h.innerHTML='
';l=h.childNodes[0].style;while(k--){if(j=l[g[k]]){n[g[k]]=b(j)}}return n}a[f]=function(p,m,j){p=typeof p=="string"?document.getElementById(p):p;j=j||{};var r=d(m),q=p.currentStyle?p.currentStyle:getComputedStyle(p,null),l,s={},n=+new Date,k=j.duration||200,u=n+k,o,t=j.easing||function(v){return(-Math.cos(v*Math.PI)/2)+0.5};for(l in r){s[l]=b(q[l])}o=setInterval(function(){var v=+new Date,w=v>u?1:(v-n)/k;for(l in r){p.style[l]=r[l].f(s[l].v,r[l].v,t(w))+r[l].u}if(v>u){clearInterval(o);j.after&&j.after()}},10)}})("emile",this); \ No newline at end of file +(function(f,a){var h=document.createElement("div"),g=("backgroundColor borderBottomColor borderBottomWidth borderLeftColor borderLeftWidth borderRightColor borderRightWidth borderSpacing borderTopColor borderTopWidth bottom color fontSize fontWeight height left letterSpacing lineHeight marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth opacity outlineColor outlineOffset outlineWidth paddingBottom paddingLeft paddingRight paddingTop right textIndent top width wordSpacing zIndex").split(" ");function e(k,l,m){return(k+(l-k)*m).toFixed(3)}function j(l,k,m){return l.substr(k,m||1)}function c(l,p,s){var n=2,m,q,o,t=[],k=[];while(m=3,q=arguments[n-1],n--){if(j(q,0)=="r"){q=q.match(/\d+/g);while(m--){t.push(~~q[m])}}else{if(q.length==4){q="#"+j(q,1)+j(q,1)+j(q,2)+j(q,2)+j(q,3)+j(q,3)}while(m--){t.push(parseInt(j(q,1+m*2,2),16))}}}while(m--){o=~~(t[m+3]+(t[m]-t[m+3])*s);k.push(o<0?0:o>255?255:o)}return"rgb("+k.join(",")+")"}function b(m){var l=parseFloat(m),k=m.replace(/^[\-\d\.]+/,"");return isNaN(l)?{v:k,f:c,u:""}:{v:l,f:e,u:k}}function d(n){var m,o={},l=g.length,k;h.innerHTML='
';m=h.childNodes[0].style;while(l--){if(k=m[g[l]]){o[g[l]]=b(k)}}return o}var i=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(l,k){window.setTimeout(l,1000/60)};a[f]=function(r,o,k,n){r=typeof r=="string"?document.getElementById(r):r;k=k||{};var t=d(o),s=r.currentStyle?r.currentStyle:getComputedStyle(r,null),m,u={},p=+new Date,l=k.duration||200,w=p+l,q,v=k.easing||function(x){return(-Math.cos(x*Math.PI)/2)+0.5};for(m in t){u[m]=b(s[m])}on_animate=function(){var x=+new Date,y=x>w?1:(x-p)/l;for(m in t){r.style[m]=t[m].f(u[m].v,t[m].v,v(y))+t[m].u}if(x>w){k.after&&k.after();n&&setTimeout(n,1)}else{i(on_animate,r)}};i(on_animate,r)}})("emile",this); +