Skip to content

Commit

Permalink
Easing.generateExponential()
Browse files Browse the repository at this point in the history
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 #116.
  • Loading branch information
trusktr committed Aug 2, 2021
1 parent e99549b commit c7cf6e2
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 1 deletion.
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
60 changes: 60 additions & 0 deletions src/Easing.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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

0 comments on commit c7cf6e2

Please sign in to comment.