easing.d.ts 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. /**
  2. * This represents the main contract an easing function should follow.
  3. * Easing functions are used throughout the animation system.
  4. * @see https://doc.babylonjs.com/features/featuresDeepDive/animation/advanced_animations#easing-functions
  5. */
  6. export interface IEasingFunction {
  7. /**
  8. * Given an input gradient between 0 and 1, this returns the corresponding value
  9. * of the easing function.
  10. * The link below provides some of the most common examples of easing functions.
  11. * @see https://easings.net/
  12. * @param gradient Defines the value between 0 and 1 we want the easing value for
  13. * @returns the corresponding value on the curve defined by the easing function
  14. */
  15. ease(gradient: number): number;
  16. }
  17. /**
  18. * Base class used for every default easing function.
  19. * @see https://doc.babylonjs.com/features/featuresDeepDive/animation/advanced_animations#easing-functions
  20. */
  21. export declare class EasingFunction implements IEasingFunction {
  22. /**
  23. * Interpolation follows the mathematical formula associated with the easing function.
  24. */
  25. static readonly EASINGMODE_EASEIN = 0;
  26. /**
  27. * Interpolation follows 100% interpolation minus the output of the formula associated with the easing function.
  28. */
  29. static readonly EASINGMODE_EASEOUT = 1;
  30. /**
  31. * Interpolation uses EaseIn for the first half of the animation and EaseOut for the second half.
  32. */
  33. static readonly EASINGMODE_EASEINOUT = 2;
  34. private _easingMode;
  35. /**
  36. * Sets the easing mode of the current function.
  37. * @param easingMode Defines the willing mode (EASINGMODE_EASEIN, EASINGMODE_EASEOUT or EASINGMODE_EASEINOUT)
  38. */
  39. setEasingMode(easingMode: number): void;
  40. /**
  41. * Gets the current easing mode.
  42. * @returns the easing mode
  43. */
  44. getEasingMode(): number;
  45. /**
  46. * @internal
  47. */
  48. easeInCore(gradient: number): number;
  49. /**
  50. * Given an input gradient between 0 and 1, this returns the corresponding value
  51. * of the easing function.
  52. * @param gradient Defines the value between 0 and 1 we want the easing value for
  53. * @returns the corresponding value on the curve defined by the easing function
  54. */
  55. ease(gradient: number): number;
  56. }
  57. /**
  58. * Easing function with a circle shape (see link below).
  59. * @see https://easings.net/#easeInCirc
  60. * @see https://doc.babylonjs.com/features/featuresDeepDive/animation/advanced_animations#easing-functions
  61. */
  62. export declare class CircleEase extends EasingFunction implements IEasingFunction {
  63. /**
  64. * @internal
  65. */
  66. easeInCore(gradient: number): number;
  67. }
  68. /**
  69. * Easing function with a ease back shape (see link below).
  70. * @see https://easings.net/#easeInBack
  71. * @see https://doc.babylonjs.com/features/featuresDeepDive/animation/advanced_animations#easing-functions
  72. */
  73. export declare class BackEase extends EasingFunction implements IEasingFunction {
  74. /** Defines the amplitude of the function */
  75. amplitude: number;
  76. /**
  77. * Instantiates a back ease easing
  78. * @see https://easings.net/#easeInBack
  79. * @param amplitude Defines the amplitude of the function
  80. */
  81. constructor(
  82. /** Defines the amplitude of the function */
  83. amplitude?: number);
  84. /**
  85. * @internal
  86. */
  87. easeInCore(gradient: number): number;
  88. }
  89. /**
  90. * Easing function with a bouncing shape (see link below).
  91. * @see https://easings.net/#easeInBounce
  92. * @see https://doc.babylonjs.com/features/featuresDeepDive/animation/advanced_animations#easing-functions
  93. */
  94. export declare class BounceEase extends EasingFunction implements IEasingFunction {
  95. /** Defines the number of bounces */
  96. bounces: number;
  97. /** Defines the amplitude of the bounce */
  98. bounciness: number;
  99. /**
  100. * Instantiates a bounce easing
  101. * @see https://easings.net/#easeInBounce
  102. * @param bounces Defines the number of bounces
  103. * @param bounciness Defines the amplitude of the bounce
  104. */
  105. constructor(
  106. /** Defines the number of bounces */
  107. bounces?: number,
  108. /** Defines the amplitude of the bounce */
  109. bounciness?: number);
  110. /**
  111. * @internal
  112. */
  113. easeInCore(gradient: number): number;
  114. }
  115. /**
  116. * Easing function with a power of 3 shape (see link below).
  117. * @see https://easings.net/#easeInCubic
  118. * @see https://doc.babylonjs.com/features/featuresDeepDive/animation/advanced_animations#easing-functions
  119. */
  120. export declare class CubicEase extends EasingFunction implements IEasingFunction {
  121. /**
  122. * @internal
  123. */
  124. easeInCore(gradient: number): number;
  125. }
  126. /**
  127. * Easing function with an elastic shape (see link below).
  128. * @see https://easings.net/#easeInElastic
  129. * @see https://doc.babylonjs.com/features/featuresDeepDive/animation/advanced_animations#easing-functions
  130. */
  131. export declare class ElasticEase extends EasingFunction implements IEasingFunction {
  132. /** Defines the number of oscillations*/
  133. oscillations: number;
  134. /** Defines the amplitude of the oscillations*/
  135. springiness: number;
  136. /**
  137. * Instantiates an elastic easing function
  138. * @see https://easings.net/#easeInElastic
  139. * @param oscillations Defines the number of oscillations
  140. * @param springiness Defines the amplitude of the oscillations
  141. */
  142. constructor(
  143. /** Defines the number of oscillations*/
  144. oscillations?: number,
  145. /** Defines the amplitude of the oscillations*/
  146. springiness?: number);
  147. /**
  148. * @internal
  149. */
  150. easeInCore(gradient: number): number;
  151. }
  152. /**
  153. * Easing function with an exponential shape (see link below).
  154. * @see https://easings.net/#easeInExpo
  155. * @see https://doc.babylonjs.com/features/featuresDeepDive/animation/advanced_animations#easing-functions
  156. */
  157. export declare class ExponentialEase extends EasingFunction implements IEasingFunction {
  158. /** Defines the exponent of the function */
  159. exponent: number;
  160. /**
  161. * Instantiates an exponential easing function
  162. * @see https://easings.net/#easeInExpo
  163. * @param exponent Defines the exponent of the function
  164. */
  165. constructor(
  166. /** Defines the exponent of the function */
  167. exponent?: number);
  168. /**
  169. * @internal
  170. */
  171. easeInCore(gradient: number): number;
  172. }
  173. /**
  174. * Easing function with a power shape (see link below).
  175. * @see https://easings.net/#easeInQuad
  176. * @see https://doc.babylonjs.com/features/featuresDeepDive/animation/advanced_animations#easing-functions
  177. */
  178. export declare class PowerEase extends EasingFunction implements IEasingFunction {
  179. /** Defines the power of the function */
  180. power: number;
  181. /**
  182. * Instantiates an power base easing function
  183. * @see https://easings.net/#easeInQuad
  184. * @param power Defines the power of the function
  185. */
  186. constructor(
  187. /** Defines the power of the function */
  188. power?: number);
  189. /**
  190. * @internal
  191. */
  192. easeInCore(gradient: number): number;
  193. }
  194. /**
  195. * Easing function with a power of 2 shape (see link below).
  196. * @see https://easings.net/#easeInQuad
  197. * @see https://doc.babylonjs.com/features/featuresDeepDive/animation/advanced_animations#easing-functions
  198. */
  199. export declare class QuadraticEase extends EasingFunction implements IEasingFunction {
  200. /**
  201. * @internal
  202. */
  203. easeInCore(gradient: number): number;
  204. }
  205. /**
  206. * Easing function with a power of 4 shape (see link below).
  207. * @see https://easings.net/#easeInQuart
  208. * @see https://doc.babylonjs.com/features/featuresDeepDive/animation/advanced_animations#easing-functions
  209. */
  210. export declare class QuarticEase extends EasingFunction implements IEasingFunction {
  211. /**
  212. * @internal
  213. */
  214. easeInCore(gradient: number): number;
  215. }
  216. /**
  217. * Easing function with a power of 5 shape (see link below).
  218. * @see https://easings.net/#easeInQuint
  219. * @see https://doc.babylonjs.com/features/featuresDeepDive/animation/advanced_animations#easing-functions
  220. */
  221. export declare class QuinticEase extends EasingFunction implements IEasingFunction {
  222. /**
  223. * @internal
  224. */
  225. easeInCore(gradient: number): number;
  226. }
  227. /**
  228. * Easing function with a sin shape (see link below).
  229. * @see https://easings.net/#easeInSine
  230. * @see https://doc.babylonjs.com/features/featuresDeepDive/animation/advanced_animations#easing-functions
  231. */
  232. export declare class SineEase extends EasingFunction implements IEasingFunction {
  233. /**
  234. * @internal
  235. */
  236. easeInCore(gradient: number): number;
  237. }
  238. /**
  239. * Easing function with a bezier shape (see link below).
  240. * @see http://cubic-bezier.com/#.17,.67,.83,.67
  241. * @see https://doc.babylonjs.com/features/featuresDeepDive/animation/advanced_animations#easing-functions
  242. */
  243. export declare class BezierCurveEase extends EasingFunction implements IEasingFunction {
  244. /** Defines the x component of the start tangent in the bezier curve */
  245. x1: number;
  246. /** Defines the y component of the start tangent in the bezier curve */
  247. y1: number;
  248. /** Defines the x component of the end tangent in the bezier curve */
  249. x2: number;
  250. /** Defines the y component of the end tangent in the bezier curve */
  251. y2: number;
  252. /**
  253. * Instantiates a bezier function
  254. * @see http://cubic-bezier.com/#.17,.67,.83,.67
  255. * @param x1 Defines the x component of the start tangent in the bezier curve
  256. * @param y1 Defines the y component of the start tangent in the bezier curve
  257. * @param x2 Defines the x component of the end tangent in the bezier curve
  258. * @param y2 Defines the y component of the end tangent in the bezier curve
  259. */
  260. constructor(
  261. /** Defines the x component of the start tangent in the bezier curve */
  262. x1?: number,
  263. /** Defines the y component of the start tangent in the bezier curve */
  264. y1?: number,
  265. /** Defines the x component of the end tangent in the bezier curve */
  266. x2?: number,
  267. /** Defines the y component of the end tangent in the bezier curve */
  268. y2?: number);
  269. /**
  270. * @internal
  271. */
  272. easeInCore(gradient: number): number;
  273. }