0Pricing
Sveltejs Academy · レッスン

spring()とtweened() Store

物理ベースのspring storeまたは時間ベースのtweened storeで数値をアニメーションさせます。

「spring()とtweened() Store」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。

モーションストア

Svelteには、モーションに対応したストアとして、期間ベースの tweened と物理演算ベースの spring が用意されています。

インポート

svelte/motion からインポートします。

import { tweened, spring } from "svelte/motion";

Tweenedの作成

初期値と、duration や easing などのオプションを渡します。

const progress = tweened(0, { duration: 500 });

設定または更新

set() または update() を呼び出すと、ストアが値の間を自動的にアニメーションします。

progress.set(1);

Springの作成

Springストアには、物理的な動作を指定する stiffness と damping オプションがあります。

const coords = spring({ x: 0, y: 0 }, { stiffness: 0.1, damping: 0.25 });

$で購読

コンポーネントでは、通常のストアと同じように使用します。

<p>{$progress}</p>

数値とオブジェクト

どちらのストアも、数値や、ネストされた数値プロパティを持つ形状を補間します。

カスタム補間

色などの数値以外の値には、カスタムの interpolate 関数を渡します。

Springの即時設定

spring.set(value, { hard: true }) を呼び出すと、アニメーションなしで値を切り替えます。

使用例

マウス追跡、ドラッグ、スクロール駆動のUI、ゲージ、プログレスバーなどに使用できます。

Transformとの組み合わせ

アニメーションする値を style="transform: ..." に適用すると、滑らかに動かせます。

確認問題

物理演算のような動きを実現するストアはどれですか？

まとめ

svelte/motion の tweened と spring を使うと、数値を滑らかにアニメーションできます。

よくある質問

「spring()とtweened() Store」レッスンは無料ですか？

はい。「spring()とtweened() Store」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。

「spring()とtweened() Store」で何を学びますか？

物理ベースのspring storeまたは時間ベースのtweened storeで数値をアニメーションさせます。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Sveltejs Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「spring()とtweened() Store」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSveltejs Academyレッスンでコードを書いて実行できますか？

はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. リストの並べ替えに対するanimate:flip
  2. spring()とtweened() Store
  3. カスタムEasing関数
  4. トランジションとアニメーションの組み合わせ
← Sveltejs Academyに戻る