Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add pow easing function #604

Merged
merged 7 commits into from
May 4, 2021
Merged

Add pow easing function #604

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
88f2275
add : TWEEN.Easing.generatePow function and test.
MasatoMakino Apr 21, 2021
53eba58
add : a example page for TWEEN.Easing.generatePow()
MasatoMakino Apr 21, 2021
c9e227a
Merge branch 'master' into PR_#116_pow_easing
trusktr Apr 27, 2021
2822b8f
fix missing piece from merge
trusktr Apr 27, 2021
6b4647d
Merge branch 'master' into PR_#116_pow_easing
trusktr Apr 27, 2021
2987a00
Merge branch 'master' into PR_#116_pow_easing
MasatoMakino May 1, 2021
e45bbf8
fix : lower limit of power to 2^-52
MasatoMakino May 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 71 additions & 0 deletions examples/17_generate_pow.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tween.js / easing with a power of number</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
margin: 0px;
}

#target {
font-size: 13px;
padding: 0px 32px;
}
</style>
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="info" style="position: relative;">
<h1><a href="http://github.com/tweenjs/tween.js">tween.js</a></h1>
<h2>17 _ Easing with Pow</h2>
<p>TWEEN.Easing.generatePow() provides easing with a power of number.</p>
</div>

<div id="target"></div>

<script src="../dist/tween.umd.js"></script>
<script src="js/RequestAnimationFrame.js"></script>
<script src="js/createGraph.js"></script>
<script>
window.addEventListener('load', function () {
init()
animate()
})

function init() {
var target = document.getElementById('target')

const addGraph = pow => {
target.appendChild(createGraph(`Power"${pow}".In`, TWEEN.Easing.generatePow(pow).In))
target.appendChild(createGraph(`Power"${pow}".Out`, TWEEN.Easing.generatePow(pow).Out))
target.appendChild(createGraph(`Power"${pow}".InOut`, TWEEN.Easing.generatePow(pow).InOut))
}
target.appendChild(createGraph('Power1', TWEEN.Easing.generatePow(1).In))

target.appendChild(document.createElement('br'))

addGraph(2)
addGraph(3)

target.appendChild(document.createElement('br'))

addGraph(4)
addGraph(5)

target.appendChild(document.createElement('br'))

addGraph(5.8)
target.appendChild(createGraph(`Exponential.In`, TWEEN.Easing.Exponential.In))
target.appendChild(createGraph(`Exponential.Out`, TWEEN.Easing.Exponential.Out))
target.appendChild(createGraph(`Exponential.InOut`, TWEEN.Easing.Exponential.InOut))
}

function animate(time) {
requestAnimationFrame(animate)

TWEEN.update(time)
}
</script>
</body>
</html>
24 changes: 24 additions & 0 deletions src/Easing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,30 @@ const Easing = {
return Easing.Bounce.Out(amount * 2 - 1) * 0.5 + 0.5
},
},
generatePow: function (
power = 4,
): {
In(amount: number): number
Out(amount: number): number
InOut(amount: number): number
} {
power = power < Number.EPSILON ? Number.EPSILON : power
power = power > 10000 ? 10000 : power
return {
In: function (amount: number): number {
return amount ** power
},
Out: function (amount: number): number {
return 1 - (1 - amount) ** power
},
InOut: function (amount: number): number {
if (amount < 0.5) {
return (amount * 2) ** power / 2
}
return (1 - (2 - amount * 2) ** power) / 2 + 0.5
},
}
},
}

export default Easing
44 changes: 44 additions & 0 deletions src/tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2019,6 +2019,50 @@ export const tests = {
test.done()
},

'Test TWEEN.Easing.generatePow(1) equals Linear'(test: Test): void {
const ease1 = TWEEN.Easing.generatePow(1)

const compareWithLinear = (ease: EasingFunctionGroup, amount: number) => {
const linearResult = TWEEN.Easing.Linear.None(amount)
test.equal(linearResult, ease.In(amount))
test.equal(linearResult, ease.Out(amount))
test.equal(linearResult, ease.InOut(amount))
}
compareWithLinear(ease1, 0)
compareWithLinear(ease1, 0.25)
compareWithLinear(ease1, 0.5)
compareWithLinear(ease1, 0.75)
compareWithLinear(ease1, 1)
compareWithLinear(ease1, -1)
compareWithLinear(ease1, Infinity)

test.done()
},

'Test TWEEN.Easing.generatePow(n) should pass 0.0, 0.5, 1.0'(test: Test): void {
const checkEdgeValue = (ease: EasingFunctionGroup) => {
test.equal(ease.InOut(0.0), 0.0)
test.equal(ease.In(0.0), 0.0)
test.equal(ease.Out(0.0), 0.0)

test.equal(ease.InOut(0.5), 0.5)

test.equal(ease.InOut(1.0), 1.0)
test.equal(ease.In(1.0), 1.0)
test.equal(ease.Out(1.0), 1.0)
}
checkEdgeValue(TWEEN.Easing.generatePow(Number.NEGATIVE_INFINITY))
checkEdgeValue(TWEEN.Easing.generatePow(-1.0))
checkEdgeValue(TWEEN.Easing.generatePow(1))
checkEdgeValue(TWEEN.Easing.generatePow(Math.LOG2E))
checkEdgeValue(TWEEN.Easing.generatePow(Math.PI))
checkEdgeValue(TWEEN.Easing.generatePow())
checkEdgeValue(TWEEN.Easing.generatePow(6))
checkEdgeValue(TWEEN.Easing.generatePow(Number.POSITIVE_INFINITY))

test.done()
},

'Test TWEEN.Tween.update() with no arguments'(test: Test): void {
const clock = FakeTimers.install()
const targetNow = {x: 0.0}
Expand Down