Gugus Framer Motion8 menit membaca·Oleh tim ExodeUI
Menguasai Fisika Pegas di Framer Motion & ExodeUI
Panduan lengkap fisika pegas di Framer Motion. Kuasai kekakuan, redaman, massa, dan restDelta, serta temukan pembuatan visual dengan ExodeUI.
Ringkasan & Definisi Langsung
Pengambilan Inti
Fisika pegas di Framer Motion menggantikan kurva kemudahan berbasis waktu dengan simulasi fisik. Diatur oleh kekakuan (ketegangan), redaman (gesekan), dan massa, pegas secara otomatis menghitung durasi berdasarkan jarak dan kecepatan masukan, memastikan interaksi tidak terasa tiba-tiba atau lamban.
Tiga Parameter Pegas Framer Motion
Di Framer Motion, transisi: { type: "spring" } memerlukan tiga parameter fisik utama:
- kekakuan: Nilai yang lebih tinggi (misalnya 500) sesuai dengan target dengan cepat; nilai yang lebih rendah (misalnya 150) meluncur dengan lembut.
- redaman: Kontrol memantul. Redaman di bawah 20 menyebabkan pantulan yang nyata; redaman sekitar 28 menciptakan penyelesaian yang bersih dan profesional.
- massa: Mengalikan momentum dan jarak perlambatan. Standarnya adalah 1.0.
Cuplikan Implementasi Produksi
Implementasi Komponen Interaktif
// 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>
);