Easings.ts 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. const EASINGS = {
  2. Linear: {
  3. EaseNone: (percentageComplete) => percentageComplete,
  4. },
  5. Quadratic: {
  6. EaseIn: (percentageComplete) => percentageComplete * percentageComplete,
  7. EaseOut: (percentageComplete) => -percentageComplete * (percentageComplete - 2),
  8. EaseInOut: (percentageComplete) => {
  9. if ((percentageComplete *= 2) < 1) return 0.5 * percentageComplete * percentageComplete;
  10. return - 0.5 * (--percentageComplete * (percentageComplete - 2) - 1);
  11. },
  12. },
  13. Cubic: {
  14. EaseIn: (percentageComplete) => percentageComplete * percentageComplete * percentageComplete,
  15. EaseOut: (percentageComplete) => --percentageComplete * percentageComplete * percentageComplete + 1,
  16. EaseInOut: (percentageComplete) => {
  17. if ((percentageComplete *= 2) < 1) return 0.5 * percentageComplete * percentageComplete * percentageComplete;
  18. return 0.5 * ((percentageComplete -= 2) * percentageComplete * percentageComplete + 2);
  19. },
  20. },
  21. Quartic: {
  22. EaseIn: (percentageComplete) => percentageComplete * percentageComplete * percentageComplete * percentageComplete,
  23. EaseOut: (percentageComplete) => -(--percentageComplete * percentageComplete * percentageComplete * percentageComplete - 1),
  24. EaseInOut: (percentageComplete) => {
  25. if ((percentageComplete *= 2) < 1) return 0.5 * percentageComplete * percentageComplete * percentageComplete * percentageComplete;
  26. return - 0.5 * ((percentageComplete -= 2) * percentageComplete * percentageComplete * percentageComplete - 2);
  27. },
  28. },
  29. Quintic: {
  30. EaseIn: (percentageComplete) => percentageComplete * percentageComplete * percentageComplete * percentageComplete * percentageComplete,
  31. EaseOut: (percentageComplete) => (percentageComplete = percentageComplete - 1) * percentageComplete * percentageComplete * percentageComplete * percentageComplete + 1,
  32. EaseInOut: (percentageComplete) => {
  33. if ((percentageComplete *= 2) < 1) return 0.5 * percentageComplete * percentageComplete * percentageComplete * percentageComplete * percentageComplete;
  34. return 0.5 * ((percentageComplete -= 2) * percentageComplete * percentageComplete * percentageComplete * percentageComplete + 2);
  35. },
  36. },
  37. Sinusoidal: {
  38. EaseIn: (percentageComplete) => -Math.cos(percentageComplete * Math.PI / 2) + 1,
  39. EaseOut: (percentageComplete) => Math.sin(percentageComplete * Math.PI / 2),
  40. EaseInOut: (percentageComplete) => -0.5 * (Math.cos(Math.PI * percentageComplete) - 1),
  41. },
  42. Exponential: {
  43. EaseIn: (percentageComplete) => {
  44. return percentageComplete == 0 ? 0 : Math.pow(2, 10 * (percentageComplete - 1));
  45. },
  46. EaseOut: (percentageComplete) => {
  47. return percentageComplete == 1 ? 1 : - Math.pow(2, - 10 * percentageComplete) + 1;
  48. },
  49. EaseInOut: (percentageComplete) => {
  50. if (percentageComplete == 0) return 0;
  51. if (percentageComplete == 1) return 1;
  52. if ((percentageComplete *= 2) < 1) return 0.5 * Math.pow(2, 10 * (percentageComplete - 1));
  53. return 0.5 * (- Math.pow(2, - 10 * (percentageComplete - 1)) + 2);
  54. },
  55. },
  56. Circular: {
  57. EaseIn: (percentageComplete) => -(Math.sqrt(1 - percentageComplete * percentageComplete) - 1),
  58. EaseOut: (percentageComplete) => Math.sqrt(1 - (--percentageComplete * percentageComplete)),
  59. EaseInOut: (percentageComplete) => {
  60. if ((percentageComplete /= 0.5) < 1) return - 0.5 * (Math.sqrt(1 - percentageComplete * percentageComplete) - 1);
  61. return 0.5 * (Math.sqrt(1 - (percentageComplete -= 2) * percentageComplete) + 1);
  62. },
  63. },
  64. Elastic: {
  65. EaseIn: (percentageComplete) => {
  66. var s, a = 0.1, p = 0.4;
  67. if (percentageComplete == 0) return 0; if (percentageComplete == 1) return 1; if (!p) p = 0.3;
  68. if (!a || a < 1) { a = 1; s = p / 4; }
  69. else s = p / (2 * Math.PI) * Math.asin(1 / a);
  70. return - (a * Math.pow(2, 10 * (percentageComplete -= 1)) * Math.sin((percentageComplete - s) * (2 * Math.PI) / p));
  71. },
  72. EaseOut: (percentageComplete) => {
  73. var s, a = 0.1, p = 0.4;
  74. if (percentageComplete == 0) return 0; if (percentageComplete == 1) return 1; if (!p) p = 0.3;
  75. if (!a || a < 1) { a = 1; s = p / 4; }
  76. else s = p / (2 * Math.PI) * Math.asin(1 / a);
  77. return (a * Math.pow(2, - 10 * percentageComplete) * Math.sin((percentageComplete - s) * (2 * Math.PI) / p) + 1);
  78. },
  79. EaseInOut: (percentageComplete) => {
  80. var s, a = 0.1, p = 0.4;
  81. if (percentageComplete == 0) return 0; if (percentageComplete == 1) return 1; if (!p) p = 0.3;
  82. if (!a || a < 1) { a = 1; s = p / 4; }
  83. else s = p / (2 * Math.PI) * Math.asin(1 / a);
  84. if ((percentageComplete *= 2) < 1) return - 0.5 * (a * Math.pow(2, 10 * (percentageComplete -= 1)) * Math.sin((percentageComplete - s) * (2 * Math.PI) / p));
  85. return a * Math.pow(2, -10 * (percentageComplete -= 1)) * Math.sin((percentageComplete - s) * (2 * Math.PI) / p) * 0.5 + 1;
  86. },
  87. },
  88. Back: {
  89. EaseIn: (percentageComplete) => {
  90. var s = 1.70158;
  91. return percentageComplete * percentageComplete * ((s + 1) * percentageComplete - s);
  92. },
  93. EaseOut: (percentageComplete) => {
  94. var s = 1.70158;
  95. return (percentageComplete = percentageComplete - 1) * percentageComplete * ((s + 1) * percentageComplete + s) + 1;
  96. },
  97. EaseInOut: (percentageComplete) => {
  98. var s = 1.70158 * 1.525;
  99. if ((percentageComplete *= 2) < 1) return 0.5 * (percentageComplete * percentageComplete * ((s + 1) * percentageComplete - s));
  100. return 0.5 * ((percentageComplete -= 2) * percentageComplete * ((s + 1) * percentageComplete + s) + 2);
  101. },
  102. },
  103. Bounce: {
  104. EaseIn: (percentageComplete) => 1 - EASINGS.Bounce.EaseOut(1 - percentageComplete),
  105. EaseOut: (percentageComplete) => {
  106. if ((percentageComplete /= 1) < (1 / 2.75)) {
  107. return 7.5625 * percentageComplete * percentageComplete;
  108. } else if (percentageComplete < (2 / 2.75)) {
  109. return 7.5625 * (percentageComplete -= (1.5 / 2.75)) * percentageComplete + 0.75;
  110. } else if (percentageComplete < (2.5 / 2.75)) {
  111. return 7.5625 * (percentageComplete -= (2.25 / 2.75)) * percentageComplete + 0.9375;
  112. } else {
  113. return 7.5625 * (percentageComplete -= (2.625 / 2.75)) * percentageComplete + 0.984375;
  114. }
  115. },
  116. EaseInOut: (percentageComplete) => {
  117. if (percentageComplete < 0.5) return EASINGS.Bounce.EaseIn(percentageComplete * 2) * 0.5;
  118. return EASINGS.Bounce.EaseOut(percentageComplete * 2 - 1) * 0.5 + 0.5;
  119. },
  120. },
  121. }
  122. export default EASINGS