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 版本可用

一个包装器，用于包装具有弹簧般行为的值。对 spring.target 的更改将导致 spring.current 随时间向其移动，同时考虑 spring.stiffness 和 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>;

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

<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 追赶上它时 resolve。

如果 options.instant 为 true，spring.current 会立即匹配 spring.target。

如果提供了 options.preserveMomentum，弹簧将在指定的毫秒数内继续其当前轨迹。这对于”甩动”手势等情况很有用。

damping: number;

precision: number;

stiffness: number;

target: T;

弹簧的最终值。此属性仅存在于 Spring 类中，而不是遗留的 spring store 中。

get current(): T;

弹簧的当前值。此属性仅存在于 Spring 类中，而不是遗留的 spring store 中。

Tween

自 5.8.0 版本可用

一个值的包装器，平滑地过渡到其目标值。对 tween.target 的更改将使 tween.current 随时间朝其移动，同时考虑 delay、duration 和 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>;

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

<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 追赶上它时 resolve。

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

get current(): T;

set target(v: T);

get target(): T;

#private;

prefersReducedMotion

自 5.7.0 版本可用

一个媒体查询，在用户倾向减弱动效时匹配。

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

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

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

{#if visible}
	<p transition:fly={{ y: prefersReducedMotion.current ? 0 : 200 }}>
		进入，除非用户倾向减弱动效
	</p>
{/if}

const prefersReducedMotion: MediaQuery;

spring

请使用 Spring

Svelte 中的 spring 函数创建一个值在不停变动的 store，其运动模拟弹簧的行为。这意味着当值发生变化时，它不会以稳定的速率过渡，而是会根据提供的物理参数像弹簧一样”弹跳”。这为过渡增加了真实感，可以提升用户体验。

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

tweened

请使用 Tween

Svelte 中的 tweened store 是一种特殊类型的 store，它在一段时间内提供状态值之间的平滑过渡。

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 store 中存在，而不在 Spring 类中

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

已弃用仅在遗留的 spring store 中存在，而不在 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>;

在 GitHub 编辑此页面

svelte/legacy svelte/reactivity/window