Svelte参考

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

自 5.8.0 起可用

¥Available since 5.8.0

一个值的封装器，其行为类似于弹簧。对 spring.target 的更改将导致 spring.current 随着时间的推移向其移动，同时考虑到 spring.stiffness 和 spring.damping 参数。

¥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.

<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>;

创建一个弹簧，其值绑定到 fn 的返回值。这必须在效果根内调用（例如，在组件初始化期间）。

¥Create a spring whose value is bound to the return value of fn. This must be called inside an effect root (for example, during component initialisation).

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

	let { number } = $props();

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

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

将 spring.target 设置为 value 并返回一个 Promise，该 Promise 在 spring.current 赶上它时解析。

¥Sets spring.target to value and returns a Promise that resolves if and when spring.current catches up to it.

如果 options.instant 是 true，则 spring.current 立即匹配 spring.target。

¥If options.instant is true, spring.current immediately matches spring.target.

如果提供了 options.preserveMomentum，则弹簧将继续其当前轨迹指定的毫秒数。这对于 ‘fling’ 手势之类的东西很有用。

¥If options.preserveMomentum is provided, the spring will continue on its current trajectory for the specified number of milliseconds. This is useful for things like ‘fling’ gestures.

damping: number;

precision: number;

stiffness: number;

target: T;

spring 的结束值。此属性仅存在于 Spring 类中，而不是旧版 spring 存储中。

¥The end value of the spring. This property only exists on the Spring class, not the legacy spring store.

get current(): T;

spring 的当前值。此属性仅存在于 Spring 类中，而不是旧版 spring 存储中。

¥The current value of the spring. This property only exists on the Spring class, not the legacy spring store.

补间(Tween)

¥Tween

自 5.8.0 起可用

¥Available since 5.8.0

一个值的封装器，可平滑地补间到其目标值。对 tween.target 的更改将导致 tween.current 随着时间的推移而向其靠拢，同时考虑到 delay、duration 和 easing 选项。

¥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.

<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>;

创建一个补间，其值绑定到 fn 的返回值。这必须在效果根内调用（例如，在组件初始化期间）。

¥Create a tween whose value is bound to the return value of fn. This must be called inside an effect root (for example, during component initialisation).

<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>;

将 tween.target 设置为 value 并返回一个 Promise，该 Promise 在 tween.current 赶上它时解析。

¥Sets tween.target to value and returns a Promise that resolves if and when tween.current catches up to it.

如果提供了 options，它们将覆盖补间的默认值。

¥If options are provided, they will override the tween’s defaults.

get current(): T;

set target(v: T);

get target(): T;

prefersReducedMotion

自 5.7.0 起可用

¥Available since 5.7.0

如果用户倾向于减少运动，则匹配媒体查询。

¥A media query that matches if the user prefers reduced motion.

<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 }}>
		flies in, unless the user prefers reduced motion
	</p>
{/if}

const prefersReducedMotion: MediaQuery;

spring

改用 Spring

¥Use Spring instead

Svelte 中的 spring 函数创建一个存储，其值是动画的，其运动模拟了弹簧的行为。这意味着当值发生变化时，它不是以稳定的速率过渡，而是像弹簧一样 “bounces”，具体取决于提供的物理参数。这为过渡增加了一定程度的真实感，并可以增强用户体验。

¥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.

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

tweened

改用 Tween

¥Use Tween instead

Svelte 中的补间存储是一种特殊类型的存储，可随时间提供状态值之间的平滑过渡。

¥A tweened store in Svelte is a special type of store that provides smooth transitions between state values over time.

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>;

已弃用仅存在于旧版 spring 存储中，不存在于 Spring 类中

¥deprecated Only exists on the legacy spring store, not the Spring class

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

已弃用仅存在于旧版 spring 存储中，不存在于 Spring 类中

¥deprecated Only exists on the legacy spring store, not the Spring class

precision: number;

damping: number;

stiffness: number;

补间(Tweened)

¥Tweened

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

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

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

svelte/legacy svelte/reactivity/window