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