Skip to content
Browse files

adding decomposition to matrix animations. It appears to fail for ref…

…lectX, reflectY and reflectXY
  • Loading branch information...
1 parent 44f0b3f commit 47b29f636b48468ec323d7ea01a3e1fe27b70679 @heygrady committed
Showing with 131 additions and 40 deletions.
  1. +54 −0 src/jquery.matrix.js
  2. +76 −18 src/jquery.transform.animate.js
  3. +1 −22 test/_test.html
View
54 src/jquery.matrix.js
@@ -94,6 +94,60 @@
}
return this.elements[(row - 1) * cols + col - 1];
+ },
+
+ /**
+ * Taken from Zoomooz
+ * https://github.com/jaukia/zoomooz/blob/c7a37b9a65a06ba730bd66391bbd6fe8e55d3a49/js/jquery.zoomooz.js
+ */
+ decompose: function() {
+ var a = this.e(1, 1),
+ b = this.e(2, 1),
+ c = this.e(1, 2),
+ d = this.e(2, 2),
+ e = this.e(3, 1),
+ f = this.e(3, 2);
+
+ if (Math.abs(a * d - b * c) < 0.01) {
+ //console.log("fail!");
+ return;
+ }
+
+ var tx = e, ty = f;
+
+ var sx = Math.sqrt(a * a + b * b);
+ a = a/sx;
+ b = b/sx;
+
+ var k = a * c + b * d;
+ c -= a * k;
+ d -= b * k;
+
+ var sy = Math.sqrt(c * c + d * d);
+ c = c / sy;
+ d = d / sy;
+ k = k / sy;
+
+ if ((a * d - b * c) < 0.0) {
+ a = -a;
+ b = -b;
+ c = -c;
+ d = -d;
+ sx = -sx;
+ sy = -sy;
+ }
+
+ var r = $.angle.toDegree(Math.atan2(b, a) + 'rad');
+ k = $.angle.toDegree(Math.atan(k) + 'rad');
+
+ return {
+ rotate: parseFloat(r.toFixed(8)) + 'deg',
+ skewX: parseFloat(k.toFixed(8)) + 'deg',
+ scaleX: parseFloat(sx.toFixed(8)),
+ scaleY: parseFloat(sy.toFixed(8)),
+ translateX: parseFloat(tx.toFixed(8)) + 'px',
+ translateY: parseFloat(ty.toFixed(8)) + 'px'
+ };
}
};
View
94 src/jquery.transform.animate.js
@@ -179,7 +179,57 @@
});
}
};
-
+ $.each(['matrix', 'reflect', 'reflectX', 'reflectXY', 'reflectY'], function(i, func) {
+ $.fx.multipleValueStep[func] = function(fx) {
+ var d = fx.decomposed,
+ $m = $.matrix;
+ m = $m.identity();
+
+ d.now = {};
+
+ // increment each part of the decomposition and recompose it
+ $.each(d.start, function(k) {
+ // skip functions that don't change
+ if (d.start[k] === d.end[k]) {
+ return true;
+ }
+
+ // calculate the current value
+ d.now[k] = parseFloat(d.start[k]) + ((parseFloat(d.end[k]) - parseFloat(d.start[k])) * fx.pos);
+
+ // skip empty functions
+ switch (k) {
+ case 'scaleX': //no break
+ case 'scaleY':
+ if (d.now[k] === 1) {
+ return true;
+ }
+ break;
+ default:
+ if (d.now[k] === 0) {
+ return true;
+ }
+ }
+
+ // calculating
+ m = m.x($m[k](d.now[k]));
+ });
+
+ // save the correct matrix values for now
+ var val;
+ $.each(fx.values, function(i) {
+ switch (i) {
+ case 0: val = m.e(1, 1); break;
+ case 1: val = m.e(1, 2); break;
+ case 2: val = m.e(2, 1); break;
+ case 3: val = m.e(2, 2); break;
+ case 4: val = m.e(3, 1); break;
+ case 5: val = m.e(3, 2); break;
+ }
+ fx.values[i].now = val;
+ });
+ };
+ });
/**
* Step for animating tranformations
*/
@@ -202,30 +252,38 @@
};
});
- // Support Reflection animation
- $.each(['reflect', 'reflectX', 'reflectXY', 'reflectY'], function(i, func) {
- var _step = $.fx.step[func];
+ // Support matrix animation
+ $.each(['matrix', 'reflect', 'reflectX', 'reflectXY', 'reflectY'], function(i, func) {
$.fx.step[func] = function(fx) {
var transform = fx.elem.transform || new $.transform(fx.elem),
funcs = {};
if (!fx.initialized) {
- fx.start =
fx.initialized = true;
- var values = $.matrix[func]().elements;
-
- $.each(fx.values, function(i) {
+
+ // Reflections need a sensible end value set
+ if (func !== 'matrix') {
+ var values = $.matrix[func]().elements;
var val;
- switch (i) {
- case 0: val = values[0]; break;
- case 1: val = values[2]; break;
- case 2: val = values[1]; break;
- case 3: val = values[3]; break;
- default: val = 0;
- }
- fx.values[i].end = val;
- fx.initialized = true;
- });
+ $.each(fx.values, function(i) {
+ switch (i) {
+ case 0: val = values[0]; break;
+ case 1: val = values[2]; break;
+ case 2: val = values[1]; break;
+ case 3: val = values[3]; break;
+ default: val = 0;
+ }
+ fx.values[i].end = val;
+ });
+ }
+
+ // Decompose the start and end
+ fx.decomposed = {};
+ var v = fx.values;
+ fx.decomposed.start = $.matrix.matrix(v[0].start, v[1].start, v[2].start, v[3].start, v[4].start, v[5].start).decompose();
+ fx.decomposed.end = $.matrix.matrix(v[0].end, v[1].end, v[2].end, v[3].end, v[4].end, v[5].end).decompose();
+
+ console.log(fx.decomposed.start, fx.decomposed.end);
}
($.fx.multipleValueStep[fx.prop] || $.fx.multipleValueStep._default)(fx);
View
23 test/_test.html
@@ -46,29 +46,8 @@
<script type="text/javascript">
var $elem = $('.transform');
- $elem.animate({scale : 1.5}, "slow").animate({scale : 1}, "slow");
-
- $('.transform').click(function() {
- var $elem = $(this);
-
- //$elem.animate({reflect: 1});
-
- //return;
- $elem.animate({skew: '30deg'}, {
- complete: function () {
- $elem.animate({skew: [[-30, -30]]}, {
- complete: function () {
- $elem.animate({skew: '60deg, 60'}, {
- complete: function() {
- $elem.animate({skew: [[0]]});
- }
- });
- }
- });
- }
- });
- });
+ $elem.animate({reflect: true},2000);
</script>
</body>

0 comments on commit 47b29f6

Please sign in to comment.
Something went wrong with that request. Please try again.