Framer Motion Kümesi8 dakikalık okuma·ExodeUI ekibi
Framer Motion ve ExodeUI'te Bahar Fiziğinde Uzmanlaşmak
Framer Motion'te yay fiziğiyle ilgili eksiksiz kılavuz. Sertlik, sönümleme, kütle ve restDelta'da ustalaşın ve ExodeUI ile görsel yazmayı keşfedin.
Özet ve tanım
Ana nokta
Framer Motion'teki yay fiziği, zamana dayalı hareket hızı eğrilerini fiziksel simülasyonla değiştirir. Sertlik (gerginlik), sönüm (sürtünme) ve kütle tarafından yönetilen yaylar, mesafeye ve giriş hızına göre süreyi otomatik olarak hesaplayarak etkileşimlerin asla ani veya yavaş hissetmemesini sağlar.
Framer Motion Yayların Üç Parametresi
Framer Motion'te geçiş: { type: "spring" } üç temel fiziksel parametreyi alır:
- sertlik: Daha yüksek değerler (örneğin 500) hızla hedefe yapışır; daha düşük değerler (örneğin 150) yavaşça kayar.
- sönümleme: Geri tepmeyi kontrol eder. 20'nin altındaki sönümleme gözle görülür sıçramaya neden olur; 28 civarındaki sönümleme temiz, profesyonel bir yerleşme sağlar.
- kütle: Momentum ve yavaşlama mesafesini çarpar. Varsayılan 1,0'dır.
Üretim için uygulama örneği
Etkileşimli bileşen uygulaması
// 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>
);