egjs

Source: hook/transform.js

  1. /**
  2. * Copyright (c) 2015 NAVER Corp.
  3. * egjs projects are licensed under the MIT license
  4. */
  6. /**
  7.  * A method that extends the <a href=http://api.jquery.com/animate/>.animate()</a> method provided by jQuery. With this method, you can use the transform property and 3D acceleration
  8.  * @ko jQuery의<a href=http://api.jquery.com/animate/>animate() 메서드</a>를 확장한 메서드. CSS의 transform 속성과 3D 가속을 사용할 수 있다.
  9.  * @name jQuery#animate
  10.  * @method
  11.  * @param {Object} properties An object composed of the CSS property and value which will be applied to an animation<ko>애니메이션을 적용할 CSS 속성과 값으로 구성된 객체</ko>
  12.  * @param {Number|String} [duration=4000] Duration of the animation (unit: ms)<ko>애니메이션 진행 시간(단위: ms)</ko>
  13.  * @param {String} [easing="swing"] The easing function to apply to an animation<ko>애니메이션에 적용할 easing 함수</ko>
  14.  * @param {Function} [complete] A function that is called once the animation is complete.<ko>애니메이션을 완료한 다음 호출할 함수</ko>
  15.  *
  16.  * @example
  17.  * $("#box")
  18.  * 		.animate({"transform" : "translate3d(150px, 100px, 0px) rotate(20deg) scaleX(1)"} , 3000)
  19.  * 		.animate({"transform" : "+=translate3d(150px, 10%, -20px) rotate(20deg) scale3d(2, 4.2, 1)"} , 3000);
  20.  * @see {@link http://api.jquery.com/animate/}
  21.  *
  22.  * @support {"ie": "10+", "ch" : "latest", "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "2.3+ (except 3.x)"}
  23.  */
  24. eg.module("transform", ["jQuery", window], function($) {
  25. 	"use strict";
  27. 	/**
  28. 	 * Get a 'px' converted value if it has a %.
  29. 	 * Otherwise it returns value appened with 'px'.
  30. 	 */
  31. 	function getConverted(val, base) {
  32. 		var ret = val;
  33. 		var num = val.match(/((-|\+)*[0-9]+)%/);
  35. 		if (num && num.length >= 1) {
  36. 			ret = base * (parseFloat(num[1]) / 100) + "px";
  37. 		} else if (val.indexOf("px") === -1) {
  38. 			ret = val + "px";
  39. 		}
  41. 		return ret;
  42. 	}
  44. 	function correctUnit(transform, width, height) {
  45. 		var m;
  46. 		var ret = "";
  47. 		var arr = transform.split(")");
  49. 		for (var i = 0, len = arr.length - 1; i < len; i++) {
  50. 			var name = arr[i];
  52. 			// '%' is only meaningful on translate.
  53. 			if ((m = name.match(/(translate([XYZ]|3d)?|rotate)\(([^)]*)/)) && m.length > 1) {
  54. 				if (m[1] === "rotate") {
  55. 					if (m[3].indexOf("deg") === -1) {
  56. 						name = m[1] + "(" + m[3] + "deg";
  57. 					}
  58. 				} else {
  59. 					switch (m[2]) {
  60. 					case "X":
  61. 						name = m[1] + "(" + getConverted(m[3], width);
  62. 						break;
  63. 					case "Y":
  64. 						name = m[1] + "(" +  getConverted(m[3], height);
  65. 						break;
  66. 					case "Z":
  68. 						//Meaningless. Do nothing
  69. 						break;
  70. 					default://2d, 3d
  71. 						var nums = m[3].split(",");
  72. 						var bases = [width, height, 100];
  74. 						for (var k = 0, l = nums.length; k < l; k++) {
  75. 							nums[k] = getConverted(nums[k], bases[k]);
  76. 						}
  77. 						name = m[1] + "(" + nums.join(",");
  78. 						break;
  79. 					}
  80. 				}
  81. 			}
  83. 			name = " " + name + ")";
  84. 			ret += name;
  85. 		}
  87. 		//Remove wrong '%'s and '+=' because it cannot be translated to a matrix.
  88. 		ret = ret.replace("%", "").replace("+=", "");
  89. 		return ret;
  90. 	}
  92. 	/**
  93. 	 * Parse a transform atom value.
  94. 	 *
  95. 	 * "30px" --> {num: 30, unit: "px"}
  96. 	 *
  97. 	 * Because calculation of string number is heavy,
  98. 	 * In advance, convert a string number to a float number with an unit for the use of transformByPos,
  99. 	 * which is called very frequently.
  100. 	 */
  101. 	function toParsedFloat(val) {
  102. 		var m = val.match(/((-|\+)*[\d|\.]+)(px|deg|rad)*/);
  103. 		if (m && m.length >= 1) {
  104. 			return {"num": parseFloat(m[1]), "unit": m[3]};
  105. 		}
  106. 	}
  108. 	function getTransformGenerateFunction(transform) {
  109. 		var splitted = transform.split(")");
  110. 		var list = [];
  112. 		//Make parsed transform list.
  113. 		for (var i = 0, len = splitted.length - 1; i < len; i++) {
  114. 			var parsed = parseStyle(splitted[i]);
  116. 			parsed[1] = $.map(parsed[1], toParsedFloat);
  117. 			list.push(parsed);
  118. 		}
  120. 		return function transformByPos(pos) {
  121. 			var transform = "";
  122. 			var defaultVal = 0;
  124. 			$.each(list, function(i) {
  125. 				if (list[i][0].indexOf("scale") >= 0) {
  126. 					defaultVal = 1;
  127. 				} else {
  128. 					defaultVal = 0;
  129. 				}
  131. 				var valStr = $.map(list[i][1], function(value) {
  132. 					var val = value.num;
  133. 					defaultVal === 1 && (val = val - 1);
  134. 					return (defaultVal + val * pos) + (value.unit || "");
  135. 				}).join(",");
  137. 				transform += list[i][0] + "(" + valStr + ") ";
  138. 			});
  140. 			return transform;
  141. 		};
  142. 	}
  144. 	function rateFn(element, startTf, endTf) {
  145. 		var isRelative = endTf.indexOf("+=") >= 0;
  146. 		var start;
  147. 		var end;
  148. 		var basePos;
  150. 		// Convert translate unit to 'px'.
  151. 		endTf = correctUnit(endTf,
  152. 					parseFloat($.css(element, "width")) || 0,
  153. 					parseFloat($.css(element, "height")) || 0);
  155. 		if (isRelative) {
  156. 			start = (!startTf || startTf === "none") ?
  157. 						"matrix(1, 0, 0, 1, 0, 0)" : startTf;
  158. 			end = getTransformGenerateFunction(endTf);
  159. 		} else {
  160. 			start = toMatrixArray(startTf);
  161. 			basePos = toMatrixArray("none");//transform base-position
  163. 			//If the type of matrix is not equal, then match to matrix3d
  164. 			if (start[1].length < basePos[1].length) {
  165. 				start = toMatrix3d(start);
  166. 			} else if (start[1].length > basePos[1].length) {
  167. 				basePos = toMatrix3d(basePos);
  168. 			}
  170. 			end = getTransformGenerateFunction(endTf);
  171. 		}
  173. 		return function(pos) {
  174. 			var result = [];
  175. 			var ret = "";//matrix for interpolated value from current to base(1, 0, 0, 1, 0, 0)
  177. 			if (isRelative) {
  178. 				// This means a muliply between a matrix and a transform.
  179. 				return start + end(pos);
  180. 			}
  182. 			if (pos === 1) {
  183. 				ret = data2String(basePos);
  184. 			} else {
  185. 				for (var i = 0, s, e, l = start[1].length; i < l; i++) {
  186. 					s = parseFloat(start[1][i]);
  187. 					e = parseFloat(basePos[1][i]);
  189. 					result.push(s + (e - s) * pos);
  190. 				}
  192. 				ret = data2String([start[0], result]);
  193. 			}
  195. 			return ret + end(pos);
  196. 		};
  197. 	}
  199. 	/**
  200. 	 * ["translate", [100, 0]] --> translate(100px, 0)
  201. 	 * {translate : [100, 0]} --> translate(100px, 0)
  202. 	 * {matrix : [1, 0, 1, 0, 100, 0]} --> matrix(1, 0, 1, 0, 100, 0)
  203. 	 */
  204. 	function data2String(property) {
  205. 		var name;
  206. 		var tmp = [];
  208. 		if ($.isArray(property)) {
  209. 			name = property[0];
  210. 			return name + "(" + property[1].join(unit(name) + ",") + unit(name) + ")";
  211. 		} else {
  212. 			for (name in property) {
  213. 				tmp.push(name);
  214. 			}
  216. 			return $.map(tmp, function(v) {
  217. 				return v + "(" +  property[v] + unit(v) + ")";
  218. 			}).join(" ");
  219. 		}
  220. 	}
  222. 	function unit(name) {
  223. 		return name.indexOf("translate") >= 0 ?
  224. 				"px" : name.indexOf("rotate") >= 0 ? "deg" : "";
  225. 	}
  227. 	// ["translate" , ["10", "20"]]
  228. 	function parseStyle(property) {
  229. 		var m = property.match(/(\b\w+?)\((\s*[^\)]+)/);
  230. 		var name;
  231. 		var value;
  232. 		var result = ["",""];
  234. 		if (m && m.length > 2) {
  235. 			name = m[1];
  236. 			value = m[2].split(",");
  237. 			value = $.map(value, function(v) {
  238. 				return $.trim(v);
  239. 			});
  240. 			result = [ $.trim(name), value ];
  241. 		}
  242. 		return result;
  243. 	}
  245. 	/**
  246. 	 * Convert matrix string to array type.
  247. 	 *
  248. 	 * eg. matrix(1, 0, 0, 1, 0, 0) ==>  ["matrix", [1, 0, 0, 1, 0, 0]]
  249. 	 * matrix3d(1,0,0,0,0,1,-2.44929e-16,0,0,2.44929e-16,1,0,0,0,0,1)
  250. 	 */
  251. 	function toMatrixArray(matrixStr) {
  252. 		var matched;
  254. 		if (!matrixStr || matrixStr === "none") {
  255. 			return ["matrix", [ "1", "0", "0", "1", "0", "0"] ];
  256. 		}
  258. 		matrixStr = matrixStr.replace(/\s/g, "");
  259. 		matched = matrixStr.match(/(matrix)(3d)*\((.*)\)/);
  261. 		return [matched[1] + (matched[2] || ""), matched[3].split(",")];
  262. 	}
  264. 	function toMatrix3d(matrix) {
  265. 		var name = matrix[0];
  266. 		var val = matrix[1];
  268. 		if (name === "matrix3d") {
  269. 			return matrix;
  270. 		}
  272. 		// matrix(a, b, c, d, tx, ty) is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)
  273. 		return [
  274. 			name + "3d", [val[0], val[1], "0", "0",
  275. 						val[2], val[3], "0", "0",
  276. 						"0", "0", "1", "0",
  277. 						val[4], val[5], "0", "1"]
  278. 		];
  279. 	}
  281. 	$.fx.step.transform = function(fx) {
  282. 		fx.rateFn = fx.rateFn || rateFn(fx.elem, fx.start, fx.end);
  283. 		$.style(fx.elem, "transform", fx.rateFn(fx.pos));
  284. 	};
  286. 	// All of this interfaces are functions for unit testing.
  287. 	return {
  288. 		toMatrix: toMatrixArray,
  289. 		toMatrix3d: toMatrix3d
  290. 	};
  291. });
comments powered by Disqus