Permalink
Browse files

Animation complete for Moz, WebKit and O. Funtional for MSIE, origin …

…is not transforming correctly.
  • Loading branch information...
unknown
unknown committed May 16, 2010
1 parent 2414182 commit d8ebb2b4fde90facfab4d5330943f5fae81f6d18
Showing with 104 additions and 52 deletions.
  1. +17 −6 animate.html
  2. +87 −46 lib/transform.js
View
@@ -129,14 +129,25 @@ <h3>Forced top, left origin</h3>
<script type="text/javascript">
var thing = $('.transform').transform();
thing.click(function() {
- $(this).animate({skew: '21 21'});
- });
+ $(this).animate({
+ skew: '+=180deg +=180', //you don't have to use units
+ skewX: '+=5',
+ skewY: '+=5',
+ rotate: '+=360deg',
+ scale: '+=.1 +=.1',
+ scaleX: '+=.05',
+ scaleY: '+=.05',
+ translate: '+=10px -=10px',
+ translateX: '-=1',
+ translateY: '-=1'
+ }, 1500);
+ }).mouseenter(shake);
- function sproing() {
+ function shake() {
var thing = $(this);
- thing.animate({rotate: '5', skewX: '-5'}, 'fast', 'easeOutBack', function() {
- thing.animate({rotate: '-5', skewX: '5'}, 'fast', 'easeOutBack', function() {
- thing.animate({rotate: '0', skewX: '0'}, 'slow', 'easeOutElastic');
+ thing.animate({rotate: '+=2.5', skew: '-=2.5'}, 100, 'easeOutBack', function() {
+ thing.animate({rotate: '-=5', skew: '+=5'}, 200, 'easeOutBack', function() {
+ thing.animate({rotate: '+=2.5', skew: '-=2.5'}, 200, 'easeOutElastic');
});
});
}
View
@@ -79,35 +79,78 @@
});
};
- // Extend the jQuery animation to handle transform function
+ // Extend the jQuery animation to handle transform functions
+ /**
+ * Doctors prop values in the event that they contain spaces
+ * @param Object prop
+ * @param String speed
+ * @param String easing
+ * @param Function callback
+ * @return bool
+ */
var _animate = $.fn.animate;
$.fn.animate = function( prop, speed, easing, callback ) {
- var style = this[0].style;
- jQuery.each( prop, function( name, val ) {
- // clean up the numbers for multivalue properties we care about
- if ($.inArray(transformFuncs, name)) {
- console.log(style[name] === undefined);
- }
- });
+ if (prop && !jQuery.isEmptyObject(prop)) {
+ var element = this[0];
+ jQuery.each( prop, function( name, val ) {
+ // Clean up the numbers for space-sperated prop values
+ if ($.inArray(transformFuncs, name)) {
+ var parts = rfxnum.exec(val);
+ if (parts) {
+ var end = parseFloat( parts[2] ),
+ unit = parts[3] || "px",
+ values = [];
+
+ // Remember the first value
+ values.push({
+ end: (parts[1] ? parts[1] : '') + end,
+ unit: unit
+ });
+
+ // Detect additional values hidden in the unit
+ var i = 0;
+ while (parts = rfxmultinum.exec(unit)) {
+ // Fix the previous unit
+ values[i].unit = parts[1];
+
+ // Remember this value
+ values.push({
+ end: (parts[2] ? parts[2] : '') + parseFloat(parts[3]),
+ unit: parts[4]
+ });
+ unit = parts[4];
+ i++;
+ }
+
+ // Save the values and truncate the property
+ element['data-animate-' + name] = values;
+ prop[name] = values[0].end;
+ }
+ }
+ });
+ }
return _animate.apply(this, arguments);
}
/**
- * Detects the existence of a space separated value
+ * Returns appropriate start value for transform props
* @param Boolean force
- * @return null
+ * @return Number
*/
var _cur = $.fx.prototype.cur;
$.fx.prototype.cur = function(force) {
if ($.inArray(transformFuncs, this.prop)) {
- var value = this.elem[this.prop];
+ // Transform saves the previous values on the element itself, space-seperated and without units
+ var value = this.elem[this.prop];
if (rfxmultinum.test(value)) {
value = value.split(/\s/)[0];
}
+
+ // Scale needs to have 1 as the default, all others take 0;
if (!value && value !== 0) {
value = unitless.test(this.prop) ? 1 : 0;
}
- return parseFloat(value);
+ return parseFloat(value); // return only the first value
}
return _cur.apply(this, arguments);
}
@@ -120,37 +163,38 @@
$.fx.multivalueInit = function(fx) {
var parts,
unit = fx.unit,
- i = 0,
- values = fx.transform.getAttribute(fx.prop, true);
+ values = fx.transform.getAttribute(fx.prop, true),
+ initValues = fx.elem['data-animate-' + fx.prop];
- // Save the known value
fx.values = [];
- fx.values.push({
- start: fx.start,
- end: fx.end,
- unit: fx.unit
- });
- // Detect additional values hidden in the unit
- while (parts = rfxmultinum.exec(unit)) {
- // fix the previous unit
- fx.values[fx.values.length - 1].unit = parts[1];
- var start = values[i];
- if (unitless.test(fx.prop) && !start && start !== 0) {
- start = 1;
- } else if (!start && start !== 0) {
- start = 0;
- }
+ // Handle the additional values if they exist
+ if (initValues) {
+ var start, parts;
+ $.each(initValues, function(i, val) {
+ start = values[i];
+ if (!start && start !== 0) {
+ start = unitless.test(fx.prop) ? 1 : 0;
+ }
+ start = parseFloat(start);
+ if (parts = rfxnum.exec(val.end)) {
+ if (parts[1]) {
+ val.end = ((parts[1] === "-=" ? -1 : 1) * parseFloat(parts[2])) + start;
+ }
+ }
+ fx.values.push({
+ start: start,
+ end: val.end,
+ unit: val.unit
+ });
+ });
+ } else {
+ // Save the known value
fx.values.push({
- start: parseFloat(start),
- end: parseFloat(parts[3]),
- unit: parts[4]
+ start: fx.start,
+ end: fx.end,
+ unit: fx.unit
});
- if (parts[2]) {
- var value = fx.values[fx.values.length - 1];
- value.end = ((parts[2] === "-=" ? -1 : 1) * value.end) + value.start;
- }
- unit = parts[4];
}
}
@@ -161,8 +205,8 @@
*/
$.fx.multivalueStep = {
_default: function(fx) {
- $.each(fx.values, function(i, value) {
- fx.values[i].now = value.start + ((value.end - value.start) * fx.pos);
+ $.each(fx.values, function(i, val) {
+ fx.values[i].now = val.start + ((val.end - val.start) * fx.pos);
});
}
};
@@ -171,7 +215,6 @@
$.fx.step[attr] = function(fx) {
// Initialize the transformation
if (!fx.transformInit) {
- console.log(fx.options.curAnim);
fx.transform = new Transform(fx.elem);
// Correct for start being NaN
@@ -180,10 +223,6 @@
if ($.isArray(fx.start)) {
fx.start = fx.start[0];
}
- //var end = fx.end;
- //if (/\s/.test(fx.end)) {
- // end = fx.end.split(/\s/)[0];
- //}
fx.now = fx.start + ((fx.end - fx.start) * fx.pos);
}
@@ -204,8 +243,10 @@
$.each(fx.values, function(i) {fx.values[i].unit = fx.unit});
fx.transformInit = true;
+
+ // if start and end are the same that skip this whole mess
if (fx.start == fx.end) {
- fx.step(true);
+ return fx.step(true);
}
}

0 comments on commit d8ebb2b

Please sign in to comment.