11-easing: ease.js refactoring

site/content/examples/11-easing/00-easing/App.svelte

@@ -5,12 +5,12 @@
 	import Grid from './Grid.svelte';
 	import Controls from './Controls.svelte';
 
-	import { eases, types } from './eases.js';
+	import { easesGroupBy, eases, types } from './eases.js';
 
-	let current_type = 'In';
+	let current_type = easesGroupBy[0];
-	let current_ease = 'sine';
+	let current_ease = Object.keys(eases)[0];
 	let duration = 2000;
-	let current = eases.get(current_ease)[current_type];
+	let current = eases[current_ease][current_type];
 	let playing = false;
 	let width;
 
@@ -33,7 +33,7 @@
 		playing = false;
 	}
 
-	$: current = eases.get(current_ease)[current_type];
+	$: current = eases[current_ease][current_type];
 	$: current && runAnimations();
 </script>
 

site/content/examples/11-easing/00-easing/Controls.svelte

@@ -19,7 +19,7 @@
 			<h3>Ease</h3>
 			{#if mobile}
 				<select bind:value={current_ease}>
-					{#each [...eases] as [name]}
+					{#each Object.keys(eases) as name}
 						<option
 							value={name}
 							class:selected={name === current_ease}
@@ -30,7 +30,7 @@
 				</select>
 			{:else}
 				<ul>
-					{#each [...eases] as [name]}
+					{#each Object.keys(eases) as name}
 						<li
 							class:selected={name === current_ease}
 							on:click={() => current_ease = name}
@@ -43,7 +43,7 @@
 			<h3>Type</h3>
 			{#if mobile }
 				<select bind:value={current_type}>
-					{#each types as [name, type]}
+					{#each types as {name, type}}
 						<option
 							value={type}
 						>
@@ -53,7 +53,7 @@
 				</select>
 			{:else}
 				<ul>
-					{#each types as [name, type]}
+					{#each types as {name, type}}
 						<li
 							class:selected={type === current_type}
 							on:click={() => current_type = type}

site/content/examples/11-easing/00-easing/eases.js

@@ -1,43 +1,40 @@
 import * as eases from 'svelte/easing';
 
-const processed_eases = {};
+function calculateShape (easeFn) {
+    let result = 'M0 1000';
+    for (let i = 1; i <= 1000; i++) {
+        result = `${result} L${(i / 1000) * 1000} ${1000 - easeFn(i / 1000) * 1000} `;
+    }
+    return result;
+}
+
+function getEasesGroupBy (endings) {
+	const result = {};
 
 	for (const ease in eases) {
-	if (ease === "linear") {
+		const ending = endings.find((ending) => ease.endsWith(ending));
-		processed_eases.linear = eases.linear;
+		if (!ending) continue;
-	} else {
-		const name = ease.replace(/In$|InOut$|Out$/, '');
-		const type = ease.match(/In$|InOut$|Out$/)[0];
 	
-		if (!(name in processed_eases)) processed_eases[name] = {};
+		const key = ending;
-		processed_eases[name][type] = {};
+		const name = ease.substring(0, ease.length - ending.length);
-		processed_eases[name][type].fn = eases[ease];
+		const fn = eases[ease];
+		const shape = calculateShape(fn);
 	
-		let shape = 'M0 1000';
+		result[name] = result[name] || {};
-		for (let i = 1; i <= 1000; i++) {
+		result[name][key] = { fn, shape };
-			shape = `${shape} L${(i / 1000) * 1000} ${1000 - eases[ease](i / 1000) * 1000} `;
-			processed_eases[name][type].shape = shape;
-		}
 	}
+
+	return result;
 }
 
-const sorted_eases = new Map([
+export const easesGroupBy = ['In', 'InOut', 'Out'];
-	['sine', processed_eases.sine],
+
-	['quad', processed_eases.quad],
+export const processedEases = getEasesGroupBy(easesGroupBy);
-	['cubic', processed_eases.cubic],
-	['quart', processed_eases.quart],
-	['quint', processed_eases.quint],
-	['expo', processed_eases.expo],
-	['circ', processed_eases.circ],
-	['back', processed_eases.back],
-	['elastic', processed_eases.elastic],
-	['bounce', processed_eases.bounce],
-]);
 
 export const types = [
-	['Ease In', 'In'],
+    { name: 'Ease In', type: easesGroupBy[0] },
-	['Ease Out', 'Out'],
+    { name: 'Ease Out', type: easesGroupBy[1] },
-	['Ease In Out', 'InOut']
+    { name: 'Ease In Out', type: easesGroupBy[2] },
 ];
 
-export { sorted_eases as eases };
+export { processedEases as eases };