Klaster Framer Motion8 minut czytania·Zespół ExodeUI
Opanowanie fizyki sprężyn w Framer Motion i ExodeUI
Kompletny przewodnik po fizyce sprężyn w Framer Motion. Opanuj sztywność, tłumienie, masę i restDelta oraz odkryj tworzenie obrazów dzięki ExodeUI.
Bezpośrednie podsumowanie i definicja
Rdzeń na wynos
Fizyka sprężyn w Framer Motion zastępuje oparte na czasie krzywe łatwości symulacją fizyczną. Regulowane przez sztywność (napięcie), tłumienie (tarcie) i masę, sprężyny automatycznie obliczają czas trwania na podstawie odległości i prędkości wejściowej, dzięki czemu interakcje nigdy nie wydają się gwałtowne lub powolne.
Trzy parametry sprężyn Framer Motion
W Framer Motion przejście: { type: "spring" } przyjmuje trzy podstawowe parametry fizyczne:
- sztywność: Wyższe wartości (np. 500) powodują szybkie przyciąganie do celu; niższe wartości (np. 150) przesuwają się delikatnie.
- tłumienie: Kontroluje odbicie. Tłumienie poniżej 20 powoduje zauważalne odbijanie; tłumienie około 28 tworzy czyste, profesjonalne osadzenie.
- masa: Zwielokrotnia pęd i odległość hamowania. Wartość domyślna to 1,0.
Fragment wdrożenia produkcyjnego
Implementacja komponentów interaktywnych
// 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>
);