anim-engine 0.1.2 → 0.2.0

package/dist/animation/create-animation.js

@@ -1,8 +1,9 @@
 import { easingFunctions } from "../easing/easing.js";
 import { getTicker } from "../ticker/get-ticker.js";
-import { updateTween } from "./update.js";
+import { createKeyframeRunner, createTweenRunner } from "./runner.js";
 //#region src/animation/create-animation.ts
 var resolveEasing = (ease) => typeof ease === "function" ? ease : easingFunctions[ease];
+var resolveValue = (v) => typeof v === "function" ? v() : v;
 var isKeyframeMode = (options) => {
 	return "keyframes" in options && Array.isArray(options.keyframes);
 };
@@ -12,101 +13,79 @@ var createAnimation = (options) => {
 };
 var createSingleTween = (options) => {
 	const easeName = options.ease ?? "inOutSine";
-	const delayMs = options.delayMs ?? 0;
-	const { onStarted, onUpdate, onEnded, durationMs } = options;
-	let rawFrom = options.from;
-	let rawTo = options.to;
-	const state = {
-		progress: 0,
-		currentValue: 0,
-		velocity: 0
-	};
+	const { onStarted, onUpdate, onEnded } = options;
+	const rawFrom = options.from;
+	const rawTo = options.to;
+	const rawDurationMs = options.durationMs;
+	let cachedDurationMs = resolveValue(rawDurationMs);
 	let status = "stopped";
-	let stopped = false;
 	let resolvePromise;
-	let delayRemainingMs = 0;
-	let pendingStart = false;
 	const ticker = getTicker();
-	const update = (deltaMs) => {
-		if (stopped) return;
-		if (pendingStart) {
-			delayRemainingMs -= deltaMs;
-			if (delayRemainingMs > 0) return;
-			pendingStart = false;
-			onStarted?.();
-			deltaMs = -delayRemainingMs;
-		}
-		const from = typeof rawFrom === "function" ? rawFrom() : rawFrom;
-		const to = typeof rawTo === "function" ? rawTo() : rawTo;
-		const completed = updateTween(state, deltaMs, durationMs, currentEase, from, to);
-		onUpdate?.(state.currentValue, state.velocity);
-		if (completed) handleCompletion();
+	let runner;
+	const finish = () => {
+		status = "stopped";
+		ticker.remove(runner);
+		resolvePromise?.(controls);
+		resolvePromise = void 0;
 	};
-	let currentEase = resolveEasing(easeName);
+	const buildRunner = () => {
+		const from = resolveValue(rawFrom);
+		const to = resolveValue(rawTo);
+		cachedDurationMs = resolveValue(rawDurationMs);
+		return createTweenRunner({
+			from,
+			to,
+			durationMs: cachedDurationMs,
+			easeFn: resolveEasing(easeName),
+			onStarted,
+			onUpdate,
+			onEnded,
+			onComplete: finish
+		});
+	};
+	const hasDynamic = typeof rawFrom === "function" || typeof rawTo === "function" || typeof rawDurationMs === "function";
+	runner = buildRunner();
 	const play = () => {
 		if (status === "dead") throw new Error("Cannot play a dead animation");
-		stopped = false;
-		state.progress = 0;
-		const initFrom = typeof rawFrom === "function" ? rawFrom() : rawFrom;
-		state.currentValue = initFrom;
-		state.velocity = 0;
-		if (delayMs > 0) {
-			delayRemainingMs = delayMs;
-			pendingStart = true;
-		} else {
-			pendingStart = false;
-			delayRemainingMs = 0;
-		}
+		if (hasDynamic) runner = buildRunner();
+		else runner.reset();
 		const promise = new Promise((resolve) => {
 			resolvePromise = resolve;
 		});
 		status = "playing";
-		ticker.add(update);
-		if (delayRemainingMs <= 0) onStarted?.();
+		ticker.add(runner);
+		onStarted?.();
 		return promise;
 	};
 	const pause = () => {
 		if (status !== "playing") return;
 		status = "paused";
-		ticker.remove(update);
+		ticker.remove(runner);
 	};
 	const resume = () => {
 		if (status !== "paused") return;
 		status = "playing";
-		ticker.add(update);
+		ticker.add(runner);
 	};
 	const stop = () => {
-		stopped = true;
 		status = "stopped";
-		ticker.remove(update);
+		ticker.remove(runner);
 		resolvePromise?.(controls);
 		resolvePromise = void 0;
 	};
 	const skipToEnd = () => {
-		const skipTo = typeof rawTo === "function" ? rawTo() : rawTo;
-		state.currentValue = skipTo;
-		state.velocity = 0;
-		state.progress = 1;
-		onUpdate?.(state.currentValue, state.velocity);
+		runner.evaluate(1);
 		if (status === "playing" || status === "paused") onEnded?.();
 		status = "stopped";
-		ticker.remove(update);
+		ticker.remove(runner);
 		resolvePromise?.(controls);
 		resolvePromise = void 0;
 	};
 	const kill = () => {
 		status = "dead";
-		ticker.remove(update);
-		stopped = true;
+		ticker.remove(runner);
 		resolvePromise = void 0;
 	};
-	function handleCompletion() {
-		onEnded?.();
-		status = "stopped";
-		ticker.remove(update);
-		resolvePromise?.(controls);
-		resolvePromise = void 0;
-	}
 	const controls = {
 		play,
 		pause,
@@ -114,170 +93,103 @@ var createSingleTween = (options) => {
 		stop,
 		skipToEnd,
 		kill,
-		setCurrentValue: (value) => {
-			state.currentValue = value;
-			state.velocity = 0;
-		},
 		get currentValue() {
-			return state.currentValue;
+			return runner.currentValue;
 		},
 		get velocity() {
-			return state.velocity;
+			return runner.velocity;
 		},
 		get progress() {
-			return state.progress;
+			return runner.progress;
 		},
 		setProgress(value) {
 			if (status === "playing") pause();
-			const clamped = Math.max(0, Math.min(1, value));
-			state.progress = clamped;
-			const from = typeof rawFrom === "function" ? rawFrom() : rawFrom;
-			const to = typeof rawTo === "function" ? rawTo() : rawTo;
-			state.currentValue = from + (to - from) * currentEase(clamped);
-			state.velocity = 0;
-			onUpdate?.(state.currentValue, state.velocity);
+			runner.evaluate(Math.max(0, Math.min(1, value)));
 		},
 		get status() {
 			return status;
 		},
 		get durationMs() {
-			return durationMs;
+			return cachedDurationMs;
 		}
 	};
 	return controls;
 };
 var createKeyframeAnimation = (options) => {
-	const keyframes = options.keyframes;
-	const onUpdate = options.onUpdate;
-	const onProgress = options.onProgress;
-	const onEnded = options.onEnded;
-	const sorted = [...keyframes].sort((a, b) => a.at - b.at);
-	const totalDurationMs = sorted[sorted.length - 1].at;
-	const invTotalDuration = 1 / totalDurationMs;
-	const resolveKeyframeValue = (kf) => {
-		return typeof kf.value === "function" ? kf.value() : kf.value;
-	};
-	const segments = [];
-	for (let i = 0; i < sorted.length - 1; i++) {
-		const current = sorted[i];
-		const next = sorted[i + 1];
-		const from = resolveKeyframeValue(current);
-		const to = resolveKeyframeValue(next);
-		segments.push({
-			from,
-			to,
-			range: to - from,
-			durationMs: next.at - current.at,
-			easeFn: resolveEasing(next.ease ?? "inOutSine")
-		});
-	}
-	const prefixSum = [0];
-	for (let i = 0; i < segments.length; i++) prefixSum.push(prefixSum[i] + segments[i].durationMs);
-	if (segments.length === 0) return createSingleTween({
-		from: resolveKeyframeValue(sorted[0]),
-		to: resolveKeyframeValue(sorted[0]),
-		durationMs: totalDurationMs,
-		ease: "linear",
-		onUpdate,
-		onEnded
-	});
-	const state = {
-		progress: 0,
-		currentValue: 0,
-		velocity: 0
+	const { keyframes: rawKeyframes, onStarted, onUpdate, onProgress, onEnded } = options;
+	const resolveKeyframeGaps = () => {
+		let total = 0;
+		for (let i = 1; i < rawKeyframes.length; i++) total += resolveValue(rawKeyframes[i].gap ?? 0);
+		return total;
 	};
+	let cachedDurationMs = resolveKeyframeGaps();
 	let status = "stopped";
-	let stopped = false;
 	let resolvePromise;
-	let currentSegmentIndex = 0;
-	let previousValue = resolveKeyframeValue(sorted[0]);
 	const ticker = getTicker();
-	const update = (deltaMs) => {
-		if (stopped) return;
-		const segment = segments[currentSegmentIndex];
-		segmentElapsed += deltaMs;
-		segmentProgress += deltaMs / segment.durationMs;
-		if (segmentProgress >= 1) segmentProgress = 1;
-		const eased = segment.easeFn(segmentProgress);
-		previousValue = state.currentValue;
-		state.currentValue = segment.from + segment.range * eased;
-		if (segmentProgress >= 1) {
-			state.currentValue = segment.to;
-			state.velocity = 0;
-		} else state.velocity = (state.currentValue - previousValue) / (deltaMs / 1e3);
-		const elapsedTotal = prefixSum[currentSegmentIndex] + segmentElapsed;
-		state.progress = Math.min(elapsedTotal * invTotalDuration, 1);
-		onProgress?.(state.progress);
-		onUpdate?.(state.currentValue, state.velocity);
-		if (segmentProgress >= 1) if (currentSegmentIndex < segments.length - 1) {
-			currentSegmentIndex++;
-			segmentElapsed = 0;
-			segmentProgress = 0;
-			state.currentValue = segments[currentSegmentIndex].from;
-			previousValue = state.currentValue;
-			state.velocity = 0;
-			state.progress = Math.min(prefixSum[currentSegmentIndex] * invTotalDuration, 1);
-			onProgress?.(state.progress);
-		} else {
-			status = "stopped";
-			ticker.remove(update);
-			onEnded?.();
-			resolvePromise?.(controls);
-			resolvePromise = void 0;
-		}
+	let runner;
+	const finish = () => {
+		status = "stopped";
+		ticker.remove(runner);
+		resolvePromise?.(controls);
+		resolvePromise = void 0;
 	};
-	let segmentProgress = 0;
-	let segmentElapsed = 0;
+	const buildRunner = () => {
+		return createKeyframeRunner({
+			keyframes: rawKeyframes.map((kf, i) => ({
+				value: resolveValue(kf.value),
+				gap: i === 0 ? 0 : resolveValue(kf.gap ?? 0),
+				easeFn: resolveEasing(kf.ease ?? "inOutSine")
+			})),
+			onStarted,
+			onUpdate,
+			onProgress,
+			onEnded,
+			onComplete: finish
+		});
+	};
+	const hasDynamic = rawKeyframes.some((kf) => typeof kf.value === "function" || typeof kf.gap === "function");
+	runner = buildRunner();
 	const play = () => {
 		if (status === "dead") throw new Error("Cannot play a dead animation");
-		stopped = false;
-		currentSegmentIndex = 0;
-		segmentElapsed = 0;
-		segmentProgress = 0;
-		state.progress = 0;
-		state.currentValue = segments[0].from;
-		previousValue = segments[0].from;
-		state.velocity = 0;
+		if (hasDynamic) {
+			runner = buildRunner();
+			cachedDurationMs = resolveKeyframeGaps();
+		} else runner.reset();
 		const promise = new Promise((resolve) => {
 			resolvePromise = resolve;
 		});
 		status = "playing";
-		ticker.add(update);
+		ticker.add(runner);
+		onStarted?.();
 		return promise;
 	};
 	const pause = () => {
 		if (status !== "playing") return;
 		status = "paused";
-		ticker.remove(update);
+		ticker.remove(runner);
 	};
 	const resume = () => {
 		if (status !== "paused") return;
 		status = "playing";
-		ticker.add(update);
+		ticker.add(runner);
 	};
 	const stop = () => {
-		stopped = true;
 		status = "stopped";
-		ticker.remove(update);
+		ticker.remove(runner);
 		resolvePromise?.(controls);
 		resolvePromise = void 0;
 	};
 	const skipToEnd = () => {
-		const last = segments[segments.length - 1];
-		state.currentValue = last.to;
-		state.velocity = 0;
-		state.progress = 1;
-		onUpdate?.(state.currentValue, state.velocity);
+		runner.evaluate(1);
 		if (status === "playing" || status === "paused") onEnded?.();
 		status = "stopped";
-		ticker.remove(update);
+		ticker.remove(runner);
 		resolvePromise?.(controls);
 		resolvePromise = void 0;
 	};
 	const kill = () => {
 		status = "dead";
-		ticker.remove(update);
-		stopped = true;
+		ticker.remove(runner);
 		resolvePromise = void 0;
 	};
 	const controls = {
@@ -287,47 +199,24 @@ var createKeyframeAnimation = (options) => {
 		stop,
 		skipToEnd,
 		kill,
-		setCurrentValue: (value) => {
-			state.currentValue = value;
-			state.velocity = 0;
-		},
 		get currentValue() {
-			return state.currentValue;
+			return runner.currentValue;
 		},
 		get velocity() {
-			return state.velocity;
+			return runner.velocity;
 		},
 		get progress() {
-			return state.progress;
+			return runner.progress;
 		},
 		setProgress(value) {
 			if (status === "playing") pause();
-			const clamped = Math.max(0, Math.min(1, value));
-			state.progress = clamped;
-			const elapsed = clamped * totalDurationMs;
-			let segIdx = 0;
-			for (let i = 0; i < segments.length; i++) {
-				if (elapsed <= prefixSum[i + 1]) {
-					segIdx = i;
-					break;
-				}
-				segIdx = i;
-			}
-			const segment = segments[segIdx];
-			const segStart = prefixSum[segIdx];
-			const segDuration = segment.durationMs;
-			const segProgress = segDuration > 0 ? (elapsed - segStart) / segDuration : 1;
-			const eased = segment.easeFn(Math.max(0, Math.min(1, segProgress)));
-			state.currentValue = segment.from + segment.range * eased;
-			state.velocity = 0;
-			onUpdate?.(state.currentValue, state.velocity);
-			onProgress?.(clamped);
+			runner.evaluate(Math.max(0, Math.min(1, value)));
 		},
 		get status() {
 			return status;
 		},
 		get durationMs() {
-			return totalDurationMs;
+			return cachedDurationMs;
 		}
 	};
 	return controls;

package/dist/animation/runner.d.ts

@@ -0,0 +1,37 @@
+import { EaseFunction } from '../shared/types';
+export type Runner = {
+    (deltaMs: number): boolean;
+    evaluate: (progress: number) => number;
+    reset: () => void;
+    currentValue: number;
+    velocity: number;
+    progress: number;
+    onStarted: (() => void) | undefined;
+    onUpdate: ((value: number, velocity: number) => void) | undefined;
+    onProgress: ((progress: number) => void) | undefined;
+    onEnded: (() => void) | undefined;
+};
+export type TweenRunnerConfig = {
+    from: number;
+    to: number;
+    durationMs: number;
+    easeFn: EaseFunction;
+    onStarted?: () => void;
+    onUpdate?: (value: number, velocity: number) => void;
+    onEnded?: () => void;
+    onComplete?: () => void;
+};
+export declare const createTweenRunner: (config: TweenRunnerConfig) => Runner;
+export type KeyframeRunnerConfig = {
+    keyframes: {
+        value: number;
+        gap: number;
+        easeFn: EaseFunction;
+    }[];
+    onStarted?: () => void;
+    onUpdate?: (value: number, velocity: number) => void;
+    onProgress?: (progress: number) => void;
+    onEnded?: () => void;
+    onComplete?: () => void;
+};
+export declare const createKeyframeRunner: (config: KeyframeRunnerConfig) => Runner;

package/dist/animation/runner.js

@@ -0,0 +1,220 @@
+import { updateTween } from "./update.js";
+//#region src/animation/runner.ts
+var noop = () => {};
+var createTweenRunner = (config) => {
+	const { from, to, durationMs, easeFn } = config;
+	const onStarted = config.onStarted;
+	const onUpdate = config.onUpdate ?? noop;
+	const onEnded = config.onEnded;
+	const onComplete = config.onComplete;
+	const state = {
+		progress: 0,
+		currentValue: from,
+		velocity: 0
+	};
+	let runner;
+	const step = (deltaMs) => {
+		const completed = updateTween(state, deltaMs, durationMs, easeFn, from, to);
+		onUpdate(state.currentValue, state.velocity);
+		if (completed) {
+			onEnded?.();
+			onComplete?.();
+		}
+		return completed;
+	};
+	const evaluate = (progress) => {
+		const clamped = Math.max(0, Math.min(1, progress));
+		state.progress = clamped;
+		if (clamped >= 1) {
+			state.currentValue = to;
+			state.velocity = 0;
+		} else {
+			const range = to - from;
+			state.currentValue = from + range * easeFn(clamped);
+			state.velocity = 0;
+		}
+		onUpdate(state.currentValue, state.velocity);
+		return state.currentValue;
+	};
+	const reset = () => {
+		state.progress = 0;
+		state.currentValue = from;
+		state.velocity = 0;
+	};
+	runner = step;
+	runner.evaluate = evaluate;
+	runner.reset = reset;
+	Object.defineProperty(runner, "currentValue", {
+		get: () => state.currentValue,
+		configurable: true
+	});
+	Object.defineProperty(runner, "velocity", {
+		get: () => state.velocity,
+		configurable: true
+	});
+	Object.defineProperty(runner, "progress", {
+		get: () => state.progress,
+		configurable: true
+	});
+	runner.onStarted = onStarted;
+	runner.onUpdate = config.onUpdate;
+	runner.onProgress = void 0;
+	runner.onEnded = onEnded;
+	return runner;
+};
+var createKeyframeRunner = (config) => {
+	const { keyframes } = config;
+	const onStarted = config.onStarted;
+	const onUpdate = config.onUpdate ?? noop;
+	const onProgress = config.onProgress ?? noop;
+	const onEnded = config.onEnded;
+	const onComplete = config.onComplete;
+	const segments = [];
+	for (let i = 0; i < keyframes.length - 1; i++) {
+		const cur = keyframes[i];
+		const nxt = keyframes[i + 1];
+		segments.push({
+			from: cur.value,
+			to: nxt.value,
+			range: nxt.value - cur.value,
+			durationMs: nxt.gap,
+			easeFn: nxt.easeFn
+		});
+	}
+	const prefixSum = [0];
+	for (let i = 0; i < segments.length; i++) prefixSum.push(prefixSum[i] + segments[i].durationMs);
+	const totalDurationMs = prefixSum[prefixSum.length - 1];
+	const invTotalDuration = totalDurationMs > 0 ? 1 / totalDurationMs : 1;
+	let currentValue = keyframes[0].value;
+	let velocity = 0;
+	let globalProgress = 0;
+	let currentSegmentIndex = 0;
+	let segmentElapsed = 0;
+	let segmentProgress = 0;
+	let runner;
+	if (segments.length === 0) {
+		const complete = () => {
+			onEnded?.();
+			onComplete?.();
+		};
+		const step = (_deltaMs) => {
+			onUpdate(currentValue, 0);
+			onProgress(1);
+			complete();
+			return true;
+		};
+		const evaluate = (prog) => {
+			onUpdate(currentValue, 0);
+			onProgress(Math.max(0, Math.min(1, prog)));
+			return currentValue;
+		};
+		runner = step;
+		runner.evaluate = evaluate;
+		runner.reset = () => {};
+		Object.defineProperty(runner, "currentValue", {
+			get: () => currentValue,
+			configurable: true
+		});
+		Object.defineProperty(runner, "velocity", {
+			get: () => 0,
+			configurable: true
+		});
+		Object.defineProperty(runner, "progress", {
+			get: () => 1,
+			configurable: true
+		});
+		runner.onStarted = onStarted;
+		runner.onUpdate = config.onUpdate;
+		runner.onProgress = config.onProgress;
+		runner.onEnded = onEnded;
+		return runner;
+	}
+	const step = (deltaMs) => {
+		const segment = segments[currentSegmentIndex];
+		segmentElapsed += deltaMs;
+		segmentProgress += deltaMs / segment.durationMs;
+		if (segmentProgress >= 1) segmentProgress = 1;
+		const previousValue = currentValue;
+		const eased = segment.easeFn(segmentProgress);
+		currentValue = segment.from + segment.range * eased;
+		if (segmentProgress >= 1) {
+			currentValue = segment.to;
+			velocity = 0;
+		} else velocity = (currentValue - previousValue) / (deltaMs / 1e3);
+		const elapsedTotal = prefixSum[currentSegmentIndex] + segmentElapsed;
+		globalProgress = Math.min(elapsedTotal * invTotalDuration, 1);
+		onProgress(globalProgress);
+		onUpdate(currentValue, velocity);
+		if (segmentProgress >= 1) if (currentSegmentIndex < segments.length - 1) {
+			currentSegmentIndex++;
+			segmentElapsed = 0;
+			segmentProgress = 0;
+			currentValue = segments[currentSegmentIndex].from;
+			velocity = 0;
+			globalProgress = Math.min(prefixSum[currentSegmentIndex] * invTotalDuration, 1);
+			onProgress(globalProgress);
+		} else {
+			onEnded?.();
+			onComplete?.();
+			return true;
+		}
+		return false;
+	};
+	const evaluate = (progress) => {
+		const clamped = Math.max(0, Math.min(1, progress));
+		const elapsed = clamped * totalDurationMs;
+		let segIdx = 0;
+		for (let i = 0; i < segments.length; i++) {
+			if (elapsed <= prefixSum[i + 1]) {
+				segIdx = i;
+				break;
+			}
+			segIdx = i;
+		}
+		const segment = segments[segIdx];
+		const segStart = prefixSum[segIdx];
+		const segDuration = segment.durationMs;
+		const segProgress = segDuration > 0 ? (elapsed - segStart) / segDuration : 1;
+		const clampedSegProgress = Math.max(0, Math.min(1, segProgress));
+		const eased = segment.easeFn(clampedSegProgress);
+		currentValue = segment.from + segment.range * eased;
+		velocity = 0;
+		globalProgress = clamped;
+		currentSegmentIndex = segIdx;
+		segmentElapsed = elapsed - segStart;
+		segmentProgress = clampedSegProgress;
+		onUpdate(currentValue, velocity);
+		onProgress(clamped);
+		return currentValue;
+	};
+	const reset = () => {
+		currentValue = keyframes[0].value;
+		velocity = 0;
+		globalProgress = 0;
+		currentSegmentIndex = 0;
+		segmentElapsed = 0;
+		segmentProgress = 0;
+	};
+	runner = step;
+	runner.evaluate = evaluate;
+	runner.reset = reset;
+	Object.defineProperty(runner, "currentValue", {
+		get: () => currentValue,
+		configurable: true
+	});
+	Object.defineProperty(runner, "velocity", {
+		get: () => velocity,
+		configurable: true
+	});
+	Object.defineProperty(runner, "progress", {
+		get: () => globalProgress,
+		configurable: true
+	});
+	runner.onStarted = onStarted;
+	runner.onUpdate = config.onUpdate;
+	runner.onProgress = config.onProgress;
+	runner.onEnded = onEnded;
+	return runner;
+};
+//#endregion
+export { createKeyframeRunner, createTweenRunner };

package/dist/shared/types.d.ts

@@ -10,7 +10,6 @@ export type Animation = {
     stop: () => void;
     skipToEnd: () => void;
     kill: () => void;
-    setCurrentValue: (value: number) => void;
     currentValue: number;
     velocity: number;
     progress: number;

package/dist/timeline/create-timeline.d.ts

@@ -1,10 +1,11 @@
-import { Animation, AnimationStatus } from '../shared/types';
+import { KeyframedAnimationOptions } from '../animation/create-animation';
+import { AnimationStatus, DynamicValue } from '../shared/types';
 export type TimelineLayer = {
-    at: number;
-    animation: Animation | Animation[];
+    keyframe: KeyframedAnimationOptions;
+    at: DynamicValue;
 } | {
+    keyframe: KeyframedAnimationOptions;
     gap: number;
-    animation: Animation | Animation[];
 };
 export type Timeline = {
     play: () => Promise<Timeline>;