tweened() — svelte Function Reference

Architecture documentation for the tweened() function in tweened.js from the svelte codebase.

Function javascript SharedInternal BitFlags calls 4

Entity Profile

SharedInternal→ BitFlags→ tweened() — svelte Function Reference

Dependency Diagram

graph TD
  cc3dbfb4_f7d6_e5af_e4aa_42d1354dade9["tweened()"]
  99a316ef_52a9_1ecb_3a20_489761af28ad["tweened.js"]
  cc3dbfb4_f7d6_e5af_e4aa_42d1354dade9 -->|defined in| 99a316ef_52a9_1ecb_3a20_489761af28ad
  ba16ff3e_8a18_d3c4_15e9_96304b539f51["writable()"]
  cc3dbfb4_f7d6_e5af_e4aa_42d1354dade9 -->|calls| ba16ff3e_8a18_d3c4_15e9_96304b539f51
  eba6d905_b0bc_b5a4_beb4_5636a78d57a5["set()"]
  cc3dbfb4_f7d6_e5af_e4aa_42d1354dade9 -->|calls| eba6d905_b0bc_b5a4_beb4_5636a78d57a5
  06e615dd_b546_019b_150f_91f3aec71a6b["now()"]
  cc3dbfb4_f7d6_e5af_e4aa_42d1354dade9 -->|calls| 06e615dd_b546_019b_150f_91f3aec71a6b
  185b398a_1ddd_d231_9999_8110452fa052["loop()"]
  cc3dbfb4_f7d6_e5af_e4aa_42d1354dade9 -->|calls| 185b398a_1ddd_d231_9999_8110452fa052
  style cc3dbfb4_f7d6_e5af_e4aa_42d1354dade9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/motion/tweened.js lines 90–160

export function tweened(value, defaults = {}) {
	const store = writable(value);
	/** @type {Task} */
	let task;
	let target_value = value;
	/**
	 * @param {T} new_value
	 * @param {TweenedOptions<T>} [opts]
	 */
	function set(new_value, opts) {
		target_value = new_value;

		if (value == null) {
			store.set((value = new_value));
			return Promise.resolve();
		}

		/** @type {Task | null} */
		let previous_task = task;

		let started = false;
		let {
			delay = 0,
			duration = 400,
			easing = linear,
			interpolate = get_interpolator
		} = { ...defaults, ...opts };

		if (duration === 0) {
			if (previous_task) {
				previous_task.abort();
				previous_task = null;
			}
			store.set((value = target_value));
			return Promise.resolve();
		}

		const start = raf.now() + delay;

		/** @type {(t: number) => T} */
		let fn;
		task = loop((now) => {
			if (now < start) return true;
			if (!started) {
				fn = interpolate(/** @type {any} */ (value), new_value);
				if (typeof duration === 'function')
					duration = duration(/** @type {any} */ (value), new_value);
				started = true;
			}
			if (previous_task) {
				previous_task.abort();
				previous_task = null;
			}
			const elapsed = now - start;
			if (elapsed > /** @type {number} */ (duration)) {
				store.set((value = new_value));
				return false;
			}
			// @ts-ignore
			store.set((value = fn(easing(elapsed / duration))));
			return true;
		});
		return task.promise;
	}
	return {
		set,
		update: (fn, opts) =>
			set(fn(/** @type {any} */ (target_value), /** @type {any} */ (value)), opts),
		subscribe: store.subscribe
	};
}