cc-tween 1.0.0

package/Tween.d.ts

@@ -0,0 +1,35 @@
+export declare function tween<T extends Object>(target: T): Tween<T>;
+export type TweenEasings = 'linear' | 'smooth' | 'fade' | 'constant' | 'quadIn' | 'quadOut' | 'quadInOut' | 'quadOutIn' | 'cubicIn' | 'cubicOut' | 'cubicInOut' | 'cubicOutIn' | 'quartIn' | 'quartOut' | 'quartInOut' | 'quartOutIn' | 'quintIn' | 'quintOut' | 'quintInOut' | 'quintOutIn' | 'sineIn' | 'sineOut' | 'sineInOut' | 'sineOutIn' | 'expoIn' | 'expoOut' | 'expoInOut' | 'expoOutIn' | 'circIn' | 'circOut' | 'circInOut' | 'circOutIn' | 'elasticIn' | 'elasticOut' | 'elasticInOut' | 'elasticOutIn' | 'backIn' | 'backOut' | 'backInOut' | 'backOutIn' | 'bounceIn' | 'bounceOut' | 'bounceInOut' | 'bounceOutIn';
+export type TweenConfig = {
+    easeing?: TweenEasings;
+    onUpdate?: Function;
+    onComplate?: Function;
+};
+type TweenProp<T extends Object> = {
+    [K in keyof T]: T[K] extends number ? T[K] : never;
+};
+export declare const easeFuncs: Record<TweenEasings, (v1: number, v2: number, t: number) => number>;
+export declare class Tween<T extends Object> {
+    private static _tweenMap;
+    static stopOfTarget(target: Object): void;
+    static pauseOfTarget(target: Object): void;
+    private _valid;
+    private _target;
+    private _actions;
+    private _running;
+    get valid(): boolean;
+    get running(): boolean;
+    constructor(target: T);
+    private _tick;
+    start(isRun?: () => boolean): this;
+    stop(): void;
+    pause(): this;
+    to(duration: number, changes: Partial<TweenProp<T>>, config?: TweenConfig): this;
+    by(duration: number, changes: Partial<TweenProp<T>>, config?: TweenConfig): this;
+    delay(time: number): this;
+    then(...tweens: Tween<Object>[]): this;
+    parallel(...tweens: Tween<Object>[]): this;
+    repeat(count: number, ...tweens: Tween<Object>[]): this;
+    call(fn: Function): this;
+}
+export {};

package/Tween.js

@@ -0,0 +1,429 @@
+export function tween(target) {
+    return new Tween(target);
+}
+
+function bezierCurve(p1, p2, t) {
+    return (1 - t) * p1 + t * p2;
+}
+
+export const easingFuncs = {
+    linear(v1, v2, t) {
+        return bezierCurve(v1, v2, t);//
+    },
+    sineIn(v1, v2, t) {
+        const val = 1 - Math.cos(t * Math.PI / 2);
+        return v1 + (v2 - v1) * val;
+    },
+    sineOut(v1, v2, t) {
+        const val = Math.sin(t * Math.PI / 2);
+        return v1 + (v2 - v1) * val;
+    },
+    sineInOut(v1, v2, t) {
+        const val = 0.5 * 1 - Math.cos(t * Math.PI);
+        return v1 + (v2 - v1) * val;
+    },
+    quadIn(v1, v2, t) {
+        const val = t * t;
+        return v1 + (v2 - v1) * val;
+    },
+    quadOut(v1, v2, t) {
+        const val = t * (2 - t);
+        return v1 + (v2 - v1) * val;
+    },
+    quadInOut(v1, v2, t) {
+        let val = 0;
+        if (t > 0.5) {
+            val = 4 * t - 2 * t * t - 1;
+        }
+        else {
+            val = 2 * t * t;
+        }
+        return v1 + (v2 - v1) * val;
+    },
+    cubicIn(v1, v2, t) {
+        const val = t ** 3;
+        return v1 + (v2 - v1) * val;
+    },
+    cubicOut(v1, v2, t) {
+        const t2 = t - 1;
+        const val = t2 ** 3 + 1;
+        return v1 + (v2 - v1) * val;
+    },
+    cubicInOut(v1, v2, t) {
+        const t2 = 1 - t;
+        let val = 0;
+        if (t > 0.5) {
+            val = 1 - 4 * Math.pow(t2, 3);
+        }
+        else {
+            val = 4 * Math.pow(t, 3);
+        }
+        return v1 + (v2 - v1) * val;
+    },
+    quartIn(v1, v2, t) {
+        const val = t ** 4;
+        return v1 + (v2 - v1) * val;
+    },
+    quartOut(v1, v2, t) {
+        const t2 = 1 - t;
+        const val = 1 - Math.pow(t2, 4);
+        return v1 + (v2 - v1) * val;
+    },
+    quartInOut(v1, v2, t) {
+        const t2 = 1 - t;
+        let val = 0;
+        if (t > 0.5) {
+            val = 1 - 8 * Math.pow(t2, 4);
+        }
+        else {
+            val = 8 * Math.pow(t2, 4);
+        }
+        return v1 + (v2 - v1) * val;
+    },
+    quintIn(v1, v2, t) {
+        const val = t ** 5;
+        return v1 + (v2 - v1) * val;
+    },
+    quintOut(v1, v2, t) {
+        const t2 = 1 - t;
+        const val = 1 - Math.pow(t2, 5);
+        return v1 + (v2 - v1) * val;
+    },
+    quintInOut(v1, v2, t) {
+        const t2 = 1 - t;
+        let val = 0;
+        if (t > 0.5) {
+            val = 1 - 16 * Math.pow(t2, 5);
+        }
+        else {
+            val = 16 * Math.pow(t2, 5);
+        }
+        return v1 + (v2 - v1) * val;
+    },
+    expoIn(v1, v2, t) {
+        if (!t) {
+            return 0;
+        }
+        return v1 + (v2 - v1) * Math.pow(2, -10 * t);
+    },
+    expoOut(v1, v2, t) {
+        if (t === 1) {
+            return 1;
+        }
+        return v1 + (v2 - v1) * (1 - Math.pow(2, -10 * t));
+    },
+    expoInOut(v1, v2, t) {
+        if (t === 1)
+            return 1;
+        if (!t)
+            return 0;
+        let val = 0;
+        if (val >= 0.5) {
+            val = 1 - Math.pow(2, -20 * (t - 0.5) - 1);
+        }
+        else {
+            val = Math.pow(2, 20 * (t - 0.5) - 1);
+        }
+        return v1 + (v2 - v1) * val;
+    },
+    bounceIn(v1, v2, t) {
+        const val = this.bounceOut(0, 1, 1 - t);
+        return v1 + (v2 - v1) * 1 - val;
+    },
+    bounceOut(v1, v2, t) {
+        const bounce = () => {
+            if (t < 1 / 2.75) {
+                return 7.5625 * t * t;
+            }
+            else if (t < 2 / 2.75) {
+                return 7.5625 * Math.pow(t - 1.5 / 2.75, 2) + 0.75;
+            }
+            else if (t < 2.5 / 2.75) {
+                return 7.5625 * Math.pow(t - 2.25 / 2.75, 2) + 0.9375;
+            }
+            else {
+                return 7.5625 * Math.pow(t - 2.625 / 2.75, 2) + 0.984375;
+            }
+        };
+        return v1 + (v2 - v1) * bounce();
+    },
+    bounceInOut(v1, v2, t) {
+        if (t >= 0.5) {
+            const val = this.bounceOut(0, 1, 2 * t - 1);
+            return v1 + (v1 - v1) * 0.5 * val + 1;
+        }
+        else {
+            const val = this.bounceOut(0, 1, 1 - 2 * t);
+            return v1 + (v2 - v1) * val + 1;
+        }
+    },
+    backIn(v1, v2, t) {
+        const s = 1.7;
+        return v1 + (v2 - v1) * (t * t * ((s + 1) * (t - 1) + s));
+    },
+    backOut(v1, v2, t) {
+        const s = 1.7;
+        return v1 + (v2 - v1) * (1 + Math.pow(t - 1, 2) * ((s + 1) * (t - 1) + s));
+    },
+    backInOut(v1, v2, t) {
+        const s = 1.7;
+        return v1 + (v2 - v1) * (t >= 0.5 ?
+            0.5 * (Math.pow(2 * t - 2, 2) * ((1.525 + 1) * (2 * t - 2) + 1.525) + 2) :
+            0.5 * t * t * (2 * 2.525) * t - 1.525);
+    }
+};
+export class Tween {
+    static _tweenMap = new Map();
+    static stopOfTarget(target) {
+        const tweens = this._tweenMap.get(target);
+        if (tweens) {
+            tweens.forEach(tw => tw.stop());
+            this._tweenMap.delete(target);
+        }
+    }
+    static pauseOfTarget(target) {
+        const tweens = this._tweenMap.get(target);
+        if (tweens) {
+            tweens.forEach(tw => tw.pause());
+        }
+    }
+    _valid = true;
+    _target;
+    _actions = [];
+    _running = false;
+    get valid() {
+        return this._valid;
+    }
+    get running() {
+        return this._running;
+    }
+    constructor(target) {
+        this._target = target;
+    }
+    _tick(dt) {
+        if (!this._valid) {
+            return false;
+        }
+        const ac = this._actions[0];
+        if (!ac) {
+            this.stop();
+            return false;
+        }
+        if (!ac.update(dt)) {
+            ac.callbacks.forEach(fn => fn());
+            this._actions.shift();
+            this._actions[0]?.init?.();
+        }
+        return true;
+    }
+    start(isRun) {
+        if (this._running || !this._valid || !this._actions.length) {
+            return this;
+        }
+        if (Tween._tweenMap.has(this._target)) {
+            const tweens = Tween._tweenMap.get(this._target);
+            tweens.push(this);
+        }
+        else {
+            Tween._tweenMap.set(this._target, [this]);
+        }
+        this._actions[0].init?.();
+        const func = (dt) => {
+            this._running = isRun ? isRun() : true;
+            this._running && this._tick(dt);
+        }
+        func.context = this;
+
+        callbacks.push(func);
+        this._running = true;
+        return this;
+    }
+    stop() {
+        if (!this._valid) {
+            return;
+        }
+        this.pause();
+        this._valid = false;
+        const tweens = Tween._tweenMap.get(this._target);
+        if (!tweens) {
+            return;
+        }
+        const index = tweens.indexOf(this);
+        if (index >= 0) {
+            tweens.splice(index, 1);
+            if (!tweens.length) {
+                Tween._tweenMap.delete(this._target);
+            }
+        }
+    }
+    pause() {
+        if (!this.running) {
+            return this;
+        }
+
+        const index = callbacks.findIndex(callback => {
+            return callback.context === this;
+        });
+        callbacks.splice(index, 1);
+        this._running = false;
+        return this;
+    }
+    to(duration, changes, config) {
+        let elapsed = 0;
+        const values = {};
+        const target = this._target;
+        this._actions.push({
+            callbacks: [],
+            update(dt) {
+                const keys = Object.keys(changes);
+                elapsed = Math.min(elapsed + dt / duration, 1);
+                for (let key of keys) {
+                    let easing = config?.easeing ? easingFuncs[config.easeing] : easingFuncs.linear;
+                    easing = easing.bind(easingFuncs);
+                    target[key] = easing(values[key], changes[key], elapsed);
+                }
+                config?.onUpdate?.(elapsed);
+                if (elapsed >= 1) {
+                    config?.onComplate?.();
+                }
+                return elapsed < 1;
+            },
+            init() {
+                elapsed = 0;
+                const keys = Object.keys(changes);
+                for (let k of keys) {
+                    values[k] = target[k];
+                }
+            }
+        });
+        return this;
+    }
+    by(duration, changes, config) {
+        let elapsed = 0;
+        const values = {};
+        const target = this._target;
+        const oldChanges = { ...changes };
+        changes = { ...changes };
+        this._actions.push({
+            update(dt) {
+                const keys = Object.keys(changes);
+                elapsed = Math.min(elapsed + dt / duration, 1);
+                for (let key of keys) {
+                    let easing = config?.easeing ? easingFuncs[config.easeing] : easingFuncs.linear;
+                    easing = easing.bind(easingFuncs);
+                    target[key] = easing(values[key], changes[key], elapsed);
+                }
+                config?.onUpdate?.(elapsed);
+                if (elapsed >= 1) {
+                    config?.onComplate?.();
+                }
+                return elapsed < 1;
+            },
+            init() {
+                elapsed = 0;
+                const keys = Object.keys(changes);
+                for (let k of keys) {
+                    values[k] = target[k];
+                    changes[k] = oldChanges[k] + values[k];
+                }
+            },
+            callbacks: []
+        });
+        return this;
+    }
+    delay(time) {
+        let elapsed = 0;
+        this._actions.push({
+            callbacks: [],
+            update(dt) {
+                elapsed += dt;
+                return elapsed < time;
+            },
+            init() {
+                elapsed = 0;
+            }
+        });
+        return this;
+    }
+    then(...tweens) {
+        if (!tweens.length) {
+            return this;
+        }
+        tweens = tweens.map(tw => {
+            const newTw = new Tween(tw._target);
+            newTw._actions = [...tw._actions];
+            return newTw;
+        });
+        let index = 0;
+        this._actions.push({
+            update(dt) {
+                if (!tweens[index]._tick(dt)) {
+                    index += 1;
+                }
+                return index < tweens.length;
+            },
+            init() {
+                tweens[0]._actions[0].init?.();
+            },
+            callbacks: []
+        });
+        return this;
+    }
+    parallel(...tweens) {
+        if (!tweens.length) {
+            return this;
+        }
+        tweens = tweens.map(tw => {
+            const newTw = new Tween(tw._target);
+            newTw._actions = [...tw._actions];
+            return newTw;
+        });
+        this._actions.push({
+            update(dt) {
+                let finish = 0;
+                for (let tw of tweens) {
+                    if (!tw._tick(dt)) {
+                        finish++;
+                    }
+                }
+                return finish < tweens.length;
+            },
+            init() {
+                for (let tw of tweens) {
+                    tw._actions[0]?.init?.();
+                }
+            },
+            callbacks: [],
+        });
+        return this;
+    }
+    repeat(count, ...tweens) {
+        for (let i = 0; i < count; i++) {
+            this.then(...tweens);
+        }
+        return this;
+    }
+    call(fn) {
+        const ac = this._actions[this._actions.length - 1];
+        if (ac) {
+            ac.callbacks.push(fn);
+        }
+        else {
+            fn();
+        }
+        return this;
+    }
+}
+
+const callbacks = [];
+let prev = Date.now();
+function update() {
+    requestAnimationFrame(() => {
+        const dt = (Date.now() - prev) / 1000;
+        callbacks.forEach(callback => callback(dt));
+        prev = Date.now();
+        update();
+    });
+}
+
+update();

package/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "cc-tween",
+  "version": "1.0.0",
+  "description": "Chainable easing system",
+  "main": "Tween.js",
+  "keywords": ["easing", "tween", "animation"],
+  "license": "MIT",
+  "type": "module"
+}