From 181ff66e890676f9add72d85cb7b5484151a012e Mon Sep 17 00:00:00 2001 From: MeowcaTheoRange Date: Mon, 8 Aug 2022 17:02:00 -0500 Subject: [PATCH] now with more not kaboom! --- tween_nokaboom.js | 106 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 tween_nokaboom.js diff --git a/tween_nokaboom.js b/tween_nokaboom.js new file mode 100644 index 0000000..f55a642 --- /dev/null +++ b/tween_nokaboom.js @@ -0,0 +1,106 @@ +/** + * @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 lerp(a, b, t) { + return (1 - t) * a + t * b; + } + /** + * @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 = performance.now() / 1000; + var loops = 0; + var loopIsDone = true; + config.onStart(); + var updateFunc = () => { + var curTime = (performance.now() / 1000) - startTime; + var curPercent = curTime / time.time; + for (let i in prop) { + object[prop[i]] = 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; + } + loopIsDone = false; + break; + case 2: + startTime = performance.now() / 1000; + break; + case 4: + break; + case 8: + var x = time.from; + time.from = time.to; + time.to = x; + startTime = performance.now() / 1000; + break; + } + loops++; + config.onFinish(time, config, loops); + } + config.onUpdate(frame, curTime, curPercent, config.ease(curPercent), lerp(time.from, time.to, config.ease(curPercent))); + frame++; + if (loopIsDone) { + window.requestAnimationFrame(updateFunc); + } + }; + window.requestAnimationFrame(updateFunc); + return (clean) => { + if (!clean) { + for (let i in prop) { + object[prop[i]] = time.to; + } + } + time.type = 0; + loopIsDone = false; + } + }; + return { + tweentypes: tweentypes, + tween: tween + }; +}