Skip to content

Instantly share code, notes, and snippets.

@remy
Created March 30, 2010 12:46
Show Gist options
  • Save remy/349069 to your computer and use it in GitHub Desktop.
Save remy/349069 to your computer and use it in GitHub Desktop.
Early version of XUI native animations with drop back on to Emile/timer based
(function ($, window, undefined) {
var m = document.createElement('i'),
m_style = m.style,
// TODO support other browsers easings - based on Safari's easing options and ported to Emile easing.
stanardEasing = {
'ease-in-out' : function(pos){if((pos/=0.5)<1){return 0.5*Math.pow(pos,4);}return -0.5*((pos-=2)*Math.pow(pos,3)-2);},
'ease-in' : function(pos){return Math.pow(pos,4);},
'ease-out' : function(pos){return Math.pow(pos,0.25);},
'linear': function (i) {return i;}
};
function prep_properties( prop, value, css ) {
var uc_prop = prop.charAt(0).toUpperCase() + prop.substr(1);
if (css === undefined) css = {};
[
prop,
'Webkit' + uc_prop,
'Moz' + uc_prop,
'O' + uc_prop,
'ms' + uc_prop
].forEach(function (item) {
css[item] = value;
});
return css;
}
// taken and simplified from Modernizr - http://modernizr.com
function test_props_all( prop, callback ) {
var uc_prop = prop.charAt(0).toUpperCase() + prop.substr(1),
props = [
prop,
'Webkit' + uc_prop,
'Moz' + uc_prop,
'O' + uc_prop,
'ms' + uc_prop
];
return !!test_props( props, callback );
}
function test_props( props, callback ) {
for ( var i in props ) {
if ( m_style[ props[i] ] !== undefined && ( !callback || callback( props[i] ) ) ) {
return true;
}
}
}
function testTransitions() {
return !!test_props_all('transitionProperty');
}
if ($.support == undefined) $.support = {};
$.support.transitions = testTransitions();
$.fn._tween = $.fn.tween;
$.fn.tween = function(css, options, callback) {
if (typeof options == 'function') {
callback = options;
options = {};
} else if (typeof options == 'number') {
options = { duration: options };
}
if (options.duration === undefined) {
options.duration = 200;
}
if (options.easing === undefined) {
options.easing = 'ease-in';
}
if (options.duration === 0) { // differentiate 0 from null
this.css(css);
if (options.callback) {
window.setTimeout(options.callback, 0);
}
return this;
} else {
return this.each(function () {
var $el = $(this),
transitionCSS = {};
if ($.support.transitions) {
// ? moz equivelent? should we just have a timer to run the callback?
transitionCSS = prep_properties('TransitionProperty', 'all');
transitionCSS = prep_properties('TransitionDuration', options.duration + 'ms', transitionCSS);
transitionCSS = prep_properties('TransitionTimingFunction', options.easing, transitionCSS);
if (options.callback) {
var callback = function (eventType) {
return function () {
options.callback();
this.removeEventListener(eventType, arguments.callee, false);
};
};
// trigger once
for (eventType in prep_properties('TransitionEnd', null)) {
eventType = eventType.replace(/^(.)/, function (m) { return m.toLowerCase(); });
this.addEventListener(eventType, callback(eventType), false);
}
}
$el.css(transitionCSS);
setTimeout(function (el) {
el.css(css);
}, 0, $el);
} else { // use animated tweening
if (options.easing) options.easing = stanardEasing[options.easing];
$el._tween(css, options, options.callback);
}
});
}
};
})(xui, this);
@sintaxi
Copy link

sintaxi commented Apr 1, 2010

would like to see this in action. is there a link I can go to with my phone?

@remy
Copy link
Author

remy commented Apr 4, 2010

To see it in action, see http://marbles2.com - the count down at the bottom is using it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment