メインコンテンツへスキップ

svelte/motion

import { 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.

spring
, 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.

tweened
} from 'svelte/motion';

spring

Svelte の spring 関数は、スプリングの挙動をシミュレートする物理パラメータによって、一定速度での遷移ではなく、値が変更されるとスプリングのように「バウンドする」、モーションする値のストアを作成します。これにより、遷移に現実的な感覚が加わり、ユーザーエクスペリエンスが向上します。

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

tweened

Svelte の tweened ストアは、状態値が時とともにスムーズに遷移する特別なタイプのストアです。

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

バネ

interface Spring<T> extends Readable<T> {}
set: (new_value: T, opts?: SpringUpdateOpts) => Promise<void>;
update: (fn: Updater<T>, opts?: SpringUpdateOpts) => Promise<void>;
precision: number;
damping: number;
stiffness: number;

トゥイーン

interface Tweened<T> extends Readable<T> {}
set(value: T, opts?: TweenedOptions<T>): Promise<void>;
update(updater: Updater<T>, opts?: TweenedOptions<T>): Promise<void>;

GitHub でこのページを編集