Framer Motion クラスター8 分で読めます·ExodeUI チーム
Framer Motion および ExodeUI でバネの物理学をマスターする
Framer Motion のバネ物理学の完全ガイド。剛性、減衰、質量、レストデルタをマスターし、ExodeUI を使用したビジュアル オーサリングを発見してください。
要点まとめ
核心
Framer Motion のスプリング物理学は、時間ベースのイーズ カーブを物理シミュレーションに置き換えます。剛性 (張力)、減衰 (摩擦)、質量によって制御されるスプリングは、距離と入力速度に基づいて持続時間を自動的に計算し、インタラクションが突然または鈍く感じられることがないようにします。
Framer Motion スプリングの 3 つのパラメータ
Framer Motion では、transition: { type: "spring" } は 3 つの主要な物理パラメータを取ります。
- 剛性: 値が大きいほど (500 など)、ターゲットに素早くスナップします。低い値 (例: 150) はゆっくりと滑ります。
- ダンピング：リバウンドをコントロールします。ダンピングを 20 未満にすると、顕著なバウンスが発生します。ダンピングを約 28 に設定すると、クリーンでプロフェッショナルなサウンドが得られます。
- 質量: 運動量と減速距離を乗算します。デフォルトは 1.0 です。
実装コード例
インタラクティブコンポーネントの実装
// Framer Motion Spring Transition
import { motion } from 'framer-motion';
export const SnappyModal = () => (
<motion.div
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{
type: 'spring',
stiffness: 420,
damping: 26,
mass: 0.9
}}
className="modal-box p-8 rounded-2xl bg-zinc-900 text-white"
>
Physics-Driven Modal
</motion.div>
);