SvelteRéférence

svelte/motion

import {
	class Spring<T>
interface Spring<T>A wrapper for a value that behaves in a spring-like fashion. Changes to spring.target will cause spring.current to
move towards it over time, taking account of the spring.stiffness and spring.damping parameters.
&#x3C;script>
	import { Spring } from 'svelte/motion';

	const spring = new Spring(0);
&#x3C;/script>

&#x3C;input type="range" bind:value={spring.target} />
&#x3C;input type="range" bind:value={spring.current} disabled />
@since5.8.0Spring,
	class Tween<T>A wrapper for a value that tweens smoothly to its target value. Changes to tween.target will cause tween.current to
move towards it over time, taking account of the delay, duration and easing options.
&#x3C;script>
	import { Tween } from 'svelte/motion';

	const tween = new Tween(0);
&#x3C;/script>

&#x3C;input type="range" bind:value={tween.target} />
&#x3C;input type="range" bind:value={tween.current} disabled />
@since5.8.0Tween,
	const prefersReducedMotion: MediaQueryA media query that matches if the user prefers reduced motion.
&#x3C;script>
	import { prefersReducedMotion } from 'svelte/motion';
	import { fly } from 'svelte/transition';

	let visible = $state(false);
&#x3C;/script>

&#x3C;button onclick={() => visible = !visible}>
	toggle
&#x3C;/button>

{#if visible}
	&#x3C;p transition:fly={{ y: prefersReducedMotion.current ? 0 : 200 }}>
		flies in, unless the user prefers reduced motion
	&#x3C;/p>
{/if}
@since5.7.0prefersReducedMotion,
	function spring<T = any>(value?: T | undefined, opts?: SpringOpts | undefined): Spring<T>The spring function in Svelte creates a store whose value is animated, with a motion that simulates the behavior of a spring. This means when the value changes, instead of transitioning at a steady rate, it “bounces” like a spring would, depending on the physics parameters provided. This adds a level of realism to the transitions and can enhance the user experience.
@deprecatedUse Spring insteadspring,
	function tweened<T>(value?: T | undefined, defaults?: TweenedOptions<T> | undefined): Tweened<T>A tweened store in Svelte is a special type of store that provides smooth transitions between state values over time.
@deprecatedUse Tween insteadtweened
} from 'svelte/motion';

Spring

Disponible à partir de la version 5.8.0

Un utilitaire permettant de créer un valeur évoluant à la manière d’un ressort. Les changements de valeur de spring.target vont déclencher l’évolution de spring.current vers cette valeur au cours du temps, en prenant en compte les paramètres de spring.stiffness et spring.damping.

<script>
	import { Spring } from 'svelte/motion';

	const spring = new Spring(0);
</script>

<input type="range" bind:value={spring.target} />
<input type="range" bind:value={spring.current} disabled />

class Spring<T> {…}

constructor(value: T, options?: SpringOpts);

static of<U>(fn: () => U, options?: SpringOpts): Spring<U>;

Crée un ressort dont la valeur est liée à la valeur de retour de fn. Ceci doit être appelé à la racine d’un effet (par exemple, pendant l’initialisation d’un composant).

<script>
	import { Spring } from 'svelte/motion';

	let { number } = $props();

	const spring = Spring.of(() => number);
</script>

set(value: T, options?: SpringUpdateOpts): Promise<void>;

Met la valeur de spring.target à value et renvoie une Promise qui se résout si et lorsque spring.current atteint cette valeur.

Si options.instant vaut true, spring.current vaut immédiatement spring.target.

Si options.preserveMomentum est fournie, le ressort va continuer sur sa trajectoire pendant le nombre de millisecondes fourni. Cela permet de simuler des mouvements plus “relâchés”.

damping: number;

precision: number;

stiffness: number;

target: T;

La valeur finale du ressort. Cette propriété n’existe que sur la classe Spring, pas sur le store legacy spring.

get current(): T;

La valeur courante du ressort. Cette propriété n’existe que sur la classe Spring, pas sur le store legacy spring.

Tween

Disponible à partir de la version 5.8.0

Un utilitaire permettant de créer une valeur évoluant de manière “douce” vers sa valeur finale. Les changements de valeur de tween.target vont déclencher l’évolution de tween.current vers cette valeur au cours du temps, en prenant en compte les options delay, duration, et easing.

<script>
	import { Tween } from 'svelte/motion';

	const tween = new Tween(0);
</script>

<input type="range" bind:value={tween.target} />
<input type="range" bind:value={tween.current} disabled />

class Tween<T> {…}

static of<U>(fn: () => U, options?: TweenedOptions<U> | undefined): Tween<U>;

Crée un tween dont la valeur est liée à la valeur de retour de fn. Ceci doit être appelé à la racine d’un effet (par exemple, pendant l’initialisation d’un composant).

<script>
	import { Tween } from 'svelte/motion';

	let { number } = $props();

	const tween = Tween.of(() => number);
</script>

constructor(value: T, options?: TweenedOptions<T>);

set(value: T, options?: TweenedOptions<T> | undefined): Promise<void>;

Met la valeur de tween.target à value et renvoie une Promise qui se résout si et lorsque que tween.current atteint cette valeur.

Si des options sont fournies, elles vont écraser les valeurs par défaut du tween.

get current(): T;

set target(v: T);

get target(): T;

#private;

prefersReducedMotion

Disponible à partir de la version 5.7.0

Une media query qui correspond au choix de l’utilisateur ou l’utilisatrice d’activer l’option de réduire la quantité des animations.

<script>
	import { prefersReducedMotion } from 'svelte/motion';
	import { fly } from 'svelte/transition';

	let visible = $state(false);
</script>

<button onclick={() => visible = !visible}>
	toggle
</button>

{#if visible}
	<p transition:fly={{ y: prefersReducedMotion.current ? 0 : 200 }}>
		entre en volant, sauf si l'utilisateur veut moins d'animations
	</p>
{/if}

const prefersReducedMotion: MediaQuery;

spring

Utilisez plutôt Spring

La fonction spring de Svelte crée un store dont la valeur est animée avec un mouvement qui simule le comportement d’un ressort. Ceci signifie que lorsque la valeur du store change, au lieu de transitionner avec un mouvement linéaire, elle “rebondit” comme le ferait un ressort, en fonction des paramètres physiques fournis. Ceci ajoute un certain niveau de réalisme aux mouvements et permet d’améliorer l’expérience utilisateur.

function spring<T = any>(
	value?: T | undefined,
	opts?: SpringOpts | undefined
): Spring<T>;

tweened

Utilisez plutôt Tween

La fonction tweened de Svelte crée un store spécial permettant de fournir des transitions de valeur “douces” au fil du temps.

function tweened<T>(
	value?: T | undefined,
	defaults?: TweenedOptions<T> | undefined
): Tweened<T>;

Spring

interface Spring<T> extends Readable<T> {…}

set(new_value: T, opts?: SpringUpdateOpts): Promise<void>;

update: (fn: Updater<T>, opts?: SpringUpdateOpts) => Promise<void>;

déprécié N’existe que sur le store legacy spring, pas sur la classe Spring

subscribe(fn: (value: T) => void): Unsubscriber;

déprécié N’existe que sur le store legacy spring, pas sur la classe Spring

precision: number;

damping: number;

stiffness: number;

Tweened

interface Tweened<T> extends Readable<T> {…}

set(value: T, opts?: TweenedOptions<T>): Promise<void>;

update(updater: Updater<T>, opts?: TweenedOptions<T>): Promise<void>;

Modifier cette page sur Github

précédent suivant

svelte/legacy svelte/reactivity/window