Animation Class — svelte Architecture

Source Code

packages/svelte/tests/animation-helpers.js lines 39–163

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
	 */
	constructor(target, keyframes, options) {
		this.target = target;
		this.#keyframes = Array.isArray(keyframes) ? keyframes : [];
		if (typeof options === 'number') {
			this.#duration = options;
			this.#delay = 0;
		} else {
			const { duration = 0, delay = 0 } = options ?? {};
			if (typeof duration === 'object') {
				this.#duration = 0;
			} else {
				this.#duration = Math.round(+duration);
			}
			this.#delay = delay;
		}

		this._update();
	}

	_update() {
		this.currentTime = raf.time - this.#offset - this.#delay;
		if (this.currentTime < 0) return;

		const target_frame = this.currentTime / this.#duration;
		this.#apply_keyframe(target_frame);

		if (this.currentTime >= this.#duration) {
			this.#onfinish();
			raf.animations.delete(this);
		}
	}

	/**
	 * @param {number} t
	 */
	#apply_keyframe(t) {
		const n = Math.min(1, Math.max(0, t)) * (this.#keyframes.length - 1);

		const lower = this.#keyframes[Math.floor(n)];
		const upper = this.#keyframes[Math.ceil(n)];

		let frame = lower;
		if (lower !== upper) {
			frame = {};

			for (const key in lower) {
				frame[key] = interpolate(
					/** @type {string} */ (lower[key]),
					/** @type {string} */ (upper[key]),
					n % 1
				);
			}
		}

		for (let prop in frame) {
			// @ts-ignore
			this.target.style[prop] = frame[prop];
		}