Merge pull request #604 from MasatoMakino/PR_#116_pow_easing

Add pow easing function
tweenjs · May 4, 2021 · e99549b · e99549b
2 parents 775536c + e45bbf8
commit e99549b
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 0 deletions.
diff --git a/examples/17_generate_pow.html b/examples/17_generate_pow.html
@@ -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>
diff --git a/src/Easing.ts b/src/Easing.ts
@@ -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
diff --git a/src/tests.ts b/src/tests.ts
@@ -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}