Added easing functions

Author: luca-vogels

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lup-utils",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "description": "NodeJS library providing utility functions.",
   "main": "./lib/index",
   "types": "./lib/index.d.ts",
@@ -10,6 +10,10 @@
       "types": "./lib/index.d.ts",
       "default": "./lib/index.js"
     },
+    "./easing-functions": {
+      "types": "./lib/easing-functions.d.ts",
+      "default": "./lib/easing-functions.js"
+    },
     "./json": {
       "types": "./lib/json.d.ts",
       "default": "./lib/json.js"

src/__tests__/easing-functions.test.ts

@@ -0,0 +1,321 @@
+/// <reference types="jest" />
+
+import {
+  easeCubicBezier,
+  easeInBack,
+  easeInBounce,
+  easeInCirc,
+  easeInCubic,
+  easeInElastic,
+  easeInExpo,
+  easeInOutBack,
+  easeInOutBounce,
+  easeInOutCirc,
+  easeInOutCubic,
+  easeInOutElastic,
+  easeInOutExpo,
+  easeInOutQuad,
+  easeInOutQuart,
+  easeInOutQuint,
+  easeInOutSine,
+  easeInQuad,
+  easeInQuart,
+  easeInQuint,
+  easeInSine,
+  easeOutBack,
+  easeOutBounce,
+  easeOutCirc,
+  easeOutCubic,
+  easeOutElastic,
+  easeOutExpo,
+  easeOutQuad,
+  easeOutQuart,
+  easeOutQuint,
+  easeOutSine,
+} from '../easing-functions';
+
+const ROUNDING_DIGITS = 1;
+
+function compareFunctions(funcToTest: (x: number) => number, expectedResultFunc: (x: number) => number) {
+  for (let step = 0; step <= 100; step++) {
+    const x = step / 100.0;
+    const r1 = funcToTest(x);
+    const r2 = expectedResultFunc(x);
+    expect(r1).toBeCloseTo(r2, ROUNDING_DIGITS);
+  }
+}
+
+function checkResultWithin0And1(func: (x: number) => number) {
+  for (let step = 0; step <= 100; step++) {
+    const x = step / 100.0;
+    const r = func(x);
+    expect(r).toBeGreaterThanOrEqual(0);
+    expect(r).toBeLessThanOrEqual(1);
+  }
+}
+
+describe('easing-functions.ts', () => {
+  test('easeInSine', () => {
+    expect(easeInSine(0)).toBeCloseTo(0);
+    expect(easeInSine(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeInSine);
+
+    const cubicBezier = easeCubicBezier(0.12, 0, 0.39, 0);
+    compareFunctions(easeInSine, cubicBezier);
+  });
+
+  test('easeInQuad', () => {
+    expect(easeInQuad(0)).toBeCloseTo(0);
+    expect(easeInQuad(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeInQuad);
+
+    const cubicBezier = easeCubicBezier(0.11, 0, 0.5, 0);
+    compareFunctions(easeInQuad, cubicBezier);
+  });
+
+  test('easeInCubic', () => {
+    expect(easeInCubic(0)).toBeCloseTo(0);
+    expect(easeInCubic(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeInCubic);
+
+    const cubicBezier = easeCubicBezier(0.32, 0, 0.67, 0);
+    compareFunctions(easeInCubic, cubicBezier);
+  });
+
+  test('easeInQuart', () => {
+    expect(easeInQuart(0)).toBeCloseTo(0);
+    expect(easeInQuart(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeInQuart);
+
+    const cubicBezier = easeCubicBezier(0.5, 0, 0.75, 0);
+    compareFunctions(easeInQuart, cubicBezier);
+  });
+
+  test('easeInQuint', () => {
+    expect(easeInQuint(0)).toBeCloseTo(0);
+    expect(easeInQuint(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeInQuint);
+
+    const cubicBezier = easeCubicBezier(0.64, 0, 0.78, 0);
+    compareFunctions(easeInQuint, cubicBezier);
+  });
+
+  test('easeInCirc', () => {
+    expect(easeInCirc(0)).toBeCloseTo(0);
+    expect(easeInCirc(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeInCirc);
+
+    const cubicBezier = easeCubicBezier(0.55, 0, 1, 0.45);
+    compareFunctions(easeInCirc, cubicBezier);
+  });
+
+  test('easeInExpo', () => {
+    expect(easeInExpo(0)).toBeCloseTo(0);
+    expect(easeInExpo(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeInExpo);
+
+    const cubicBezier = easeCubicBezier(0.7, 0, 0.84, 0);
+    compareFunctions(easeInExpo, cubicBezier);
+  });
+
+  test('easeInBack', () => {
+    expect(easeInBack(0)).toBeCloseTo(0);
+    expect(easeInBack(1)).toBeCloseTo(1);
+    // expected to be outside of 0 and 1 for some x values, so no check here
+
+    const cubicBezier = easeCubicBezier(0.36, 0, 0.66, -0.56);
+    compareFunctions(easeInBack, cubicBezier);
+  });
+
+  test('easeInElastic', () => {
+    expect(easeInElastic(0)).toBeCloseTo(0);
+    expect(easeInElastic(1)).toBeCloseTo(1);
+    // expected to be outside of 0 and 1 for some x values, so no check here
+
+    // no cubic bezier approximation
+  });
+
+  test('easeInBounce', () => {
+    expect(easeInBounce(0)).toBeCloseTo(0);
+    expect(easeInBounce(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeInBounce);
+
+    // no cubic bezier approximation
+  });
+
+  test('easeOutSine', () => {
+    expect(easeOutSine(0)).toBeCloseTo(0);
+    expect(easeOutSine(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeOutSine);
+
+    const cubicBezier = easeCubicBezier(0.61, 1, 0.88, 1);
+    compareFunctions(easeOutSine, cubicBezier);
+  });
+
+  test('easeOutQuad', () => {
+    expect(easeOutQuad(0)).toBeCloseTo(0);
+    expect(easeOutQuad(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeOutQuad);
+
+    const cubicBezier = easeCubicBezier(0.5, 1, 0.89, 1);
+    compareFunctions(easeOutQuad, cubicBezier);
+  });
+
+  test('easeOutCubic', () => {
+    expect(easeOutCubic(0)).toBeCloseTo(0);
+    expect(easeOutCubic(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeOutCubic);
+
+    const cubicBezier = easeCubicBezier(0.33, 1, 0.68, 1);
+    compareFunctions(easeOutCubic, cubicBezier);
+  });
+
+  test('easeOutQuart', () => {
+    expect(easeOutQuart(0)).toBeCloseTo(0);
+    expect(easeOutQuart(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeOutQuart);
+
+    const cubicBezier = easeCubicBezier(0.25, 1, 0.5, 1);
+    compareFunctions(easeOutQuart, cubicBezier);
+  });
+
+  test('easeOutQuint', () => {
+    expect(easeOutQuint(0)).toBeCloseTo(0);
+    expect(easeOutQuint(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeOutQuint);
+
+    const cubicBezier = easeCubicBezier(0.22, 1, 0.36, 1);
+    compareFunctions(easeOutQuint, cubicBezier);
+  });
+
+  test('easeOutCirc', () => {
+    expect(easeOutCirc(0)).toBeCloseTo(0);
+    expect(easeOutCirc(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeOutCirc);
+
+    const cubicBezier = easeCubicBezier(0, 0.55, 0.45, 1);
+    compareFunctions(easeOutCirc, cubicBezier);
+  });
+
+  test('easeOutExpo', () => {
+    expect(easeOutExpo(0)).toBeCloseTo(0);
+    expect(easeOutExpo(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeOutExpo);
+
+    const cubicBezier = easeCubicBezier(0.16, 1, 0.3, 1);
+    compareFunctions(easeOutExpo, cubicBezier);
+  });
+
+  test('easeOutBack', () => {
+    expect(easeOutBack(0)).toBeCloseTo(0);
+    expect(easeOutBack(1)).toBeCloseTo(1);
+    // expected to be outside of 0 and 1 for some x values, so no check here
+
+    const cubicBezier = easeCubicBezier(0.34, 1.56, 0.64, 1);
+    compareFunctions(easeOutBack, cubicBezier);
+  });
+
+  test('easeOutElastic', () => {
+    expect(easeOutElastic(0)).toBeCloseTo(0);
+    expect(easeOutElastic(1)).toBeCloseTo(1);
+    // expected to be outside of 0 and 1 for some x values, so no check here
+
+    // no cubic bezier approximation
+  });
+
+  test('easeOutBounce', () => {
+    expect(easeOutBounce(0)).toBeCloseTo(0);
+    expect(easeOutBounce(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeOutBounce);
+
+    // no cubic bezier approximation
+  });
+
+  test('easeInOutSine', () => {
+    expect(easeInOutSine(0)).toBeCloseTo(0);
+    expect(easeInOutSine(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeInOutSine);
+
+    const cubicBezier = easeCubicBezier(0.37, 0, 0.63, 1);
+    compareFunctions(easeInOutSine, cubicBezier);
+  });
+
+  test('easeInOutQuad', () => {
+    expect(easeInOutQuad(0)).toBeCloseTo(0);
+    expect(easeInOutQuad(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeInOutQuad);
+
+    const cubicBezier = easeCubicBezier(0.45, 0, 0.55, 1);
+    compareFunctions(easeInOutQuad, cubicBezier);
+  });
+
+  test('easeInOutCubic', () => {
+    expect(easeInOutCubic(0)).toBeCloseTo(0);
+    expect(easeInOutCubic(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeInOutCubic);
+
+    const cubicBezier = easeCubicBezier(0.65, 0, 0.35, 1);
+    compareFunctions(easeInOutCubic, cubicBezier);
+  });
+
+  test('easeInOutQuart', () => {
+    expect(easeInOutQuart(0)).toBeCloseTo(0);
+    expect(easeInOutQuart(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeInOutQuart);
+
+    const cubicBezier = easeCubicBezier(0.76, 0, 0.24, 1);
+    compareFunctions(easeInOutQuart, cubicBezier);
+  });
+
+  test('easeInOutQuint', () => {
+    expect(easeInOutQuint(0)).toBeCloseTo(0);
+    expect(easeInOutQuint(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeInOutQuint);
+
+    const cubicBezier = easeCubicBezier(0.83, 0, 0.17, 1);
+    compareFunctions(easeInOutQuint, cubicBezier);
+  });
+
+  test('easeInOutCirc', () => {
+    expect(easeInOutCirc(0)).toBeCloseTo(0);
+    expect(easeInOutCirc(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeInOutCirc);
+
+    const cubicBezier = easeCubicBezier(0.85, 0, 0.15, 1);
+    compareFunctions(easeInOutCirc, cubicBezier);
+  });
+
+  test('easeInOutExpo', () => {
+    expect(easeInOutExpo(0)).toBeCloseTo(0);
+    expect(easeInOutExpo(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeInOutExpo);
+
+    const cubicBezier = easeCubicBezier(0.87, 0, 0.13, 1);
+    compareFunctions(easeInOutExpo, cubicBezier);
+  });
+
+  test('easeInOutBack', () => {
+    expect(easeInOutBack(0)).toBeCloseTo(0);
+    expect(easeInOutBack(1)).toBeCloseTo(1);
+    // expected to be outside of 0 and 1 for some x values, so no check here
+
+    const cubicBezier = easeCubicBezier(0.68, -0.6, 0.32, 1.6);
+    compareFunctions(easeInOutBack, cubicBezier);
+  });
+
+  test('easeInOutElastic', () => {
+    expect(easeInOutElastic(0)).toBeCloseTo(0);
+    expect(easeInOutElastic(1)).toBeCloseTo(1);
+    // expected to be outside of 0 and 1 for some x values, so no check here
+
+    // no cubic bezier approximation
+  });
+
+  test('easeInOutBounce', () => {
+    expect(easeInOutBounce(0)).toBeCloseTo(0);
+    expect(easeInOutBounce(1)).toBeCloseTo(1);
+    checkResultWithin0And1(easeInOutBounce);
+
+    // no cubic bezier approximation
+  });
+});