Skip to content

Instantly share code, notes, and snippets.

@anddoutoi
Created February 13, 2012 15:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anddoutoi/1817697 to your computer and use it in GitHub Desktop.
Save anddoutoi/1817697 to your computer and use it in GitHub Desktop.
Function that tweens element
var tweenWithReAnimator = (function () {
var defaults,
getStyleProperties;
defaults = {
frameRate: 24,// The human eye can only register motion at a rate of approximately 24 frames per second. Faster than that, and the brain just doesn't recognize the difference.
tweenTime: 400
};
getStyleProperties = function ( o ) {
var p,
getCurrentStyle;
for ( p in o ) {
if ( o.hasOwnProperty(p) ) {
o[p] = getCurrentStyle( p );
}
}
};
return function ( keyFrame ) {
var frameRate,// fps
tweenTime,// inbetween time
frameTime,// ms each frame will be visible
numberOfFrames,
i, j,
properties, property,
giefFrameProperties,
frames,
totalTime,
callback;
frameRate = keyFrame.frameRate || defaults.frameRate;
tweenTime = keyFrame.duration || defaults.tweenTime;
frameTime = 1000 / frameRate;
numberOfFrames = tweenTime / frameTime;
console.log(frameRate, frameTime, tweenTime, numberOfFrames);
giefFrameProperties = function ( o ) {
// first time we only return a copy of o and overwrites the function
var p, r = {}, d = {};
for ( p in o ) {
if ( o.hasOwnProperty( p ) ) {
d[p] = o[p].delta;
r[p] = o[p].to;
}
}
giefFrameProperties = function ( o ) {
var p, r = {};
for ( p in o ) {
if ( o.hasOwnProperty( p ) ) {
r[p] = o[p] - d[p];
}
}
return r;
};
return r;
};
properties = keyFrame.properties;
for ( property in properties ) {
if ( properties.hasOwnProperty( property ) ) {
properties[property].delta = (properties[property].to - properties[property].from) / numberOfFrames;
}
}
// craft inbetween frames
var frameProperties = properties;
for ( i = 0, j = numberOfFrames, frames = []; i < j; i++ ) {
frameProperties = giefFrameProperties( frameProperties );
frames.push( frameProperties );
}
frames.reverse();
// hand over frames to the browser and be gone with it
for ( i = 0, j = numberOfFrames; i < j; i++ ) {
totalTime += frameTime;
(function ( i, t ) {
window.setTimeout(function () {
setStyleProperties.call( that, frames[i] );
}, t );
} ( i, totalTime ));
}
callback = tween.callback;
if ( null != callback && 'function' == typeof callback ) {
window.setTimeout(function () {
callback();
}, totalTime );
}
};
} ());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment