spring() Store：物理ベースのアニメーション
調整可能な剛性と減衰を使って、自然な動きで値をアニメーション化します。
「spring() Store：物理ベースのアニメーション」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
ばねの物理演算
springストアは、実際のばねのように、stiffnessとdampingを使って値をアニメーションさせます。
インポート
svelte/motionからインポートします。
import { spring } from "svelte/motion";Springを作成する
初期値とオプションを渡します。
const pos = spring({ x: 0, y: 0 }, { stiffness: 0.2, damping: 0.4 });目標値を更新する
新しい目標値を設定すると、値がその値に向かってアニメーションします。
pos.set({ x: 100, y: 50 });$で購読する
マークアップ内で値をリアクティブに使用します。
<div style="transform: translate({$pos.x}px, {$pos.y}px);"></div>マウスを追従させる
マウス座標でspringの目標値を更新し、ポインターを自然に追従させます。
即時設定
{ hard: true }を渡すと、すぐに値が切り替わります。
pos.set({x: 0, y: 0}, { hard: true });stiffness
stiffnessが高いほど、目標値へ速く近づきます。
damping
dampingが高いほど、振動が小さくなります。1の場合はバウンスしません。
ベクトルとオブジェクト
Springは配列やネストしたオブジェクト内の数値を補間します。
パフォーマンス
Springは内部でrAFを使用します。多くのインスタンスを同時に動かしても滑らかです。
簡単な確認
springのstiffnessは何を制御しますか。
まとめ
springストアは物理演算によってアニメーションします。望ましい動きになるようにstiffnessとdampingを調整してください。
よくある質問
「spring() Store：物理ベースのアニメーション」レッスンは無料ですか？
はい。「spring() Store：物理ベースのアニメーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「spring() Store：物理ベースのアニメーション」で何を学びますか？
調整可能な剛性と減衰を使って、自然な動きで値をアニメーション化します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「spring() Store：物理ベースのアニメーション」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- spring() Store：物理ベースのアニメーション
- tweened() Store：期間とEasing
- 補間関数
- MotionによるSVGパスのアニメーション