From c7cf6e2c77430ed46e07210c3bc7d5bd1861b7bd Mon Sep 17 00:00:00 2001 From: Joe Pea Date: Sun, 1 Aug 2021 22:43:57 -0700 Subject: [PATCH 1/2] Easing.generateExponential() Given a value of 300, this is very close Easing.Exponential, but it will hit 0 when amount is 0, therefore being an alternative to Exponential to avoid the jump issue mentioned in https://github.com/tweenjs/tween.js/issues/116. --- package.json | 1 - src/Easing.ts | 60 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 60 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 6122470c..f15533c2 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,6 @@ "tween", "interpolation" ], - "dependencies": {}, "scripts": { "dev": "(npm run tsc-watch -- --preserveWatchOutput & p1=$!; npm run rollup-build -- --watch & p2=$!; wait $p1 $p2)", "build": "rimraf dist .tmp && node scripts/write-version.js && npm run tsc && npm run rollup-build", diff --git a/src/Easing.ts b/src/Easing.ts index 9639783d..b528d390 100644 --- a/src/Easing.ts +++ b/src/Easing.ts @@ -219,6 +219,66 @@ const Easing = { }, } }, + generateExponential: function ( + // A value of 300 is makes the curve very close to Exponential with its value of 1024. + base = 300, + ): { + In(amount: number): number + Out(amount: number): number + InOut(amount: number): number + } { + // https://www.desmos.com/calculator/pioplwo3zq + + if (base <= 0) { + console.warn( + 'base should be larger than 0. You might like to try between 20 and 400, maybe more. Setting a default value of 300.', + ) + base = 300 + } + + function In(amount: number): number { + // Start similar to Exponential + let expo = base ** (amount - 1) + + // adjust so it hits 0 when amount is 0 + expo = expo - expo * (1 - amount) + + return expo + } + + function Out(amount: number): number { + // translate X by 1 + amount = amount + 1 + + // Similar to In, but negate power to make the graph have a negative slope instead of positive. + let expo = base ** -(amount - 1) + + // adjust so it hits 1 when amount is 1 + expo = expo - expo * -(1 - amount) + + // Flip it upside down, move it up by 1. + return -expo + 1 + } + + function InOut(amount: number): number { + amount *= 2 + + if (amount < 1) return In(amount) / 2 + + // Similar to In, but negate power to make the graph have a negative slope instead of positive. + let expo = base ** -(amount - 1) + + // adjust so it hits 1 when amount is 1 + expo = expo - expo * -(1 - amount) + + // Flip it upside down, move it up by 2. + expo = -expo + 2 + + return expo / 2 + } + + return {In, Out, InOut} + }, } export default Easing From 634965f09ec0b8c614f60386fcdec8fdf0adad59 Mon Sep 17 00:00:00 2001 From: Joe Pea Date: Sun, 1 Aug 2021 22:57:16 -0700 Subject: [PATCH 2/2] update hello world example to use both `Exponential` and `generateExponential(300)` to show how similar they are --- examples/00_hello_world.html | 76 ++++++++++++++++++------------------ 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/examples/00_hello_world.html b/examples/00_hello_world.html index a57f5865..3694f3dc 100644 --- a/examples/00_hello_world.html +++ b/examples/00_hello_world.html @@ -4,56 +4,63 @@ Tween.js / hello world! + - +

tween.js

00 _ hello world

Simple example for illustrating the creation and chaining of tweens.

-
- hello world! + +
+
hello world!
+
+ +
+
hello world again!