async/ non-blocking tween calculation
HannesGitH opened this issue · 3 comments
HannesGitH commented
since the tween calculation is very slow, it would be nice if it was async, ran in another web-worker
thednp commented
This feature is real cool indeed, just I don't have the time to develop.
HannesGitH commented
understandable :)
i dont have time to dig through this package, but i managed to tuck together an fromToAsync
without touching your code ;)
interface.ts
export interface TweenResultMessage {
error?: String;
data?: KUTE.Tween;
}
export interface TweenInputMessage {
elem: Element;
from: KUTE.tweenProps;
to: KUTE.tweenProps;
opts?: KUTE.tweenOptions;
}
morphWorker.ts
import KUTE from 'kute.js';
import type {TweenInputMessage, TweenResultMessage} from './interface';
onmessage = (e:MessageEvent<TweenInputMessage>):void => {
const {elem, from, to, opts} = e.data;
try {
const tween = KUTE.fromTo(elem, from, to, opts)
postMessage({data: tween} as TweenResultMessage);
} catch (error) {
postMessage({error} as TweenResultMessage);
}
};
export {};
KUTEAsync.ts
import TweenCalculationWorker from "./morphWorker?worker";
import type {TweenInputMessage, TweenResultMessage} from './interface';
import type KUTE from "kute.js";
const fromToAsync = (elem:Element, from:KUTE.tweenProps, to:KUTE.tweenProps, opts:KUTE.tweenOptions):Promise<KUTE.Tween> => {
const worker = new TweenCalculationWorker();
worker.postMessage({elem, from, to, opts} as TweenInputMessage);
return new Promise((resolve, reject) => {
worker.onmessage = (e:MessageEvent<TweenResultMessage>) => {
const m = e.data;
if (m.error) reject(m.error);
else resolve(m.data);
}
});
}
export default {fromToAsync};
Usage
import KUTEA from 'KUTEAsync'
const tween = await KUTEA.fromToAsync(...args);
maybe someone in this future can use this as a basis to actually implement this in KUTE
thednp commented
Wow you are awesome! Thanks for that!