From 2abe94af314bac3fc912b47a0f3d6030c0e94b33 Mon Sep 17 00:00:00 2001 From: MeowcaTheoRange <58280776+MeowcaTheoRange@users.noreply.github.com> Date: Mon, 8 Aug 2022 11:51:18 -0500 Subject: [PATCH] Create tween.js --- tween.js | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 tween.js diff --git a/tween.js b/tween.js new file mode 100644 index 0000000..2c4d7b8 --- /dev/null +++ b/tween.js @@ -0,0 +1,98 @@ +/** + * @callback onUpdate - What to run every time the tween updates. + * @param {number} frame + * @param {number} second + * @param {number} percent + * @param {number} easePercent + * @param {number} value + */ +/** + * @callback onFinish - What to run when the tween ends. + * @param {Object} time - The properties that defined how to animate this object. + * @param {Object} config - The properties that defined how to style this animation. + * @param {number} [loops] - How many times the tween has looped. + */ +export function KBTween(k) { + const tweentypes = { + NORMAL: 0, + FOREVER: 2, + CONTINUE: 4, + PINGPONG: 8, + __NOOP: (x) => {return x;} + }; + /** + * @function tween + * Creates a tween to animate properties of an object. + * @param {string} object - The object with the properties being animated. + * @param {string[]} prop - The properties that will be animated. + * @param {Object} time - The properties that define how to animate the object. + * @param {number} time.from - The initial value to animate from. + * @param {number} time.to - The new value to animate to. + * @param {number} time.time - The time it takes to animate the object. + * @param {number} [time.type] - Defines how the animation works. + * @param {Object} [config] - The properties that define how to style the animation. + * @param {Function} [config.ease] - The ease and smoothness of the animation. + * @param {Function} [config.onStart] - What to run when the tween starts. + * @param {onUpdate} [config.onUpdate] - What to run every time the tween updates. + * @param {onFinish} [config.onFinish] - What to run when the tween ends. + * @returns {Function} - End the tween manually. + */ + const tween = (object, prop, time, config) => { + time.type = time.type ?? 0; + var config = config ?? {}; + config.ease = config.ease ?? tweentypes.__NOOP; + config.onStart = config.onStart ?? tweentypes.__NOOP; + config.onUpdate = config.onUpdate ?? tweentypes.__NOOP; + config.onFinish = config.onFinish ?? tweentypes.__NOOP; + + var frame = 0; + var startTime = k.time(); + var loops = 0; + config.onStart(); + var updateFunc = k.onUpdate(() => { + var curTime = k.time() - startTime; + var curPercent = curTime / time.time; + for (let i in prop) { + object[prop[i]] = k.lerp(time.from, time.to, config.ease(curPercent)); + } + if (curPercent >= 1) { + switch (time.type) { + case 0: + for (let i in prop) { + object[prop[i]] = time.to; + } + updateFunc(); + break; + case 2: + startTime = k.time(); + break; + case 4: + break; + case 8: + var x = time.from; + time.from = time.to; + time.to = x; + startTime = k.time(); + break; + } + loops++; + config.onFinish(time, config, loops); + } + config.onUpdate(frame, curTime, curPercent, config.ease(curPercent), k.lerp(time.from, time.to, config.ease(curPercent))); + frame++; + }); + return (clean) => { + if (!clean) { + for (let i in prop) { + object[prop[i]] = time.to; + } + } + time.type = 0; + updateFunc(); + } + }; + return { + tweentypes: tweentypes, + tween: tween + }; +}