d9c859227cef3862f4d9e281d4d2d680d1b74b09ef74c81c0758ef0292427c63231282b928cd0fe73516bf9c55d987cc68ee808fcd7cde019151b30d4b0e9b 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.transition = transition;
  7. exports.injectNewCurve = injectNewCurve;
  8. exports["default"] = void 0;
  9. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  10. var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
  11. var _curves = _interopRequireDefault(require("./config/curves"));
  12. var defaultTransitionBC = 'linear';
  13. /**
  14. * @description Get the N-frame animation state by the start and end state
  15. * of the animation and the easing curve
  16. * @param {String|Array} tBC Easing curve name or data
  17. * @param {Number|Array|Object} startState Animation start state
  18. * @param {Number|Array|Object} endState Animation end state
  19. * @param {Number} frameNum Number of Animation frames
  20. * @param {Boolean} deep Whether to use recursive mode
  21. * @return {Array|Boolean} State of each frame of the animation (Invalid input will return false)
  22. */
  23. function transition(tBC) {
  24. var startState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
  25. var endState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
  26. var frameNum = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 30;
  27. var deep = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
  28. if (!checkParams.apply(void 0, arguments)) return false;
  29. try {
  30. // Get the transition bezier curve
  31. var bezierCurve = getBezierCurve(tBC); // Get the progress of each frame state
  32. var frameStateProgress = getFrameStateProgress(bezierCurve, frameNum); // If the recursion mode is not enabled or the state type is Number, the shallow state calculation is performed directly.
  33. if (!deep || typeof endState === 'number') return getTransitionState(startState, endState, frameStateProgress);
  34. return recursionTransitionState(startState, endState, frameStateProgress);
  35. } catch (_unused) {
  36. console.warn('Transition parameter may be abnormal!');
  37. return [endState];
  38. }
  39. }
  40. /**
  41. * @description Check if the parameters are legal
  42. * @param {String} tBC Name of transition bezier curve
  43. * @param {Any} startState Transition start state
  44. * @param {Any} endState Transition end state
  45. * @param {Number} frameNum Number of transition frames
  46. * @return {Boolean} Is the parameter legal
  47. */
  48. function checkParams(tBC) {
  49. var startState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  50. var endState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
  51. var frameNum = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 30;
  52. if (!tBC || startState === false || endState === false || !frameNum) {
  53. console.error('transition: Missing Parameters!');
  54. return false;
  55. }
  56. if ((0, _typeof2["default"])(startState) !== (0, _typeof2["default"])(endState)) {
  57. console.error('transition: Inconsistent Status Types!');
  58. return false;
  59. }
  60. var stateType = (0, _typeof2["default"])(endState);
  61. if (stateType === 'string' || stateType === 'boolean' || !tBC.length) {
  62. console.error('transition: Unsupported Data Type of State!');
  63. return false;
  64. }
  65. if (!_curves["default"].has(tBC) && !(tBC instanceof Array)) {
  66. console.warn('transition: Transition curve not found, default curve will be used!');
  67. }
  68. return true;
  69. }
  70. /**
  71. * @description Get the transition bezier curve
  72. * @param {String} tBC Name of transition bezier curve
  73. * @return {Array} Bezier curve data
  74. */
  75. function getBezierCurve(tBC) {
  76. var bezierCurve = '';
  77. if (_curves["default"].has(tBC)) {
  78. bezierCurve = _curves["default"].get(tBC);
  79. } else if (tBC instanceof Array) {
  80. bezierCurve = tBC;
  81. } else {
  82. bezierCurve = _curves["default"].get(defaultTransitionBC);
  83. }
  84. return bezierCurve;
  85. }
  86. /**
  87. * @description Get the progress of each frame state
  88. * @param {Array} bezierCurve Transition bezier curve
  89. * @param {Number} frameNum Number of transition frames
  90. * @return {Array} Progress of each frame state
  91. */
  92. function getFrameStateProgress(bezierCurve, frameNum) {
  93. var tMinus = 1 / (frameNum - 1);
  94. var tState = new Array(frameNum).fill(0).map(function (t, i) {
  95. return i * tMinus;
  96. });
  97. var frameState = tState.map(function (t) {
  98. return getFrameStateFromT(bezierCurve, t);
  99. });
  100. return frameState;
  101. }
  102. /**
  103. * @description Get the progress of the corresponding frame according to t
  104. * @param {Array} bezierCurve Transition bezier curve
  105. * @param {Number} t Current frame t
  106. * @return {Number} Progress of current frame
  107. */
  108. function getFrameStateFromT(bezierCurve, t) {
  109. var tBezierCurvePoint = getBezierCurvePointFromT(bezierCurve, t);
  110. var bezierCurvePointT = getBezierCurvePointTFromReT(tBezierCurvePoint, t);
  111. return getBezierCurveTState(tBezierCurvePoint, bezierCurvePointT);
  112. }
  113. /**
  114. * @description Get the corresponding sub-curve according to t
  115. * @param {Array} bezierCurve Transition bezier curve
  116. * @param {Number} t Current frame t
  117. * @return {Array} Sub-curve of t
  118. */
  119. function getBezierCurvePointFromT(bezierCurve, t) {
  120. var lastIndex = bezierCurve.length - 1;
  121. var begin = '',
  122. end = '';
  123. bezierCurve.findIndex(function (item, i) {
  124. if (i === lastIndex) return;
  125. begin = item;
  126. end = bezierCurve[i + 1];
  127. var currentMainPointX = begin[0][0];
  128. var nextMainPointX = end[0][0];
  129. return t >= currentMainPointX && t < nextMainPointX;
  130. });
  131. var p0 = begin[0];
  132. var p1 = begin[2] || begin[0];
  133. var p2 = end[1] || end[0];
  134. var p3 = end[0];
  135. return [p0, p1, p2, p3];
  136. }
  137. /**
  138. * @description Get local t based on t and sub-curve
  139. * @param {Array} bezierCurve Sub-curve
  140. * @param {Number} t Current frame t
  141. * @return {Number} local t of sub-curve
  142. */
  143. function getBezierCurvePointTFromReT(bezierCurve, t) {
  144. var reBeginX = bezierCurve[0][0];
  145. var reEndX = bezierCurve[3][0];
  146. var xMinus = reEndX - reBeginX;
  147. var tMinus = t - reBeginX;
  148. return tMinus / xMinus;
  149. }
  150. /**
  151. * @description Get the curve progress of t
  152. * @param {Array} bezierCurve Sub-curve
  153. * @param {Number} t Current frame t
  154. * @return {Number} Progress of current frame
  155. */
  156. function getBezierCurveTState(_ref, t) {
  157. var _ref2 = (0, _slicedToArray2["default"])(_ref, 4),
  158. _ref2$ = (0, _slicedToArray2["default"])(_ref2[0], 2),
  159. p0 = _ref2$[1],
  160. _ref2$2 = (0, _slicedToArray2["default"])(_ref2[1], 2),
  161. p1 = _ref2$2[1],
  162. _ref2$3 = (0, _slicedToArray2["default"])(_ref2[2], 2),
  163. p2 = _ref2$3[1],
  164. _ref2$4 = (0, _slicedToArray2["default"])(_ref2[3], 2),
  165. p3 = _ref2$4[1];
  166. var pow = Math.pow;
  167. var tMinus = 1 - t;
  168. var result1 = p0 * pow(tMinus, 3);
  169. var result2 = 3 * p1 * t * pow(tMinus, 2);
  170. var result3 = 3 * p2 * pow(t, 2) * tMinus;
  171. var result4 = p3 * pow(t, 3);
  172. return 1 - (result1 + result2 + result3 + result4);
  173. }
  174. /**
  175. * @description Get transition state according to frame progress
  176. * @param {Any} startState Transition start state
  177. * @param {Any} endState Transition end state
  178. * @param {Array} frameState Frame state progress
  179. * @return {Array} Transition frame state
  180. */
  181. function getTransitionState(begin, end, frameState) {
  182. var stateType = 'object';
  183. if (typeof begin === 'number') stateType = 'number';
  184. if (begin instanceof Array) stateType = 'array';
  185. if (stateType === 'number') return getNumberTransitionState(begin, end, frameState);
  186. if (stateType === 'array') return getArrayTransitionState(begin, end, frameState);
  187. if (stateType === 'object') return getObjectTransitionState(begin, end, frameState);
  188. return frameState.map(function (t) {
  189. return end;
  190. });
  191. }
  192. /**
  193. * @description Get the transition data of the number type
  194. * @param {Number} startState Transition start state
  195. * @param {Number} endState Transition end state
  196. * @param {Array} frameState Frame state progress
  197. * @return {Array} Transition frame state
  198. */
  199. function getNumberTransitionState(begin, end, frameState) {
  200. var minus = end - begin;
  201. return frameState.map(function (s) {
  202. return begin + minus * s;
  203. });
  204. }
  205. /**
  206. * @description Get the transition data of the array type
  207. * @param {Array} startState Transition start state
  208. * @param {Array} endState Transition end state
  209. * @param {Array} frameState Frame state progress
  210. * @return {Array} Transition frame state
  211. */
  212. function getArrayTransitionState(begin, end, frameState) {
  213. var minus = end.map(function (v, i) {
  214. if (typeof v !== 'number') return false;
  215. return v - begin[i];
  216. });
  217. return frameState.map(function (s) {
  218. return minus.map(function (v, i) {
  219. if (v === false) return end[i];
  220. return begin[i] + v * s;
  221. });
  222. });
  223. }
  224. /**
  225. * @description Get the transition data of the object type
  226. * @param {Object} startState Transition start state
  227. * @param {Object} endState Transition end state
  228. * @param {Array} frameState Frame state progress
  229. * @return {Array} Transition frame state
  230. */
  231. function getObjectTransitionState(begin, end, frameState) {
  232. var keys = Object.keys(end);
  233. var beginValue = keys.map(function (k) {
  234. return begin[k];
  235. });
  236. var endValue = keys.map(function (k) {
  237. return end[k];
  238. });
  239. var arrayState = getArrayTransitionState(beginValue, endValue, frameState);
  240. return arrayState.map(function (item) {
  241. var frameData = {};
  242. item.forEach(function (v, i) {
  243. return frameData[keys[i]] = v;
  244. });
  245. return frameData;
  246. });
  247. }
  248. /**
  249. * @description Get the transition state data by recursion
  250. * @param {Array|Object} startState Transition start state
  251. * @param {Array|Object} endState Transition end state
  252. * @param {Array} frameState Frame state progress
  253. * @return {Array} Transition frame state
  254. */
  255. function recursionTransitionState(begin, end, frameState) {
  256. var state = getTransitionState(begin, end, frameState);
  257. var _loop = function _loop(key) {
  258. var bTemp = begin[key];
  259. var eTemp = end[key];
  260. if ((0, _typeof2["default"])(eTemp) !== 'object') return "continue";
  261. var data = recursionTransitionState(bTemp, eTemp, frameState);
  262. state.forEach(function (fs, i) {
  263. return fs[key] = data[i];
  264. });
  265. };
  266. for (var key in end) {
  267. var _ret = _loop(key);
  268. if (_ret === "continue") continue;
  269. }
  270. return state;
  271. }
  272. /**
  273. * @description Inject new curve into curves as config
  274. * @param {Any} key The key of curve
  275. * @param {Array} curve Bezier curve data
  276. * @return {Undefined} No return
  277. */
  278. function injectNewCurve(key, curve) {
  279. if (!key || !curve) {
  280. console.error('InjectNewCurve Missing Parameters!');
  281. return;
  282. }
  283. _curves["default"].set(key, curve);
  284. }
  285. var _default = transition;
  286. exports["default"] = _default;