Кластер Framer Motion8 хвилин читання·Команда ExodeUI
Освоєння весняної фізики в Framer Motion і ExodeUI
Повний посібник з фізики весни в Framer Motion. Опануйте жорсткість, демпфування, масу та restDelta, а також відкрийте для себе візуальне авторство за допомогою ExodeUI.
Пряме резюме та визначення
Основний винос
Фізика весни в Framer Motion замінює засновані на часі криві легкості фізичним моделюванням. Пружини, керовані жорсткістю (напругою), амортизацією (тертям) і масою, автоматично розраховують тривалість на основі відстані та вхідної швидкості, гарантуючи, що взаємодія ніколи не буде різкою або млявою.
Три параметри пружин Framer Motion
У Framer Motion перехід: { type: "пружина" } приймає три основні фізичні параметри:
- жорсткість: вищі значення (наприклад, 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>
);