easing.ts

  1. import { EasingFunction } from "./types";
  3. function cubic(y1: number, y2: number, t: number) {
  4.   const t2 = 1 - t;
  6.   // Bezier Curve Formula
  7.   return t * t * t + 3 * t * t * t2 * y2 + 3 * t * t2 * t2 * y1;
  8. }
  9. function solveFromX(x1: number, x2: number, x: number) {
  10.   // x  0 ~ 1
  11.   // t 0 ~ 1
  12.   let t = x;
  13.   let solveX = x;
  14.   let dx = 1;
  16.   while (Math.abs(dx) > 1 / 1000) {
  17.     // 예상 t초에 의한 _x값
  18.     solveX = cubic(x1, x2, t);
  19.     dx = solveX - x;
  20.     // 차이가 미세하면 그 값을 t로 지정
  21.     if (Math.abs(dx) < 1 / 1000) {
  22.       return t;
  23.     }
  24.     t -= dx / 2;
  25.   }
  26.   return t;
  27. }
  28. /**
  29.  * @namespace easing
  30.  */
  31. /**
  32. * Cubic Bezier curve.
  33. * @memberof easing
  34. * @func bezier
  35. * @param {number} [x1] - point1's x
  36. * @param {number} [y1] - point1's y
  37. * @param {number} [x2] - point2's x
  38. * @param {number} [y2] - point2's y
  39. * @return {function} the curve function
  40. * @example
  41. import {bezier} from "scenejs";
  42. Scene.bezier(0, 0, 1, 1) // LINEAR
  43. Scene.bezier(0.25, 0.1, 0.25, 1) // EASE
  44. */
  45. export function bezier(x1: number, y1: number, x2: number, y2: number) {
  46.   /*
  47. 		x = f(t)
  48. 		calculate inverse function by x
  49. 		t = f-1(x)
  50. 	*/
  51.   const func: EasingFunction = (x: number) => {
  52.     const t = solveFromX(x1, x2, Math.max(Math.min(1, x), 0));
  54.     return cubic(y1, y2, t);
  55.   };
  57.   func.easingName = `cubic-bezier(${x1},${y1},${x2},${y2})`;
  58.   return func;
  59. }
  60. /**
  61. * Specifies a stepping function
  62. * @see {@link https://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp|CSS3 Timing Function}
  63. * @memberof easing
  64. * @func steps
  65. * @param {number} count - point1's x
  66. * @param {"start" | "end"} postion - point1's y
  67. * @return {function} the curve function
  68. * @example
  69. import {steps} from "scenejs";
  70. Scene.steps(1, "start") // Scene.STEP_START
  71. Scene.steps(1, "end") // Scene.STEP_END
  72. */
  73. export function steps(count: number, position: "start" | "end") {
  74.   const func: EasingFunction = (time: number) => {
  75.     const level = 1 / count;
  77.     if (time >= 1) {
  78.       return 1;
  79.     }
  80.     return (position === "start" ? level : 0) + Math.floor(time / level) * level;
  81.   };
  83.   func.easingName = `steps(${count}, ${position})`;
  85.   return func;
  86. }
  88. /**
  89. * Equivalent to steps(1, start)
  90. * @memberof easing
  91. * @name STEP_START
  92. * @static
  93. * @type {function}
  94. * @example
  95. import {STEP_START} from "scenejs";
  96. Scene.STEP_START // steps(1, start)
  97. */
  98. export const STEP_START = /*#__PURE__#*/steps(1, "start");
  99. /**
  100. * Equivalent to steps(1, end)
  101. * @memberof easing
  102. * @name STEP_END
  103. * @static
  104. * @type {function}
  105. * @example
  106. import {STEP_END} from "scenejs";
  107. Scene.STEP_END // steps(1, end)
  108. */
  109. export const STEP_END = /*#__PURE__#*/steps(1, "end");
  110. /**
  111. * Linear Speed (0, 0, 1, 1)
  112. * @memberof easing
  113. * @name LINEAR
  114. * @static
  115. * @type {function}
  116. * @example
  117. import {LINEAR} from "scenejs";
  118. Scene.LINEAR
  119. */
  120. export const LINEAR = /*#__PURE__#*/bezier(0, 0, 1, 1);
  121. /**
  122. * Ease Speed (0.25, 0.1, 0.25, 1)
  123. * @memberof easing
  124. * @name EASE
  125. * @static
  126. * @type {function}
  127. * @example
  128. import {EASE} from "scenejs";
  129. Scene.EASE
  130. */
  131. export const EASE = /*#__PURE__#*/bezier(0.25, 0.1, 0.25, 1);
  132. /**
  133. * Ease In Speed (0.42, 0, 1, 1)
  134. * @memberof easing
  135. * @name EASE_IN
  136. * @static
  137. * @type {function}
  138. * @example
  139. import {EASE_IN} from "scenejs";
  140. Scene.EASE_IN
  141. */
  142. export const EASE_IN = /*#__PURE__#*/bezier(0.42, 0, 1, 1);
  143. /**
  144. * Ease Out Speed (0, 0, 0.58, 1)
  145. * @memberof easing
  146. * @name EASE_OUT
  147. * @static
  148. * @type {function}
  149. * @example
  150. import {EASE_OUT} from "scenejs";
  151. Scene.EASE_OUT
  152. */
  153. export const EASE_OUT = /*#__PURE__#*/bezier(0, 0, 0.58, 1);
  154. /**
  155. * Ease In Out Speed (0.42, 0, 0.58, 1)
  156. * @memberof easing
  157. * @name EASE_IN_OUT
  158. * @static
  159. * @type {function}
  160. * @example
  161. import {EASE_IN_OUT} from "scenejs";
  162. Scene.EASE_IN_OUT
  163. */
  164. export const EASE_IN_OUT = /*#__PURE__#*/bezier(0.42, 0, 0.58, 1);