2344234

Author: alabsi91

README.md

@@ -6,6 +6,6 @@
 
 🔸Matches client's monitor refresh rate.
 
-🔸Contains most popular easing timing functions.
+🔸Contains the most popular easing timing functions.
 
-### 📖 [View the documentation site](https://alabsi91.github.io/animare/)
+### 📖 [View the documentation site](https://alabsi91.github.io/animare/) 📖

package.json

@@ -1,6 +1,6 @@
 {
   "name": "animare",
-  "version": "0.0.0-beta.0",
+  "version": "0.0.0-beta.2",
   "description": "Light animation library based on requestanimationframe ",
   "author": "Ahmed Alabsi <alabsi91@gmail.com",
   "license": "MIT",

src/animare.ts

@@ -1,6 +1,7 @@
 export { colorToArr } from './methods/colorToRgbArray';
+export { organize } from './methods/organize';
 export { ease } from './methods/ease';
 
 export { animare } from './methods/animare';
 import animare from './methods/animare';
-export default animare;
+export default animare;

src/methods/animare.ts

@@ -1,10 +1,10 @@
-import { animareOptions, cbInfo, DIRECTION, Ilisteners, returnedObject, TIMELINE_TYPE } from './types';
+import { animareOnUpdate, animareOptions, cbInfo, DIRECTION, Ilisteners, returnedObject, TIMELINE_TYPE } from './types';
 
-// todo fix value's default when waiting for delay
+///// todo fix value's default when waiting for delay
 // todo react useAnimare hook
 // todo play , reverse and stop at progress
 
-export function animare(options: animareOptions, callback: (values: number[], info: cbInfo) => void) {
+export function animare(options: animareOptions, callback: animareOnUpdate) {
   if (typeof options !== 'object' || Array.isArray(options)) throw new Error('animare: expects an object as the first argument.');
   options.to = Array.isArray(options.to) ? options.to : [options.to];
   const userInput = { ...options };
@@ -104,7 +104,7 @@ export function animare(options: animareOptions, callback: (values: number[], in
   // finished animations indexes will be stored here.
   const finished = new Set<number>();
   // used to fill the animation value when it's finished and other animations still playing to keep the passed array of values at the same length
-  const lastKnownValue = [...options.to];
+  const lastKnownValue: number[] = [];
 
   const timeline = [
     {

src/methods/organize.ts

@@ -0,0 +1,64 @@
+import { DIRECTION } from "./types";
+
+type organizeOptions = {
+  from?: number;
+  to: number;
+  duration?: number;
+  delay?: number;
+  delayOnce?: boolean;
+  repeat?: number;
+  direction?: keyof typeof DIRECTION;
+  ease?: (x: number) => number;
+};
+
+/**
+ * - A helper function to organize the options for the animation.
+ * @param ob - options: `{name: {from: number, to: number, ...}, ...}`
+ * @param defaults - changes the default values for each option.
+ */
+export function organize<T extends { [key in keyof T]: organizeOptions }>(ob: T, defaults: Omit<organizeOptions, 'to'> = {}) {
+  defaults.from ??= 0;
+  defaults.duration ??= 350;
+  defaults.delay ??= 0;
+  defaults.delayOnce ??= false;
+  defaults.repeat ??= 0;
+  defaults.direction ??= 'normal';
+  defaults.ease ??= x => x;
+
+  const ent = Object.entries<organizeOptions>(ob),
+    from = ent.map(e => e[1].from ?? defaults.from),
+    to = ent.map(e => e[1].to),
+    duration = ent.map(e => e[1].duration ?? defaults.duration),
+    delay = ent.map(e => e[1].delay ?? defaults.delay),
+    delayOnce = ent.map(e => e[1].delayOnce ?? defaults.delayOnce),
+    repeat = ent.map(e => e[1].repeat ?? defaults.repeat),
+    direction = ent.map(e => e[1].direction ?? defaults.direction),
+    ease = ent.map(e => e[1].ease ?? defaults.ease),
+    names = Object.keys(ob) as (keyof T)[];
+
+  const get = (animareArray: number[]) => {
+    const res: Record<keyof T, number> = Object.create(null);
+    for (let i = 0; i < animareArray.length; i++) res[names[i]] = animareArray[i];
+    return res;
+  };
+
+  const patch = (patchOb?: Partial<T>) => organize(Object.assign({}, ob, patchOb));
+
+  return {
+    from,
+    to,
+    duration,
+    delay,
+    delayOnce,
+    repeat,
+    direction,
+    ease,
+    /**
+     * - Takes an array of numbers and retruns an object
+     * - with the same keys as the original object, but with the values of the array.
+     */
+    get,
+    /** - Creates a new copy with patched options.*/
+    patch,
+  };
+}

src/methods/types.ts

@@ -288,3 +288,5 @@ export interface Ilisteners {
   onFinish: { id: string; cb: Function }[];
   onProgress: { at: number | string; id: string; cb: Function }[];
 }
+
+export type animareOnUpdate = (values: number[], info: cbInfo) => void;