jquery.transform2d.js 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552
  1. /*
  2. * transform: A jQuery cssHooks adding cross-browser 2d transform capabilities to $.fn.css() and $.fn.animate()
  3. *
  4. * limitations:
  5. * - requires jQuery 1.4.3+
  6. * - Should you use the *translate* property, then your elements need to be absolutely positionned in a relatively positionned wrapper **or it will fail in IE678**.
  7. * - transformOrigin is not accessible
  8. *
  9. * latest version and complete README available on Github:
  10. * https://github.com/louisremi/jquery.transform.js
  11. *
  12. * Copyright 2011 @louis_remi
  13. * Licensed under the MIT license.
  14. *
  15. * This saved you an hour of work?
  16. * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON
  17. *
  18. */
  19. (function( $, window, document, Math, undefined ) {
  20. /*
  21. * Feature tests and global variables
  22. */
  23. var div = document.createElement("div"),
  24. divStyle = div.style,
  25. suffix = "Transform",
  26. testProperties = [
  27. "O" + suffix,
  28. "ms" + suffix,
  29. "Webkit" + suffix,
  30. "Moz" + suffix
  31. ],
  32. i = testProperties.length,
  33. supportProperty,
  34. supportMatrixFilter,
  35. supportFloat32Array = "Float32Array" in window,
  36. propertyHook,
  37. propertyGet,
  38. rMatrix = /Matrix([^)]*)/,
  39. rAffine = /^\s*matrix\(\s*1\s*,\s*0\s*,\s*0\s*,\s*1\s*(?:,\s*0(?:px)?\s*){2}\)\s*$/,
  40. _transform = "transform",
  41. _transformOrigin = "transformOrigin",
  42. _translate = "translate",
  43. _rotate = "rotate",
  44. _scale = "scale",
  45. _skew = "skew",
  46. _matrix = "matrix";
  47. // test different vendor prefixes of these properties
  48. while ( i-- ) {
  49. if ( testProperties[i] in divStyle ) {
  50. $.support[_transform] = supportProperty = testProperties[i];
  51. $.support[_transformOrigin] = supportProperty + "Origin";
  52. continue;
  53. }
  54. }
  55. // IE678 alternative
  56. if ( !supportProperty ) {
  57. $.support.matrixFilter = supportMatrixFilter = divStyle.filter === "";
  58. }
  59. // px isn't the default unit of these properties
  60. $.cssNumber[_transform] = $.cssNumber[_transformOrigin] = true;
  61. /*
  62. * fn.css() hooks
  63. */
  64. if ( supportProperty && supportProperty != _transform ) {
  65. // Modern browsers can use jQuery.cssProps as a basic hook
  66. $.cssProps[_transform] = supportProperty;
  67. $.cssProps[_transformOrigin] = supportProperty + "Origin";
  68. // Firefox needs a complete hook because it stuffs matrix with "px"
  69. if ( supportProperty == "Moz" + suffix ) {
  70. propertyHook = {
  71. get: function( elem, computed ) {
  72. return (computed ?
  73. // remove "px" from the computed matrix
  74. $.css( elem, supportProperty ).split("px").join(""):
  75. elem.style[supportProperty]
  76. );
  77. },
  78. set: function( elem, value ) {
  79. // add "px" to matrices
  80. elem.style[supportProperty] = /matrix\([^)p]*\)/.test(value) ?
  81. value.replace(/matrix((?:[^,]*,){4})([^,]*),([^)]*)/, _matrix+"$1$2px,$3px"):
  82. value;
  83. }
  84. };
  85. /* Fix two jQuery bugs still present in 1.5.1
  86. * - rupper is incompatible with IE9, see http://jqbug.com/8346
  87. * - jQuery.css is not really jQuery.cssProps aware, see http://jqbug.com/8402
  88. */
  89. } else if ( /^1\.[0-5](?:\.|$)/.test($.fn.jquery) ) {
  90. propertyHook = {
  91. get: function( elem, computed ) {
  92. return (computed ?
  93. $.css( elem, supportProperty.replace(/^ms/, "Ms") ):
  94. elem.style[supportProperty]
  95. );
  96. }
  97. };
  98. }
  99. /* TODO: leverage hardware acceleration of 3d transform in Webkit only
  100. else if ( supportProperty == "Webkit" + suffix && support3dTransform ) {
  101. propertyHook = {
  102. set: function( elem, value ) {
  103. elem.style[supportProperty] =
  104. value.replace();
  105. }
  106. }
  107. }*/
  108. } else if ( supportMatrixFilter ) {
  109. propertyHook = {
  110. get: function( elem, computed, asArray ) {
  111. var elemStyle = ( computed && elem.currentStyle ? elem.currentStyle : elem.style ),
  112. matrix, data;
  113. if ( elemStyle && rMatrix.test( elemStyle.filter ) ) {
  114. matrix = RegExp.$1.split(",");
  115. matrix = [
  116. matrix[0].split("=")[1],
  117. matrix[2].split("=")[1],
  118. matrix[1].split("=")[1],
  119. matrix[3].split("=")[1]
  120. ];
  121. } else {
  122. matrix = [1,0,0,1];
  123. }
  124. if ( ! $.cssHooks[_transformOrigin] ) {
  125. matrix[4] = elemStyle ? parseInt(elemStyle.left, 10) || 0 : 0;
  126. matrix[5] = elemStyle ? parseInt(elemStyle.top, 10) || 0 : 0;
  127. } else {
  128. data = $._data( elem, "transformTranslate", undefined );
  129. matrix[4] = data ? data[0] : 0;
  130. matrix[5] = data ? data[1] : 0;
  131. }
  132. return asArray ? matrix : _matrix+"(" + matrix + ")";
  133. },
  134. set: function( elem, value, animate ) {
  135. var elemStyle = elem.style,
  136. currentStyle,
  137. Matrix,
  138. filter,
  139. centerOrigin;
  140. if ( !animate ) {
  141. elemStyle.zoom = 1;
  142. }
  143. value = matrix(value);
  144. // rotate, scale and skew
  145. Matrix = [
  146. "Matrix("+
  147. "M11="+value[0],
  148. "M12="+value[2],
  149. "M21="+value[1],
  150. "M22="+value[3],
  151. "SizingMethod='auto expand'"
  152. ].join();
  153. filter = ( currentStyle = elem.currentStyle ) && currentStyle.filter || elemStyle.filter || "";
  154. elemStyle.filter = rMatrix.test(filter) ?
  155. filter.replace(rMatrix, Matrix) :
  156. filter + " progid:DXImageTransform.Microsoft." + Matrix + ")";
  157. if ( ! $.cssHooks[_transformOrigin] ) {
  158. // center the transform origin, from pbakaus's Transformie http://github.com/pbakaus/transformie
  159. if ( (centerOrigin = $.transform.centerOrigin) ) {
  160. elemStyle[centerOrigin == "margin" ? "marginLeft" : "left"] = -(elem.offsetWidth/2) + (elem.clientWidth/2) + "px";
  161. elemStyle[centerOrigin == "margin" ? "marginTop" : "top"] = -(elem.offsetHeight/2) + (elem.clientHeight/2) + "px";
  162. }
  163. // translate
  164. // We assume that the elements are absolute positionned inside a relative positionned wrapper
  165. elemStyle.left = value[4] + "px";
  166. elemStyle.top = value[5] + "px";
  167. } else {
  168. $.cssHooks[_transformOrigin].set( elem, value );
  169. }
  170. }
  171. };
  172. }
  173. // populate jQuery.cssHooks with the appropriate hook if necessary
  174. if ( propertyHook ) {
  175. $.cssHooks[_transform] = propertyHook;
  176. }
  177. // we need a unique setter for the animation logic
  178. propertyGet = propertyHook && propertyHook.get || $.css;
  179. /*
  180. * fn.animate() hooks
  181. */
  182. $.fx.step.transform = function( fx ) {
  183. var elem = fx.elem,
  184. start = fx.start,
  185. end = fx.end,
  186. pos = fx.pos,
  187. transform = "",
  188. precision = 1E5,
  189. i, startVal, endVal, unit;
  190. // fx.end and fx.start need to be converted to interpolation lists
  191. if ( !start || typeof start === "string" ) {
  192. // the following block can be commented out with jQuery 1.5.1+, see #7912
  193. if ( !start ) {
  194. start = propertyGet( elem, supportProperty );
  195. }
  196. // force layout only once per animation
  197. if ( supportMatrixFilter ) {
  198. elem.style.zoom = 1;
  199. }
  200. // replace "+=" in relative animations (-= is meaningless with transforms)
  201. end = end.split("+=").join(start);
  202. // parse both transform to generate interpolation list of same length
  203. $.extend( fx, interpolationList( start, end ) );
  204. start = fx.start;
  205. end = fx.end;
  206. }
  207. i = start.length;
  208. // interpolate functions of the list one by one
  209. while ( i-- ) {
  210. startVal = start[i];
  211. endVal = end[i];
  212. unit = +false;
  213. switch ( startVal[0] ) {
  214. case _translate:
  215. unit = "px";
  216. case _scale:
  217. unit || ( unit = "");
  218. transform = startVal[0] + "(" +
  219. Math.round( (startVal[1][0] + (endVal[1][0] - startVal[1][0]) * pos) * precision ) / precision + unit +","+
  220. Math.round( (startVal[1][1] + (endVal[1][1] - startVal[1][1]) * pos) * precision ) / precision + unit + ")"+
  221. transform;
  222. break;
  223. case _skew + "X":
  224. case _skew + "Y":
  225. case _rotate:
  226. transform = startVal[0] + "(" +
  227. Math.round( (startVal[1] + (endVal[1] - startVal[1]) * pos) * precision ) / precision +"rad)"+
  228. transform;
  229. break;
  230. }
  231. }
  232. fx.origin && ( transform = fx.origin + transform );
  233. propertyHook && propertyHook.set ?
  234. propertyHook.set( elem, transform, +true ):
  235. elem.style[supportProperty] = transform;
  236. };
  237. /*
  238. * Utility functions
  239. */
  240. // turns a transform string into its "matrix(A,B,C,D,X,Y)" form (as an array, though)
  241. function matrix( transform ) {
  242. transform = transform.split(")");
  243. var
  244. trim = $.trim
  245. , i = -1
  246. // last element of the array is an empty string, get rid of it
  247. , l = transform.length -1
  248. , split, prop, val
  249. , prev = supportFloat32Array ? new Float32Array(6) : []
  250. , curr = supportFloat32Array ? new Float32Array(6) : []
  251. , rslt = supportFloat32Array ? new Float32Array(6) : [1,0,0,1,0,0]
  252. ;
  253. prev[0] = prev[3] = rslt[0] = rslt[3] = 1;
  254. prev[1] = prev[2] = prev[4] = prev[5] = 0;
  255. // Loop through the transform properties, parse and multiply them
  256. while ( ++i < l ) {
  257. split = transform[i].split("(");
  258. prop = trim(split[0]);
  259. val = split[1];
  260. curr[0] = curr[3] = 1;
  261. curr[1] = curr[2] = curr[4] = curr[5] = 0;
  262. switch (prop) {
  263. case _translate+"X":
  264. curr[4] = parseInt(val, 10);
  265. break;
  266. case _translate+"Y":
  267. curr[5] = parseInt(val, 10);
  268. break;
  269. case _translate:
  270. val = val.split(",");
  271. curr[4] = parseInt(val[0], 10);
  272. curr[5] = parseInt(val[1] || 0, 10);
  273. break;
  274. case _rotate:
  275. val = toRadian(val);
  276. curr[0] = Math.cos(val);
  277. curr[1] = Math.sin(val);
  278. curr[2] = -Math.sin(val);
  279. curr[3] = Math.cos(val);
  280. break;
  281. case _scale+"X":
  282. curr[0] = +val;
  283. break;
  284. case _scale+"Y":
  285. curr[3] = val;
  286. break;
  287. case _scale:
  288. val = val.split(",");
  289. curr[0] = val[0];
  290. curr[3] = val.length>1 ? val[1] : val[0];
  291. break;
  292. case _skew+"X":
  293. curr[2] = Math.tan(toRadian(val));
  294. break;
  295. case _skew+"Y":
  296. curr[1] = Math.tan(toRadian(val));
  297. break;
  298. case _matrix:
  299. val = val.split(",");
  300. curr[0] = val[0];
  301. curr[1] = val[1];
  302. curr[2] = val[2];
  303. curr[3] = val[3];
  304. curr[4] = parseInt(val[4], 10);
  305. curr[5] = parseInt(val[5], 10);
  306. break;
  307. }
  308. // Matrix product (array in column-major order)
  309. rslt[0] = prev[0] * curr[0] + prev[2] * curr[1];
  310. rslt[1] = prev[1] * curr[0] + prev[3] * curr[1];
  311. rslt[2] = prev[0] * curr[2] + prev[2] * curr[3];
  312. rslt[3] = prev[1] * curr[2] + prev[3] * curr[3];
  313. rslt[4] = prev[0] * curr[4] + prev[2] * curr[5] + prev[4];
  314. rslt[5] = prev[1] * curr[4] + prev[3] * curr[5] + prev[5];
  315. prev = [rslt[0],rslt[1],rslt[2],rslt[3],rslt[4],rslt[5]];
  316. }
  317. return rslt;
  318. }
  319. // turns a matrix into its rotate, scale and skew components
  320. // algorithm from http://hg.mozilla.org/mozilla-central/file/7cb3e9795d04/layout/style/nsStyleAnimation.cpp
  321. function unmatrix(matrix) {
  322. var
  323. scaleX
  324. , scaleY
  325. , skew
  326. , A = matrix[0]
  327. , B = matrix[1]
  328. , C = matrix[2]
  329. , D = matrix[3]
  330. ;
  331. // Make sure matrix is not singular
  332. if ( A * D - B * C ) {
  333. // step (3)
  334. scaleX = Math.sqrt( A * A + B * B );
  335. A /= scaleX;
  336. B /= scaleX;
  337. // step (4)
  338. skew = A * C + B * D;
  339. C -= A * skew;
  340. D -= B * skew;
  341. // step (5)
  342. scaleY = Math.sqrt( C * C + D * D );
  343. C /= scaleY;
  344. D /= scaleY;
  345. skew /= scaleY;
  346. // step (6)
  347. if ( A * D < B * C ) {
  348. A = -A;
  349. B = -B;
  350. skew = -skew;
  351. scaleX = -scaleX;
  352. }
  353. // matrix is singular and cannot be interpolated
  354. } else {
  355. // In this case the elem shouldn't be rendered, hence scale == 0
  356. scaleX = scaleY = skew = 0;
  357. }
  358. // The recomposition order is very important
  359. // see http://hg.mozilla.org/mozilla-central/file/7cb3e9795d04/layout/style/nsStyleAnimation.cpp#l971
  360. return [
  361. [_translate, [+matrix[4], +matrix[5]]],
  362. [_rotate, Math.atan2(B, A)],
  363. [_skew + "X", Math.atan(skew)],
  364. [_scale, [scaleX, scaleY]]
  365. ];
  366. }
  367. // build the list of transform functions to interpolate
  368. // use the algorithm described at http://dev.w3.org/csswg/css3-2d-transforms/#animation
  369. function interpolationList( start, end ) {
  370. var list = {
  371. start: [],
  372. end: []
  373. },
  374. i = -1, l,
  375. currStart, currEnd, currType;
  376. // get rid of affine transform matrix
  377. ( start == "none" || isAffine( start ) ) && ( start = "" );
  378. ( end == "none" || isAffine( end ) ) && ( end = "" );
  379. // if end starts with the current computed style, this is a relative animation
  380. // store computed style as the origin, remove it from start and end
  381. if ( start && end && !end.indexOf("matrix") && toArray( start ).join() == toArray( end.split(")")[0] ).join() ) {
  382. list.origin = start;
  383. start = "";
  384. end = end.slice( end.indexOf(")") +1 );
  385. }
  386. if ( !start && !end ) { return; }
  387. // start or end are affine, or list of transform functions are identical
  388. // => functions will be interpolated individually
  389. if ( !start || !end || functionList(start) == functionList(end) ) {
  390. start && ( start = start.split(")") ) && ( l = start.length );
  391. end && ( end = end.split(")") ) && ( l = end.length );
  392. while ( ++i < l-1 ) {
  393. start[i] && ( currStart = start[i].split("(") );
  394. end[i] && ( currEnd = end[i].split("(") );
  395. currType = $.trim( ( currStart || currEnd )[0] );
  396. append( list.start, parseFunction( currType, currStart ? currStart[1] : 0 ) );
  397. append( list.end, parseFunction( currType, currEnd ? currEnd[1] : 0 ) );
  398. }
  399. // otherwise, functions will be composed to a single matrix
  400. } else {
  401. list.start = unmatrix(matrix(start));
  402. list.end = unmatrix(matrix(end))
  403. }
  404. return list;
  405. }
  406. function parseFunction( type, value ) {
  407. var
  408. // default value is 1 for scale, 0 otherwise
  409. defaultValue = +(!type.indexOf(_scale)),
  410. scaleX,
  411. // remove X/Y from scaleX/Y & translateX/Y, not from skew
  412. cat = type.replace( /e[XY]/, "e" );
  413. switch ( type ) {
  414. case _translate+"Y":
  415. case _scale+"Y":
  416. value = [
  417. defaultValue,
  418. value ?
  419. parseFloat( value ):
  420. defaultValue
  421. ];
  422. break;
  423. case _translate+"X":
  424. case _translate:
  425. case _scale+"X":
  426. scaleX = 1;
  427. case _scale:
  428. value = value ?
  429. ( value = value.split(",") ) && [
  430. parseFloat( value[0] ),
  431. parseFloat( value.length>1 ? value[1] : type == _scale ? scaleX || value[0] : defaultValue+"" )
  432. ]:
  433. [defaultValue, defaultValue];
  434. break;
  435. case _skew+"X":
  436. case _skew+"Y":
  437. case _rotate:
  438. value = value ? toRadian( value ) : 0;
  439. break;
  440. case _matrix:
  441. return unmatrix( value ? toArray(value) : [1,0,0,1,0,0] );
  442. break;
  443. }
  444. return [[ cat, value ]];
  445. }
  446. function isAffine( matrix ) {
  447. return rAffine.test(matrix);
  448. }
  449. function functionList( transform ) {
  450. return transform.replace(/(?:\([^)]*\))|\s/g, "");
  451. }
  452. function append( arr1, arr2, value ) {
  453. while ( value = arr2.shift() ) {
  454. arr1.push( value );
  455. }
  456. }
  457. // converts an angle string in any unit to a radian Float
  458. function toRadian(value) {
  459. return ~value.indexOf("deg") ?
  460. parseInt(value,10) * (Math.PI * 2 / 360):
  461. ~value.indexOf("grad") ?
  462. parseInt(value,10) * (Math.PI/200):
  463. parseFloat(value);
  464. }
  465. // Converts "matrix(A,B,C,D,X,Y)" to [A,B,C,D,X,Y]
  466. function toArray(matrix) {
  467. // remove the unit of X and Y for Firefox
  468. matrix = /([^,]*),([^,]*),([^,]*),([^,]*),([^,p]*)(?:px)?,([^)p]*)(?:px)?/.exec(matrix);
  469. return [matrix[1], matrix[2], matrix[3], matrix[4], matrix[5], matrix[6]];
  470. }
  471. $.transform = {
  472. centerOrigin: "margin"
  473. };
  474. })( jQuery, window, document, Math );