anim-engine 0.1.2 → 0.2.0

package/dist/timeline/create-timeline.js

@@ -1,119 +1,144 @@
+import { easingFunctions } from "../easing/easing.js";
 import { getTicker } from "../ticker/get-ticker.js";
+import { createKeyframeRunner } from "../animation/runner.js";
 //#region src/timeline/create-timeline.ts
-var createTimeline = (layers, options) => {
-	const { onStarted, onProgress, onEnded } = options ?? {};
-	const batches = [];
-	let lastBatchEnd = 0;
-	for (const layer of layers) {
-		const anims = Array.isArray(layer.animation) ? layer.animation : [layer.animation];
-		const startAt = "at" in layer ? layer.at : lastBatchEnd + layer.gap;
-		const endAt = startAt + Math.max(...anims.map((a) => a.durationMs));
-		batches.push({
-			animations: anims,
+var noop = () => {};
+var resolveValue = (v) => typeof v === "function" ? v() : v;
+var resolveEasing = (ease) => typeof ease === "function" ? ease : easingFunctions[ease];
+var buildFromConfigs = (rawLayers) => {
+	const activeLayers = [];
+	let previousEndAt = 0;
+	for (const layer of rawLayers) {
+		const startAt = "at" in layer ? resolveValue(layer.at) : previousEndAt + layer.gap;
+		const resolvedKeyframes = layer.keyframe.keyframes.map((kf, j) => ({
+			value: resolveValue(kf.value),
+			gap: j === 0 ? 0 : resolveValue(kf.gap ?? 0),
+			easeFn: resolveEasing(kf.ease ?? "inOutSine")
+		}));
+		let layerDuration = 0;
+		for (let i = 1; i < resolvedKeyframes.length; i++) layerDuration += resolvedKeyframes[i].gap;
+		const runner = createKeyframeRunner({
+			keyframes: resolvedKeyframes,
+			onStarted: layer.keyframe.onStarted,
+			onUpdate: layer.keyframe.onUpdate,
+			onProgress: layer.keyframe.onProgress,
+			onEnded: layer.keyframe.onEnded
+		});
+		activeLayers.push({
 			startAt,
-			endAt,
-			started: false
+			endAt: startAt + layerDuration,
+			runner,
+			started: false,
+			ended: false
 		});
-		lastBatchEnd = endAt;
+		previousEndAt = startAt + layerDuration;
 	}
-	batches.sort((a, b) => a.startAt - b.startAt);
-	const totalDurationMs = Math.max(0, ...batches.map((b) => b.endAt));
-	let status = "stopped";
+	activeLayers.sort((a, b) => a.startAt - b.startAt);
+	return {
+		activeLayers,
+		totalDurationMs: Math.max(0, ...activeLayers.map((l) => l.endAt))
+	};
+};
+var createTimeline = (layers, options) => {
+	const { onStarted, onEnded } = options ?? {};
+	const onProgress = options?.onProgress ?? noop;
+	const rawLayers = layers;
+	let state = buildFromConfigs(rawLayers);
+	let activeLayers = state.activeLayers;
+	let totalDurationMs = state.totalDurationMs;
+	let timelineStatus = "stopped";
 	let elapsedMs = 0;
 	let resolvePromise;
-	let pendingAnimations = 0;
+	let remainingLayers = activeLayers.length;
 	const ticker = getTicker();
+	const finish = () => {
+		timelineStatus = "stopped";
+		ticker.remove(update);
+		onEnded?.();
+		resolvePromise?.(timeline);
+		resolvePromise = void 0;
+	};
+	const update = (deltaMs) => {
+		elapsedMs += deltaMs;
+		for (const layer of activeLayers) {
+			if (!layer.started && elapsedMs >= layer.startAt) {
+				layer.runner.reset();
+				layer.runner.onStarted?.();
+				layer.started = true;
+			}
+			if (layer.started && !layer.ended) {
+				if (layer.runner(deltaMs)) {
+					layer.ended = true;
+					remainingLayers--;
+				}
+			}
+		}
+		onProgress(totalDurationMs > 0 ? Math.min(elapsedMs / totalDurationMs, 1) : 1);
+		if (remainingLayers <= 0) finish();
+	};
 	const play = () => {
-		if (status === "dead") throw new Error("Cannot play a dead timeline");
+		if (timelineStatus === "dead") throw new Error("Cannot play a dead timeline");
+		state = buildFromConfigs(rawLayers);
+		activeLayers = state.activeLayers;
+		totalDurationMs = state.totalDurationMs;
+		remainingLayers = activeLayers.length;
 		elapsedMs = 0;
-		pendingAnimations = 0;
-		batches.forEach((b) => {
-			b.started = false;
-		});
 		const promise = new Promise((resolve) => {
 			resolvePromise = resolve;
 		});
-		status = "playing";
+		timelineStatus = "playing";
 		onStarted?.();
 		ticker.add(update);
 		return promise;
 	};
 	const pause = () => {
-		if (status !== "playing") return;
-		status = "paused";
+		if (timelineStatus !== "playing") return;
+		timelineStatus = "paused";
 		ticker.remove(update);
-		for (const batch of batches) if (batch.started) {
-			for (const anim of batch.animations) if (anim.status === "playing") anim.pause();
-		}
 	};
 	const resume = () => {
-		if (status !== "paused") return;
-		status = "playing";
-		for (const batch of batches) if (batch.started) {
-			for (const anim of batch.animations) if (anim.status === "paused") anim.resume();
-		}
+		if (timelineStatus !== "paused") return;
+		timelineStatus = "playing";
 		ticker.add(update);
 	};
 	const stop = () => {
-		if (status !== "playing" && status !== "paused") return;
-		status = "stopped";
+		if (timelineStatus !== "playing" && timelineStatus !== "paused") return;
+		timelineStatus = "stopped";
 		ticker.remove(update);
-		for (const batch of batches) if (batch.started) for (const anim of batch.animations) anim.stop();
 		resolvePromise?.(timeline);
 		resolvePromise = void 0;
 	};
 	const skipToEnd = () => {
-		status = "stopped";
+		for (const layer of activeLayers) {
+			layer.runner.evaluate(1);
+			layer.runner.onEnded?.();
+		}
+		timelineStatus = "stopped";
 		ticker.remove(update);
-		for (const batch of batches) for (const anim of batch.animations) anim.skipToEnd();
 		onEnded?.();
 		resolvePromise?.(timeline);
 		resolvePromise = void 0;
 	};
 	const kill = () => {
-		status = "dead";
-		ticker.remove(update);
-		for (const batch of batches) for (const anim of batch.animations) anim.kill();
-		resolvePromise = void 0;
-	};
-	const update = (deltaMs) => {
-		if (status !== "playing") return;
-		elapsedMs += deltaMs;
-		for (const batch of batches) if (!batch.started && elapsedMs >= batch.startAt) {
-			batch.started = true;
-			pendingAnimations += batch.animations.length;
-			for (const anim of batch.animations) anim.play().then(() => {
-				pendingAnimations--;
-				checkComplete();
-			});
-		}
-		onProgress?.(totalDurationMs > 0 ? Math.min(elapsedMs / totalDurationMs, 1) : 0);
-		if (batches.every((b) => b.started) && pendingAnimations <= 0) finish();
-	};
-	const checkComplete = () => {
-		if (pendingAnimations <= 0 && status === "playing" && batches.every((b) => b.started)) finish();
-	};
-	const finish = () => {
-		status = "stopped";
+		timelineStatus = "dead";
 		ticker.remove(update);
-		onEnded?.();
-		resolvePromise?.(timeline);
 		resolvePromise = void 0;
 	};
 	const setProgress = (value) => {
-		if (status === "playing") pause();
+		if (timelineStatus === "playing") pause();
 		elapsedMs = Math.max(0, Math.min(1, value)) * totalDurationMs;
-		for (const batch of batches) if (elapsedMs < batch.startAt) {
-			for (const anim of batch.animations) anim.setProgress(0);
-			batch.started = false;
+		for (const layer of activeLayers) if (elapsedMs < layer.startAt) {
+			layer.runner.evaluate(0);
+			layer.started = false;
+			layer.ended = false;
 		} else {
-			batch.started = true;
-			const batchElapsed = elapsedMs - batch.startAt;
-			for (const anim of batch.animations) {
-				const localProgress = anim.durationMs > 0 ? Math.min(batchElapsed / anim.durationMs, 1) : 1;
-				anim.setProgress(localProgress);
-			}
+			layer.started = true;
+			const layerDuration = layer.endAt - layer.startAt;
+			const localProgress = layerDuration > 0 ? Math.min((elapsedMs - layer.startAt) / layerDuration, 1) : 1;
+			layer.runner.evaluate(localProgress);
+			layer.ended = localProgress >= 1;
 		}
+		remainingLayers = activeLayers.filter((l) => !l.ended).length;
 	};
 	const timeline = {
 		play,
@@ -124,10 +149,10 @@ var createTimeline = (layers, options) => {
 		kill,
 		setProgress,
 		get progress() {
-			return totalDurationMs > 0 ? Math.min(elapsedMs / totalDurationMs, 1) : 0;
+			return totalDurationMs > 0 ? Math.min(elapsedMs / totalDurationMs, 1) : 1;
 		},
 		get status() {
-			return status;
+			return timelineStatus;
 		},
 		get durationMs() {
 			return totalDurationMs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anim-engine",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "private": false,
   "description": "JavaScript library for animating numbers",
   "license": "MIT",
@@ -30,6 +30,7 @@
     "prepublishOnly": "npm run build",
     "bench": "vitest bench src/benchmarks/ --run",
     "bench:baseline": "vitest bench src/benchmarks/ --run --outputJson baselines/benchmark.json",
+    "bench:compare": "vitest bench src/benchmarks/ --run --compare baselines/benchmark.json",
     "format": "oxfmt src/",
     "format:check": "oxfmt --check src/",
     "fmt": "oxfmt src/"