📈 Custom Keyframe Easing Functions

SnaveSutit · SnaveSutit · commit 155935a8255e · 2024-06-20T12:22:44.000-04:00
diff --git a/src/assets/easingIcons/Back.svg b/src/assets/easingIcons/Back.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 20C14 20 18 31 22 2" stroke="white" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/easingIcons/Bounce.svg b/src/assets/easingIcons/Bounce.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 22C3 21 4 21 5 22C7 20 7 20 9 22C12 14 15 14 18 22C19 5.99998 22 2 22 2" stroke="white" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/easingIcons/Circ.svg b/src/assets/easingIcons/Circ.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 22.0001C22 19.0001 22 12 22 2" stroke="white" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/easingIcons/Cubic.svg b/src/assets/easingIcons/Cubic.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 22.0001C12 22.0001 18 12 22 2" stroke="white" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/easingIcons/Elastic.svg b/src/assets/easingIcons/Elastic.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 18.9999C5 18.9999 5 17.9999 7 17.9999C9 17.9999 10 19.9999 12 19.9999C14 19.9999 15.8152 13.0507 17 16.9999C20 26.9999 22 22 22 2" stroke="white" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/easingIcons/Expo.svg b/src/assets/easingIcons/Expo.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 22.0001C18 22.0001 22 18 22 2" stroke="white" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/easingIcons/InOut.svg b/src/assets/easingIcons/InOut.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 22.0001C23 22.0001 0.999999 2 22 2" stroke="white" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/easingIcons/Linear.svg b/src/assets/easingIcons/Linear.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 22.0001L22 2" stroke="white" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/easingIcons/Out.svg b/src/assets/easingIcons/Out.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 22.0001C2 6.00009 6 2 22 2" stroke="white" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/easingIcons/Quad.svg b/src/assets/easingIcons/Quad.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 22.0001C12 22.0001 18 8.99999 22 2" stroke="white" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/easingIcons/Quart.svg b/src/assets/easingIcons/Quart.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 22.0001C14 22.0001 18 12 22 2" stroke="white" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/easingIcons/Quint.svg b/src/assets/easingIcons/Quint.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 22.0001C15 22.0001 18 15 22 2" stroke="white" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/easingIcons/Sine.svg b/src/assets/easingIcons/Sine.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 22.0001C7 22.0001 18 8.99999 22 2" stroke="white" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/easingIcons/Step.svg b/src/assets/easingIcons/Step.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 22.0001V17H7V12H12V7.00008H17V2L22 2.00012" stroke="white" stroke-linecap="square"/>
+</svg>
diff --git a/src/blockbenchTypeMods.d.ts b/src/blockbenchTypeMods.d.ts
@@ -16,6 +16,7 @@ import { Valuable } from './util/stores'
 import { type Variant } from './variants'
 import { VanillaItemDisplay } from './outliner/vanillaItemDisplay'
 import { VanillaBlockDisplay } from './outliner/vanillaBlockDisplay'
+import { EasingKey } from './util/easing'
 
 declare module 'three' {
 	interface Object3D {
@@ -69,6 +70,12 @@ declare global {
 		excluded_bones: CollectionItem[]
 	}
 
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface _Keyframe {
+		easing?: EasingKey
+		easingArgs?: number[]
+	}
+
 	interface Group {
 		configs: {
 			default: IBlueprintBoneConfigJSON
diff --git a/src/components/dialogItems/numberSlider.svelte b/src/components/dialogItems/numberSlider.svelte
@@ -27,7 +27,7 @@
 							value.get() + (difference - last_difference),
 							min !== undefined ? min : -Infinity,
 							max !== undefined ? max : Infinity,
-						),
+						) || 0,
 					)
 					last_difference = difference
 				}
@@ -46,7 +46,7 @@
 					molangParser.parse(value.get()),
 					min !== undefined ? min : -Infinity,
 					max !== undefined ? max : Infinity,
-				),
+				) || 0,
 			)
 		})
 	})
diff --git a/src/components/keyframeEasings.svelte b/src/components/keyframeEasings.svelte
@@ -0,0 +1,238 @@
+<script lang="ts" context="module">
+	// @ts-expect-error
+	import { default as ICON_IMPORTS, filenames } from '../assets/easingIcons/*.svg'
+	import { translate } from '../util/translation'
+	import { events } from '../util/events'
+	import { getEasingArgDefault, hasArgs } from '../util/easing'
+	import NumberSlider from './dialogItems/numberSlider.svelte'
+	import { Valuable } from '../util/stores'
+
+	const ICONS = Object.fromEntries(
+		(ICON_IMPORTS as unknown as any[]).map((icon, i) => [
+			PathModule.basename(filenames[i]).replace('.svg', '').toLowerCase(),
+			icon.default,
+		]) as [string, string][],
+	)
+	const EASING_MODE_ICONS: Record<string, string> = {
+		in: ICONS['expo'],
+		out: ICONS['out'],
+		inout: ICONS['inout'],
+	}
+	console.log(ICONS, EASING_MODE_ICONS)
+</script>
+
+<script lang="ts">
+	const easingTypes = [
+		'linear',
+		'sine',
+		'quad',
+		'cubic',
+		'quart',
+		'quint',
+		'expo',
+		'circ',
+		'elastic',
+		'back',
+		'bounce',
+	]
+	const easingModes = ['in', 'out', 'inout']
+
+	let easingType: string = 'linear'
+	let easingMode: string | undefined
+	let easingArg: Valuable<number>
+
+	function getSelectedEasing() {
+		if (!selectedKeyframe?.easing) return
+		const match = selectedKeyframe.easing.match(/ease(InOut|Out|In)(.+)/)
+		if (!match) {
+			return {
+				type: selectedKeyframe.easing,
+			}
+		}
+
+		if (hasArgs(selectedKeyframe.easing)) getEasingArgs()
+
+		console.log(match[2].toLowerCase(), match[1].toLowerCase())
+		return {
+			type: match?.[2].toLowerCase(),
+			mode: match?.[1].toLowerCase(),
+		}
+	}
+
+	function setSelectedEasing(type: string, mode: string = 'inout') {
+		if (!selectedKeyframe) return
+		if (type === 'linear') {
+			selectedKeyframe.easing = 'linear'
+		} else {
+			selectedKeyframe.easing = `ease${
+				mode && mode !== 'inout' ? mode[0].toUpperCase() + mode.slice(1) : 'InOut'
+			}${type[0].toUpperCase() + type.slice(1)}`
+		}
+		easingType = type
+		easingMode = mode
+		console.log(selectedKeyframe.easing, easingType, easingMode)
+		if (hasArgs(selectedKeyframe.easing)) {
+			getEasingArgs()
+		}
+	}
+
+	let unsub: () => void
+	function getEasingArgs() {
+		if (!selectedKeyframe) return
+		if (selectedKeyframe.easingArgs) {
+			easingArg = new Valuable(
+				selectedKeyframe.easingArgs[0] || getEasingArgDefault(selectedKeyframe) || 0,
+			)
+		} else {
+			easingArg = new Valuable(getEasingArgDefault(selectedKeyframe) || 0)
+		}
+		unsub && unsub()
+		unsub = easingArg.subscribe(value => setEasingArgs(value))
+	}
+
+	function setEasingArgs(arg: number) {
+		if (!selectedKeyframe) return
+		selectedKeyframe.easingArgs = [arg]
+	}
+
+	let selectedKeyframe: _Keyframe | undefined
+
+	function isFirstKeyframe(kf: _Keyframe) {
+		return (
+			kf.animator.keyframes
+				.filter(k => k.channel === kf.channel)
+				.sort((a, b) => a.time - b.time)[0] === kf
+		)
+	}
+
+	events.SELECT_KEYFRAME.subscribe((keyframe?: _Keyframe) => {
+		if (
+			keyframe &&
+			['position', 'rotation', 'scale'].includes(keyframe.channel) &&
+			!isFirstKeyframe(keyframe)
+		) {
+			console.log(keyframe)
+			selectedKeyframe = keyframe
+			const easing = getSelectedEasing()
+			if (easing) {
+				easingType = easing.type
+				easingMode = easing.mode
+			}
+		} else {
+			selectedKeyframe = undefined
+		}
+	})
+
+	events.UNSELECT_KEYFRAME.subscribe(() => {
+		selectedKeyframe = undefined
+	})
+</script>
+
+{#if selectedKeyframe}
+	<div class="bar flex">
+		<label
+			for="easing_type_input"
+			class="undefined"
+			style="font-weight: unset; width: 100px; text-align: left;"
+			title={translate('panel.keyframe.easing_type.description')}
+		>
+			{translate('panel.keyframe.easing_type.title')}
+		</label>
+		{#key easingType}
+			<div id="easing_type_input" class="easing-container">
+				{#each easingTypes as ease}
+					<button
+						class="easing-type"
+						title={translate(`panel.keyframe.easing_type.options.${ease}`)}
+						on:click={() => setSelectedEasing(ease, easingMode)}
+					>
+						<img
+							class={easingType === ease ? 'selected-keyframe-icon' : ''}
+							src={ICONS[ease]}
+							alt={ease}
+						/>
+					</button>
+				{/each}
+			</div>
+		{/key}
+	</div>
+	{#if selectedKeyframe.easing !== 'linear'}
+		<div class="bar flex">
+			<label
+				for="easing_mode_input"
+				class="undefined"
+				style="font-weight: unset; width: 100px; text-align: left;"
+				title={translate('panel.keyframe.easing_mode.description')}
+			>
+				{translate('panel.keyframe.easing_mode.title')}
+			</label>
+			{#key easingMode}
+				<div id="easing_mode_input" class="easing-container">
+					{#each easingModes as mode}
+						<button
+							class="easing-type"
+							title={translate(`panel.keyframe.easing_mode.options.${mode}`)}
+							on:click={() => setSelectedEasing(easingType, mode)}
+						>
+							<img
+								class={easingMode === mode ? 'selected-keyframe-icon' : ''}
+								src={EASING_MODE_ICONS[mode]}
+								alt={mode}
+							/>
+						</button>
+					{/each}
+				</div>
+			{/key}
+		</div>
+	{/if}
+	{#if hasArgs(selectedKeyframe?.easing)}
+		<div class="bar flex">
+			<label
+				for="easing_arg_input"
+				class="undefined"
+				style="font-weight: unset; width: 100px; text-align: left;"
+				title={translate(`panel.keyframe.easing_args.easing_arg.${easingType}.description`)}
+			>
+				{translate(`panel.keyframe.easing_args.easing_arg.${easingType}.title`)}
+			</label>
+			<input
+				id="easing_arg_input"
+				class="dark_bordered tab_target"
+				style="width: 66px; margin-left: 2px;"
+				type="number"
+				step="0.1"
+				min="0"
+				bind:value={$easingArg}
+			/>
+		</div>
+	{/if}
+{/if}
+
+<style>
+	.easing-container {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		grid-gap: 2px;
+		margin-left: 2px;
+	}
+
+	.easing-type {
+		width: 32px;
+		padding: 0px;
+		margin: 0px;
+		min-width: unset;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.easing-type:hover {
+		background-color: var(--color-selected);
+	}
+
+	.selected-keyframe-icon {
+		filter: invert(49%) sepia(16%) saturate(6320%) hue-rotate(198deg) brightness(101%)
+			contrast(106%);
+	}
+</style>
diff --git a/src/index.ts b/src/index.ts
@@ -16,6 +16,7 @@ import './interface/vanillaItemDisplayConfigDialog'
 import './interface/vanillaItemDisplayElementPanel'
 import './interface/vanillaBlockDisplayConfigDialog'
 import './interface/vanillaBlockDisplayElementPanel'
+import './interface/keyframeEasings'
 // Blockbench Mods
 import './interface/locatorConfigDialog'
 import './mods/animationControllerMod'
diff --git a/src/interface/customKeyframePanel.ts b/src/interface/customKeyframePanel.ts
@@ -23,7 +23,7 @@ export function injectCustomKeyframePanel(selectedKeyframe: _Keyframe) {
 		child.remove()
 	}
 
-	injectSvelteCompomponent({
+	void injectSvelteCompomponent({
 		svelteComponent: CustomKeyframePanelSvelteComponent,
 		svelteComponentProperties: { currentPanel: CURRENT_PANEL, selectedKeyframe },
 		elementSelector() {
diff --git a/src/interface/keyframeEasings.ts b/src/interface/keyframeEasings.ts
@@ -0,0 +1,10 @@
+import KeyframeEasingsSvelte from '../components/keyframeEasings.svelte'
+import { injectSvelteCompomponentMod } from '../util/injectSvelte'
+
+injectSvelteCompomponentMod({
+	svelteComponent: KeyframeEasingsSvelte,
+	svelteComponentProperties: {},
+	elementSelector() {
+		return $('#panel_keyframe')[0]
+	},
+})
diff --git a/src/lang/en.yml b/src/lang/en.yml
@@ -363,6 +363,35 @@ animated_java.panel.keyframe.repeat_frequency.description: |-
     NOTE: If the animation is not evenly divisible by this value, the interval may be slightly off when the animation loops.
     If this is set to a value larger than the length of the animation, the commands will run as if repeat was disabled (Once when the keyframe is reached).
 
+animated_java.panel.keyframe.easing_type.title: Easing Type
+animated_java.panel.keyframe.easing_type.description: The type of easing to apply to the keyframe.
+animated_java.panel.keyframe.easing_type.options.linear: Linear
+animated_java.panel.keyframe.easing_type.options.sine: Sine
+animated_java.panel.keyframe.easing_type.options.quad: Quad
+animated_java.panel.keyframe.easing_type.options.cubic: Cubic
+animated_java.panel.keyframe.easing_type.options.quart: Quart
+animated_java.panel.keyframe.easing_type.options.quint: Quint
+animated_java.panel.keyframe.easing_type.options.expo: Expo
+animated_java.panel.keyframe.easing_type.options.circ: Circ
+animated_java.panel.keyframe.easing_type.options.elastic: Elastic
+animated_java.panel.keyframe.easing_type.options.back: Back
+animated_java.panel.keyframe.easing_type.options.bounce: Bounce
+
+animated_java.panel.keyframe.easing_mode.title: Easing Mode
+animated_java.panel.keyframe.easing_mode.description: The easing mode to apply to the keyframe.
+animated_java.panel.keyframe.easing_mode.options.in: In
+animated_java.panel.keyframe.easing_mode.options.out: Out
+animated_java.panel.keyframe.easing_mode.options.in-out: In-Out
+
+animated_java.panel.keyframe.easing_args.title: Easing Args
+animated_java.panel.keyframe.easing_args.description: The arguments to apply to the easing function.
+animated_java.panel.keyframe.easing_args.easing_arg.elastic.title: Elasticity
+animated_java.panel.keyframe.easing_args.easing_arg.elastic.description: The elasticity of the easing function.
+animated_java.panel.keyframe.easing_args.easing_arg.back.title: Overshoot
+animated_java.panel.keyframe.easing_args.easing_arg.back.description: The amount of overshoot to apply to the easing function.
+animated_java.panel.keyframe.easing_args.easing_arg.bounce.title: Bounciness
+animated_java.panel.keyframe.easing_args.easing_arg.bounce.description: The bounciness of the easing function.
+
 # Text Display Panel
 animated_java.panel.text_display.title: Text Display
 
diff --git a/src/mods/keyframeMod.ts b/src/mods/keyframeMod.ts
diff --git a/src/util/easing.ts b/src/util/easing.ts
diff --git a/src/util/events.ts b/src/util/events.ts
diff --git a/test_blueprints/armor_stand.ajblueprint b/test_blueprints/armor_stand.ajblueprint
diff --git a/tools/esbuild.ts b/tools/esbuild.ts
