Hoạt hình mùa xuân: Vật lý của chuyển động giao diện người dùng tự nhiên
Tìm hiểu cách hoạt động của hoạt ảnh mùa xuân trong thiết kế giao diện người dùng. Hiểu độ cứng, giảm xóc, khối lượng và vận tốc. Xây dựng hoạt ảnh dựa trên vật lý tự nhiên cho React và SwiftUI.
Điểm chính
Hoạt ảnh lò xo mô hình hóa chuyển động của giao diện người dùng bằng cách sử dụng hành vi vật lý của hệ thống giảm chấn khối lượng-lò xo, trong đó chuyển động của một bộ phận bị chi phối bởi độ cứng (mức độ nó kéo về trạng thái đứng yên), giảm chấn (nó mất năng lượng nhanh như thế nào) và khối lượng (nó mang bao nhiêu quán tính). Không giống như hoạt ảnh dựa trên thời lượng, lò xo tự động phản hồi theo vận tốc của người dùng và có thể bị gián đoạn bất kỳ lúc nào mà không gây gián đoạn hình ảnh.
Tại sao lò xo có cảm giác tự nhiên hơn đường cong thời lượng
Thế giới vật chất không có những khái niệm như "dễ dàng vào" hay "khối-bezier(0,4, 0, 0,2, 1)". Các vật thể vật lý tăng tốc do lực và giảm tốc do ma sát. Khi một ngăn kéo trượt mở ra, nó có động lượng; khi bạn thả nó ra, ma sát sẽ làm nó đứng yên. Vật lý mùa xuân tái tạo thực tế vật lý này trong phần mềm, đó là lý do tại sao iOS UIKit, Android Motion Compose và ExodeUI đều là các hệ thống hoạt ảnh đầu tiên của mùa xuân.
Giải thích các thông số mùa xuân
Hiểu rõ từng tham số cho phép bạn thiết kế chính xác cảm giác vật lý mà bạn mong muốn.
Độ cứng (Căng thẳng)
Lò xo kéo về giá trị nghỉ của nó mạnh đến mức nào. Độ cứng cao (600+) tạo ra giao diện người dùng linh hoạt, phản hồi nhanh như phản hồi nhấn nút. Độ cứng thấp (100–200) tạo ra chuyển động chậm, trôi nổi thích hợp cho việc chuyển trang hoặc các phần tử nổi xung quanh.
Giảm chấn (Ma sát)
Lò xo mất bao nhiêu năng lượng trong mỗi chu kỳ. Khi giảm chấn tới hạn, lò xo đạt đến trạng thái đứng yên mà không dao động. Lò xo giảm chấn (ma sát thấp) sẽ vọt lên và nảy lên. Tỷ lệ giảm chấn / (2 × sqrt(độ cứng × khối lượng)) xác định xem bạn có bị giảm chấn quá mức, giảm chấn nghiêm trọng hay quá mức hay không.
Khối
Phần tử hoạt hình mang theo quán tính bao nhiêu. Khối lượng lớn hơn làm cho hoạt ảnh có cảm giác nặng hơn và mất nhiều thời gian hơn để chuyển hướng. Hầu hết các hoạt ảnh trên giao diện người dùng đều giữ khối lượng ở mức 1 và kiểm soát cảm giác thông qua độ cứng và giảm chấn.
Vận tốc ban đầu
Nếu người dùng vuốt hoặc ném một phần tử, lò xo có thể được khởi tạo với vận tốc cử chỉ đó, tạo ra sự liên tục liền mạch giữa cử chỉ và độ lún của lò xo.
Các cài đặt trước mùa xuân thực tế cho các thành phần giao diện người dùng
Các cài đặt trước này bao gồm các mẫu tương tác giao diện người dùng phổ biến nhất.
- Nhấn nút: độ cứng 500, độ giảm chấn 30 — ngay lập tức, linh hoạt, độ nảy tối thiểu
- Mở rộng thẻ: độ cứng 280, giảm xóc 24, khối lượng 1,2 - mở rộng trơn tru, có trọng số
- Ngăn kéo / tấm: độ cứng 340, độ giảm chấn 28 - quyết định, có độ lún nhẹ
- Thông báo về độ nảy: độ cứng 400, giảm chấn 18 - vượt quá vui nhộn
- Chuyển trang: độ cứng 220, giảm xóc 22, khối lượng 1,4 - điện ảnh, có trọng số
Đoạn mã triển khai thực tế
// Spring presets in React with the Motion library (motion.dev).
// The same stiffness / damping / mass values can be saved as motion tokens.
import { motion } from 'motion/react';
const springs = {
snappy: { type: 'spring', stiffness: 500, damping: 30, mass: 1 },
smooth: { type: 'spring', stiffness: 280, damping: 24, mass: 1.2 },
bouncy: { type: 'spring', stiffness: 400, damping: 18, mass: 1 },
cinematic: { type: 'spring', stiffness: 220, damping: 22, mass: 1.4 },
};
export function PhysicsCard({ open }) {
return (
<motion.div
animate={{ y: open ? 0 : 24, scale: open ? 1 : 0.96 }}
transition={springs.smooth}
>
Smooth physics-based card reveal
</motion.div>
);
}