Trình xem vật lý Spring (Framer Motion)

Tinh chỉnh stiffness, damping, mass theo thời gian thực và sao chép ngay mã React chính xác.

Vật lý Spring

Nhấn hoặc di chuột vào ô để xem hoạt ảnh
Đường cong dao động
0ms1908ms
Mã React
<motion.div
  initial={{ x: 0 }}
  animate={{ x: 200 }}
  transition={{
    type: "spring",
    stiffness: 100,
    damping: 10,
    mass: 1,
  }}
/>
stiffness: 100damping: 10mass: 1velocity: 0
FAQ
Nhóm Thiết kế (Design)•Tài liệu kỹ thuật & Đặc tả RFC

Tài liệu & Hướng dẫn chuyên sâu: Trình xem vật lý Spring (Framer Motion Spring Visualizer)

1. Tổng quan & Nguyên lý hoạt động

Hệ thống animation `type: "spring"` của framer-motion mô phỏng một lò xo vật lý thực thụ thay vì dùng easing curve cố định (ease-in-out, cubic-bezier...). Ba tham số stiffness (độ cứng), damping (độ giảm chấn) và mass (khối lượng) tương tác với nhau theo phương trình dao động điều hòa tắt dần, khiến việc hình dung trước "cảm giác chuyển động" chỉ bằng cách đọc số thuần túy gần như bất khả thi — nhà phát triển thường phải sửa số, lưu file, chờ hot-reload, xem lại trên trình duyệt, lặp đi lặp lại hàng chục lần. Trình xem vật lý Spring của Verdbench giải quyết đúng vòng lặp đó: mọi thay đổi trên thanh trượt được áp dụng tức thì lên một khối hộp thử nghiệm thật (dựng bằng chính framer-motion) và một biểu đồ đường cong dao động, đồng thời luôn hiển thị sẵn đoạn mã `<motion.div>` tương ứng để sao chép thẳng vào dự án.

2. Ưu thế kiến trúc & Tính năng nổi bật

Mô phỏng vật lý thời gian thực

Thanh trượt stiffness, damping, mass, velocity cập nhật ngay lập tức cả khối hộp thử nghiệm lẫn đường cong dao động, dựa trên phép tích phân số của phương trình lò xo tắt dần — cùng mô hình vật lý mà framer-motion dùng nội bộ.

Ba cách kích hoạt animation

Có thể nhấn (tap) hoặc di chuột (hover) trực tiếp vào khối hộp, hoặc dùng nút "Phát / Phát lại" riêng — mỗi lần kích hoạt đều phát lại animation từ đầu để dễ so sánh các cấu hình khác nhau.

Xuất mã React chính xác tức thì

Khối mã `<motion.div transition={{ type: "spring", ... }}>` được sinh ra và tô màu cú pháp theo đúng giá trị hiện tại của các thanh trượt, kèm nút sao chép — dán thẳng vào component React mà không cần chỉnh sửa gì thêm.

3. Ý nghĩa các tham số spring của framer-motion

Bốn tham số điều khiển toàn bộ "cảm giác" của chuyển động spring, tương tự như một lò xo vật lý thật ngoài đời:

Tham sốVai tròẢnh hưởng khi tăng giá trị
stiffnessĐộ cứng của lò xo — lực kéo vật thể về vị trí đíchChuyển động nhanh hơn, dứt khoát hơn, dễ gây nảy (overshoot) nếu damping thấp
dampingLực cản/ma sát làm tắt dần dao độngGiảm độ nảy, chuyển động êm và dừng nhanh hơn; quá cao sẽ mất cảm giác lò xo (giống easing thường)
massKhối lượng "ảo" của vật thể đang chuyển độngTăng mass làm chuyển động chậm, nặng nề và dao động lâu tắt hơn dù stiffness/damping không đổi
velocityVận tốc ban đầu khi animation bắt đầuGiá trị khác 0 khiến vật thể "xuất phát" như đã đang chuyển động (hữu ích khi nối tiếp một animation khác)

4. Câu hỏi thường gặp (FAQ)

Giải đáp các thắc mắc phổ biến của lập trình viên khi sử dụng tiện ích Trình xem vật lý Spring (Framer Motion Spring Visualizer).

Vì thời gian hoàn thành và độ nảy của spring phụ thuộc vào biên độ di chuyển thực tế (ví dụ di chuyển 50px sẽ "nhanh và dứt khoát" hơn cảm giác so với di chuyển 500px với cùng một bộ tham số). Công cụ này dùng biên độ cố định (200px) để bạn có một chuẩn tham chiếu nhất quán khi so sánh các cấu hình; khi áp dụng vào dự án thật với biên độ khác, cảm giác có thể cần tinh chỉnh lại đôi chút.

5. Công cụ liên quan