@24i/bigscreen-sdk 1.0.38 → 1.0.40-alpha.2687

package/packages/animations/README.md

@@ -1,85 +1,85 @@
----
-id: README
-title: Animations
-hide_title: true
-sidebar_label: Animations
----
-
-# Animations
-This package is for easy implementation of JS animations.
-
-## AnimationUtils
-This part contains definitions for easing functions and calculations of easing functions.
-If you use it in combination with *JSAnimations* then you will need only static easing function members.
-* linear - css `linear`
-* ease - css `cubic-bezier(0.25, 0.1, 0.25, 1)`
-* easeInSine - css `cubic-bezier(0.47, 0, 0.745, 0.715)`
-* easeOutSine - css `cubic-bezier(0.39, 0.575, 0.565, 1)`
-* easeInOutSine - css `cubic-bezier(0.445, 0.05, 0.55, 0.95)`
-* easeInQuad - css `cubic-bezier(0.55, 0.085, 0.68, 0.53)`
-* easeOutQuad - css `cubic-bezier(0.25, 0.46, 0.45, 0.94)`
-* easeInOutQuad - css `cubic-bezier(0.455, 0.03, 0.515, 0.955)`
-* easeInCubic - css `cubic-bezier(0.55, 0.055, 0.675, 0.19)`
-* easeOutCubic - css `cubic-bezier(0.215, 0.61, 0.355, 1)`
-* easeInOutCubic - css `cubic-bezier(0.645, 0.045, 0.355, 1)`
-* easeInQuart - css `cubic-bezier(0.895, 0.03, 0.685, 0.22)`
-* easeOutQuart - css `cubic-bezier(0.165, 0.84, 0.44, 1)`
-* easeInOutQuart - css `cubic-bezier(0.77, 0, 0.175, 1)`
-* easeInQuint - css `cubic-bezier(0.755, 0.05, 0.855, 0.06)`
-* easeOutQuint - css `cubic-bezier(0.23, 1, 0.32, 1)`
-* easeInOutQuint - css `cubic-bezier(0.86, 0, 0.07, 1)`
-* easeInExpo - css `cubic-bezier(0.95, 0.05, 0.795, 0.035)`
-* easeOutExpo - css `cubic-bezier(0.19, 1, 0.22, 1)`
-* easeInOutExpo - css `cubic-bezier(1, 0, 0, 1)`
-* easeInCirc - css `cubic-bezier(0.6, 0.04, 0.98, 0.335)`
-* easeOutCirc - css `cubic-bezier(0.075, 0.82, 0.165, 1)`
-* easeInOutCirc - css `cubic-bezier(0.785, 0.135, 0.15, 0.86)`
-* easeInBack - css `cubic-bezier(0.6, -0.28, 0.735, 0.045)`
-* easeOutBack - css `cubic-bezier(0.175, 0.885, 0.32, 1.275)`
-* easeInOutBack - css `cubic-bezier(0.68, -0.55, 0.265, 1.55)`
-
-## JSAnimations
-Create your own instance in your component. To start the animation you call start and pass callback;
-```ts
-animations = new JSAnimations();
-...
-animations.start(from, to, timeInMs, AnimationUtils.ease).onFrame(this.onFrame);
-...
-```
-
-If you start another animation (with the same instance) before the previous ends.
-Then the from is not what you passed but current position of running animation.
-
-## Frame callback
-Frame callback is called each time animation progresses. It has two parameters.
-Parameter `value` is the current value of the animation between `from` and `to`.
-Parameter `percentage` is optional and it is the percentual progress of the animation
-between 0 and 1. The value is not linear, it is based on the ease function used in
-the animation.
-
-```ts
-frameCallback = (value: number, percentage?: number) => void;
-```
-
-## Timing Example
-Time | Call | Result
----|---|---
-`0ms` | `animations.start(0, 300, 3000, AnimationUtils.linear)` | starts animation from 0 to 300 3s long
-`1200ms` | `animations.start(300, 600, 3000, AnimationUtils.linear)` | starts animation from 120 to 600 3s long
-`4200ms` | `...` | animation finishes
-
-## How to mock
-To the root of your package add this file:
-```
-__mocks__/@24i/smartapps-bigscreenen-animations.ts
-```
-with this content
-```ts
-export { AnimationUtils } from '@24i/bigscreen-sdk/animations';
-export { JSAnimations } from '@24i/bigscreen-sdk/animations/mock';
-
-```
-
-Then you need to tell jest to use fake timers: `jest.useFakeTimers();`
-
-And after each `animations.start(...).onFrame(...)` you need to call `jest.runAllTimers();`
+---
+id: README
+title: Animations
+hide_title: true
+sidebar_label: Animations
+---
+
+# Animations
+This package is for easy implementation of JS animations.
+
+## AnimationUtils
+This part contains definitions for easing functions and calculations of easing functions.
+If you use it in combination with *JSAnimations* then you will need only static easing function members.
+* linear - css `linear`
+* ease - css `cubic-bezier(0.25, 0.1, 0.25, 1)`
+* easeInSine - css `cubic-bezier(0.47, 0, 0.745, 0.715)`
+* easeOutSine - css `cubic-bezier(0.39, 0.575, 0.565, 1)`
+* easeInOutSine - css `cubic-bezier(0.445, 0.05, 0.55, 0.95)`
+* easeInQuad - css `cubic-bezier(0.55, 0.085, 0.68, 0.53)`
+* easeOutQuad - css `cubic-bezier(0.25, 0.46, 0.45, 0.94)`
+* easeInOutQuad - css `cubic-bezier(0.455, 0.03, 0.515, 0.955)`
+* easeInCubic - css `cubic-bezier(0.55, 0.055, 0.675, 0.19)`
+* easeOutCubic - css `cubic-bezier(0.215, 0.61, 0.355, 1)`
+* easeInOutCubic - css `cubic-bezier(0.645, 0.045, 0.355, 1)`
+* easeInQuart - css `cubic-bezier(0.895, 0.03, 0.685, 0.22)`
+* easeOutQuart - css `cubic-bezier(0.165, 0.84, 0.44, 1)`
+* easeInOutQuart - css `cubic-bezier(0.77, 0, 0.175, 1)`
+* easeInQuint - css `cubic-bezier(0.755, 0.05, 0.855, 0.06)`
+* easeOutQuint - css `cubic-bezier(0.23, 1, 0.32, 1)`
+* easeInOutQuint - css `cubic-bezier(0.86, 0, 0.07, 1)`
+* easeInExpo - css `cubic-bezier(0.95, 0.05, 0.795, 0.035)`
+* easeOutExpo - css `cubic-bezier(0.19, 1, 0.22, 1)`
+* easeInOutExpo - css `cubic-bezier(1, 0, 0, 1)`
+* easeInCirc - css `cubic-bezier(0.6, 0.04, 0.98, 0.335)`
+* easeOutCirc - css `cubic-bezier(0.075, 0.82, 0.165, 1)`
+* easeInOutCirc - css `cubic-bezier(0.785, 0.135, 0.15, 0.86)`
+* easeInBack - css `cubic-bezier(0.6, -0.28, 0.735, 0.045)`
+* easeOutBack - css `cubic-bezier(0.175, 0.885, 0.32, 1.275)`
+* easeInOutBack - css `cubic-bezier(0.68, -0.55, 0.265, 1.55)`
+
+## JSAnimations
+Create your own instance in your component. To start the animation you call start and pass callback;
+```ts
+animations = new JSAnimations();
+...
+animations.start(from, to, timeInMs, AnimationUtils.ease).onFrame(this.onFrame);
+...
+```
+
+If you start another animation (with the same instance) before the previous ends.
+Then the from is not what you passed but current position of running animation.
+
+## Frame callback
+Frame callback is called each time animation progresses. It has two parameters.
+Parameter `value` is the current value of the animation between `from` and `to`.
+Parameter `percentage` is optional and it is the percentual progress of the animation
+between 0 and 1. The value is not linear, it is based on the ease function used in
+the animation.
+
+```ts
+frameCallback = (value: number, percentage?: number) => void;
+```
+
+## Timing Example
+Time | Call | Result
+---|---|---
+`0ms` | `animations.start(0, 300, 3000, AnimationUtils.linear)` | starts animation from 0 to 300 3s long
+`1200ms` | `animations.start(300, 600, 3000, AnimationUtils.linear)` | starts animation from 120 to 600 3s long
+`4200ms` | `...` | animation finishes
+
+## How to mock
+To the root of your package add this file:
+```
+__mocks__/@24i/smartapps-bigscreenen-animations.ts
+```
+with this content
+```ts
+export { AnimationUtils } from '@24i/bigscreen-sdk/animations';
+export { JSAnimations } from '@24i/bigscreen-sdk/animations/mock';
+
+```
+
+Then you need to tell jest to use fake timers: `jest.useFakeTimers();`
+
+And after each `animations.start(...).onFrame(...)` you need to call `jest.runAllTimers();`

package/packages/animations/src/AnimationUtils.ts

@@ -1,238 +1,238 @@
-/* eslint-disable no-magic-numbers */
-export type EasingType = number[];
-
-/**
- * @class AnimationUtils
- */
-export class AnimationUtils {
-    /**
-     * @member {EasingType} linear - linear easing function
-     * @static
-     */
-    static linear: EasingType = [];
-
-    /**
-     * @member {EasingType} ease - ease easing function (default CSS easing)
-     * @static
-     */
-    static ease: EasingType = [0.25, 0.1, 0.25, 1];
-
-    /**
-     * @member {EasingType} easeInSine - in sin easing function
-     * @static
-     */
-    static easeInSine: EasingType = [0.47, 0, 0.745, 0.715];
-
-    /**
-     * @member {EasingType} easeOutSine - out sin easing function
-     * @static
-     */
-    static easeOutSine: EasingType = [0.39, 0.575, 0.565, 1];
-
-    /**
-     * @member {EasingType} easeInOutSine - in out sin easing function
-     * @static
-     */
-    static easeInOutSine: EasingType = [0.445, 0.05, 0.55, 0.95];
-
-    /**
-     * @member {EasingType} easeInQuad - in quad easing function
-     * @static
-     */
-    static easeInQuad: EasingType = [0.55, 0.085, 0.68, 0.53];
-
-    /**
-     * @member {EasingType} easeOutQuad - out quad easing function
-     * @static
-     */
-    static easeOutQuad: EasingType = [0.25, 0.46, 0.45, 0.94];
-
-    /**
-     * @member {EasingType} easeInOutQuad - in out quad easing function
-     * @static
-     */
-    static easeInOutQuad: EasingType = [0.455, 0.03, 0.515, 0.955];
-
-    /**
-     * @member {EasingType} easeInCubic - in cubic easing function
-     * @static
-     */
-    static easeInCubic: EasingType = [0.55, 0.055, 0.675, 0.19];
-
-    /**
-     * @member {EasingType} easeOutCubic - out cubic easing function
-     * @static
-     */
-    static easeOutCubic: EasingType = [0.215, 0.61, 0.355, 1];
-
-    /**
-     * @member {EasingType} easeInOutCubic - in out cubic easing function
-     * @static
-     */
-    static easeInOutCubic: EasingType = [0.645, 0.045, 0.355, 1];
-
-    /**
-     * @member {EasingType} easeInQuart - in quart easing function
-     * @static
-     */
-    static easeInQuart: EasingType = [0.895, 0.03, 0.685, 0.22];
-
-    /**
-     * @member {EasingType} easeOutQuart - out quart easing function
-     * @static
-     */
-    static easeOutQuart: EasingType = [0.165, 0.84, 0.44, 1];
-
-    /**
-     * @member {EasingType} easeInOutQuart - in out quart easing function
-     * @static
-     */
-    static easeInOutQuart: EasingType = [0.77, 0, 0.175, 1];
-
-    /**
-     * @member {EasingType} easeInQuint - in quint easing function
-     * @static
-     */
-    static easeInQuint: EasingType = [0.755, 0.05, 0.855, 0.06];
-
-    /**
-     * @member {EasingType} easeOutQuint - out quint easing function
-     * @static
-     */
-    static easeOutQuint: EasingType = [0.23, 1, 0.32, 1];
-
-    /**
-     * @member {EasingType} easeInOutQuint - in out quint easing function
-     * @static
-     */
-    static easeInOutQuint: EasingType = [0.86, 0, 0.07, 1];
-
-    /**
-     * @member {EasingType} easeInExpo - in expo easing function
-     * @static
-     */
-    static easeInExpo: EasingType = [0.95, 0.05, 0.795, 0.035];
-
-    /**
-     * @member {EasingType} easeOutExpo - out expo easing function
-     * @static
-     */
-    static easeOutExpo: EasingType = [0.19, 1, 0.22, 1];
-
-    /**
-     * @member {EasingType} easeInOutExpo - in out expo easing function
-     * @static
-     */
-    static easeInOutExpo: EasingType = [1, 0, 0, 1];
-
-    /**
-     * @member {EasingType} easeInCirc - in circ easing function
-     * @static
-     */
-    static easeInCirc: EasingType = [0.6, 0.04, 0.98, 0.335];
-
-    /**
-     * @member {EasingType} easeOutCirc - out circ easing function
-     * @static
-     */
-    static easeOutCirc: EasingType = [0.075, 0.82, 0.165, 1];
-
-    /**
-     * @member {EasingType} easeInOutCirc - in out easing function
-     * @static
-     */
-    static easeInOutCirc: EasingType = [0.785, 0.135, 0.15, 0.86];
-
-    /**
-     * @member {EasingType} easeInBack - in back easing function
-     * @static
-     */
-    static easeInBack: EasingType = [0.6, -0.28, 0.735, 0.045];
-
-    /**
-     * @member {EasingType} easeOutBack - out back easing function
-     * @static
-     */
-    static easeOutBack: EasingType = [0.175, 0.885, 0.32, 1.275];
-
-    /**
-     * @member {EasingType} easeInOutBack - in out back easing function
-     * @static
-     */
-    static easeInOutBack: EasingType = [0.68, -0.55, 0.265, 1.55];
-
-    /**
-     * Returns value at given time percentage with percentage in easing function
-     * @param {number} min - minimal value
-     * @param {number} max - maximal value
-     * @param {number} percentage - percentage of time
-     * @param {EasingType} easingFunction - easing function for calculation
-     * @returns {Object} calculated value and percentual value in easing
-     */
-    xInTime(min: number, max: number, percentage: number, easingFunction: EasingType): {
-        value: number,
-        percentage: number,
-    } {
-        const percentageInEasing = this.getPercentageAt(percentage, easingFunction);
-        return {
-            value: this.linearInterpolation(min, max, percentageInEasing),
-            percentage: percentageInEasing,
-        };
-    }
-
-    /**
-     * Linear interpolation of two points (0 => a and 1 => b)
-     * @private
-     * @param {number} a - value at 0
-     * @param {number} b - value at 1
-     * @param {number} percentage - position of calculated value
-     * @returns {number} value at given percentage linearily interpolated
-     */
-    private linearInterpolation(a: number, b: number, percent: number): number {
-        return ((1 - percent) * a) + (percent * b);
-    }
-
-    /**
-     * Returns percentage value at given percentage time in easing function
-     * @private
-     * @param {number} percentage - percentage of time
-     * @param {EasingType} eF - easing function
-     * @returns {number} percentual value
-     */
-    private getPercentageAt(percentage: number, easingFunction: EasingType): number {
-        const eF = this.simplifyEF(easingFunction, percentage);
-        return this.linearInterpolation(eF[1], eF[3], percentage);
-    }
-
-    /**
-     * Simplifies the easing function to single degree
-     * @private
-     * @param {EasingType} eF - easing function to simplify
-     * @returns {EasingType} simplified easing function
-     */
-    private simplifyEF(eF: EasingType, percentage: number): EasingType {
-        let newEF: EasingType = [0, 0, ...eF, 1, 1];
-        while (newEF.length > 4) {
-            newEF = this.simplifyEFByDegree(newEF, percentage);
-        }
-        return newEF;
-    }
-
-    /**
-     * Simplifies easing function by one degree
-     * @private
-     * @throws Throws if easing function has odd length
-     * @param {EasingType} eF - easing function to simplify
-     * @returns {EasingType} simplified easing function
-     */
-    private simplifyEFByDegree(eF: EasingType, percentage: number): EasingType {
-        if (eF.length % 2 !== 0) {
-            throw new Error('Invalid easing function');
-        }
-        const newEF = [];
-        for (let i = 0; i < eF.length - 2; i += 1) {
-            newEF.push(this.linearInterpolation(eF[i], eF[i + 2], percentage));
-        }
-        return newEF;
-    }
-}
+/* eslint-disable no-magic-numbers */
+export type EasingType = number[];
+
+/**
+ * @class AnimationUtils
+ */
+export class AnimationUtils {
+    /**
+     * @member {EasingType} linear - linear easing function
+     * @static
+     */
+    static linear: EasingType = [];
+
+    /**
+     * @member {EasingType} ease - ease easing function (default CSS easing)
+     * @static
+     */
+    static ease: EasingType = [0.25, 0.1, 0.25, 1];
+
+    /**
+     * @member {EasingType} easeInSine - in sin easing function
+     * @static
+     */
+    static easeInSine: EasingType = [0.47, 0, 0.745, 0.715];
+
+    /**
+     * @member {EasingType} easeOutSine - out sin easing function
+     * @static
+     */
+    static easeOutSine: EasingType = [0.39, 0.575, 0.565, 1];
+
+    /**
+     * @member {EasingType} easeInOutSine - in out sin easing function
+     * @static
+     */
+    static easeInOutSine: EasingType = [0.445, 0.05, 0.55, 0.95];
+
+    /**
+     * @member {EasingType} easeInQuad - in quad easing function
+     * @static
+     */
+    static easeInQuad: EasingType = [0.55, 0.085, 0.68, 0.53];
+
+    /**
+     * @member {EasingType} easeOutQuad - out quad easing function
+     * @static
+     */
+    static easeOutQuad: EasingType = [0.25, 0.46, 0.45, 0.94];
+
+    /**
+     * @member {EasingType} easeInOutQuad - in out quad easing function
+     * @static
+     */
+    static easeInOutQuad: EasingType = [0.455, 0.03, 0.515, 0.955];
+
+    /**
+     * @member {EasingType} easeInCubic - in cubic easing function
+     * @static
+     */
+    static easeInCubic: EasingType = [0.55, 0.055, 0.675, 0.19];
+
+    /**
+     * @member {EasingType} easeOutCubic - out cubic easing function
+     * @static
+     */
+    static easeOutCubic: EasingType = [0.215, 0.61, 0.355, 1];
+
+    /**
+     * @member {EasingType} easeInOutCubic - in out cubic easing function
+     * @static
+     */
+    static easeInOutCubic: EasingType = [0.645, 0.045, 0.355, 1];
+
+    /**
+     * @member {EasingType} easeInQuart - in quart easing function
+     * @static
+     */
+    static easeInQuart: EasingType = [0.895, 0.03, 0.685, 0.22];
+
+    /**
+     * @member {EasingType} easeOutQuart - out quart easing function
+     * @static
+     */
+    static easeOutQuart: EasingType = [0.165, 0.84, 0.44, 1];
+
+    /**
+     * @member {EasingType} easeInOutQuart - in out quart easing function
+     * @static
+     */
+    static easeInOutQuart: EasingType = [0.77, 0, 0.175, 1];
+
+    /**
+     * @member {EasingType} easeInQuint - in quint easing function
+     * @static
+     */
+    static easeInQuint: EasingType = [0.755, 0.05, 0.855, 0.06];
+
+    /**
+     * @member {EasingType} easeOutQuint - out quint easing function
+     * @static
+     */
+    static easeOutQuint: EasingType = [0.23, 1, 0.32, 1];
+
+    /**
+     * @member {EasingType} easeInOutQuint - in out quint easing function
+     * @static
+     */
+    static easeInOutQuint: EasingType = [0.86, 0, 0.07, 1];
+
+    /**
+     * @member {EasingType} easeInExpo - in expo easing function
+     * @static
+     */
+    static easeInExpo: EasingType = [0.95, 0.05, 0.795, 0.035];
+
+    /**
+     * @member {EasingType} easeOutExpo - out expo easing function
+     * @static
+     */
+    static easeOutExpo: EasingType = [0.19, 1, 0.22, 1];
+
+    /**
+     * @member {EasingType} easeInOutExpo - in out expo easing function
+     * @static
+     */
+    static easeInOutExpo: EasingType = [1, 0, 0, 1];
+
+    /**
+     * @member {EasingType} easeInCirc - in circ easing function
+     * @static
+     */
+    static easeInCirc: EasingType = [0.6, 0.04, 0.98, 0.335];
+
+    /**
+     * @member {EasingType} easeOutCirc - out circ easing function
+     * @static
+     */
+    static easeOutCirc: EasingType = [0.075, 0.82, 0.165, 1];
+
+    /**
+     * @member {EasingType} easeInOutCirc - in out easing function
+     * @static
+     */
+    static easeInOutCirc: EasingType = [0.785, 0.135, 0.15, 0.86];
+
+    /**
+     * @member {EasingType} easeInBack - in back easing function
+     * @static
+     */
+    static easeInBack: EasingType = [0.6, -0.28, 0.735, 0.045];
+
+    /**
+     * @member {EasingType} easeOutBack - out back easing function
+     * @static
+     */
+    static easeOutBack: EasingType = [0.175, 0.885, 0.32, 1.275];
+
+    /**
+     * @member {EasingType} easeInOutBack - in out back easing function
+     * @static
+     */
+    static easeInOutBack: EasingType = [0.68, -0.55, 0.265, 1.55];
+
+    /**
+     * Returns value at given time percentage with percentage in easing function
+     * @param {number} min - minimal value
+     * @param {number} max - maximal value
+     * @param {number} percentage - percentage of time
+     * @param {EasingType} easingFunction - easing function for calculation
+     * @returns {Object} calculated value and percentual value in easing
+     */
+    xInTime(min: number, max: number, percentage: number, easingFunction: EasingType): {
+        value: number,
+        percentage: number,
+    } {
+        const percentageInEasing = this.getPercentageAt(percentage, easingFunction);
+        return {
+            value: this.linearInterpolation(min, max, percentageInEasing),
+            percentage: percentageInEasing,
+        };
+    }
+
+    /**
+     * Linear interpolation of two points (0 => a and 1 => b)
+     * @private
+     * @param {number} a - value at 0
+     * @param {number} b - value at 1
+     * @param {number} percentage - position of calculated value
+     * @returns {number} value at given percentage linearily interpolated
+     */
+    private linearInterpolation(a: number, b: number, percent: number): number {
+        return ((1 - percent) * a) + (percent * b);
+    }
+
+    /**
+     * Returns percentage value at given percentage time in easing function
+     * @private
+     * @param {number} percentage - percentage of time
+     * @param {EasingType} eF - easing function
+     * @returns {number} percentual value
+     */
+    private getPercentageAt(percentage: number, easingFunction: EasingType): number {
+        const eF = this.simplifyEF(easingFunction, percentage);
+        return this.linearInterpolation(eF[1], eF[3], percentage);
+    }
+
+    /**
+     * Simplifies the easing function to single degree
+     * @private
+     * @param {EasingType} eF - easing function to simplify
+     * @returns {EasingType} simplified easing function
+     */
+    private simplifyEF(eF: EasingType, percentage: number): EasingType {
+        let newEF: EasingType = [0, 0, ...eF, 1, 1];
+        while (newEF.length > 4) {
+            newEF = this.simplifyEFByDegree(newEF, percentage);
+        }
+        return newEF;
+    }
+
+    /**
+     * Simplifies easing function by one degree
+     * @private
+     * @throws Throws if easing function has odd length
+     * @param {EasingType} eF - easing function to simplify
+     * @returns {EasingType} simplified easing function
+     */
+    private simplifyEFByDegree(eF: EasingType, percentage: number): EasingType {
+        if (eF.length % 2 !== 0) {
+            throw new Error('Invalid easing function');
+        }
+        const newEF = [];
+        for (let i = 0; i < eF.length - 2; i += 1) {
+            newEF.push(this.linearInterpolation(eF[i], eF[i + 2], percentage));
+        }
+        return newEF;
+    }
+}