animation-helpers.js — svelte Source File

Source Code

import { flushSync } from 'svelte';
import { raf as svelte_raf } from 'svelte/internal/client';
import { queue_micro_task } from '../src/internal/client/dom/task.js';

export const raf = {
	/** @type {Set<Animation>} */
	animations: new Set(),
	/** @type {Set<(n: number) => void>} */
	ticks: new Set(),
	tick,
	time: 0,
	reset() {
		this.time = 0;
		this.animations.clear();
		this.ticks.clear();

		svelte_raf.tick = (f) => {
			raf.ticks.add(f);
		};
		svelte_raf.now = () => raf.time;
		svelte_raf.tasks.clear();
	}
};

/**
 * @param {number} time
 */
function tick(time) {
	raf.time = time;
	flushSync();
	for (const animation of raf.animations) {
		animation._update();
	}
	for (const tick of raf.ticks) {
		tick(raf.time);
	}
}

class Animation {
	#keyframes;
	#duration;
	#delay;

	#offset = raf.time;

	/** @type {Function} */
	#onfinish = () => {};

	/** @type {Function} */
	#oncancel = () => {};

	target;
	currentTime = 0;
	startTime = 0;
	playState = 'running';

	/**
	 * @param {HTMLElement} target
	 * @param {Keyframe[] | PropertyIndexedKeyframes | null} keyframes
	 * @param {number | KeyframeAnimationOptions | undefined} options
// ... (156 more lines)