LanguageTiếng Việt
Trụ cột 08 · Kỹ thuật hoạt hình
Hoạt hình UI Vật lý: Khoa học về Giao diện Kỹ thuật số Sống
Hoạt ảnh dựa trên thời lượng đã chết. Tìm hiểu lý do tại sao Apple, Google và các nhóm sản phẩm tốt nhất trên thế giới lại xây dựng độc quyền bằng vật lý lò xo.
What is Hoạt hình in ExodeUI?
Hoạt hình UI Vật lý là một phương pháp kỹ thuật hoạt hình mô hình hóa chuyển động của giao diện người dùng bằng cách sử dụng các định luật vật lý trong thế giới thực—chủ yếu là các bộ dao động lò xo điều hòa bậc hai—thay vì bộ tính thời gian tùy ý. Vì các lò xo vật lý tính toán vị trí nghỉ một cách linh hoạt dựa trên tốc độ cử chỉ của người dùng nên các giao diện điều khiển bằng vật lý có thể bị gián đoạn 100% và mang lại cảm giác tự nhiên khi chạm vào con người.
Kiến trúc cốt lõi
Vì sao kỹ sư và nhà thiết kế chọn ExodeUI
Design, logic and motion in one file that runs inside your app.
Lò xo điều hòa bậc hai
Mô hình hóa chuyển động của giao diện bằng cách sử dụng các phương trình vật lý tự nhiên thay vì sử dụng mili giây tùy ý và các tay cầm nhỏ hơn.
Truyền vận tốc liên tục
Cử chỉ kéo và hất giữ lại động lượng vật lý của con người khi phát hành và chuyển hướng đột ngột.
Tương tác gián đoạn 100%
Người dùng có thể chạm, kéo hoặc chuyển hướng một hình ảnh động giữa chuyến bay mà không bị giật hoặc giật hình.
Kiểm soát khối lượng, độ cứng và giảm xóc
Tinh chỉnh tính chất cơ học chính xác của giao diện của bạn bằng thanh trượt trực quan và xem trước trực tiếp.
Đánh giá khách quan
ExodeUI so với Duration-Based Animation (Easing Curves)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Lò xo tự động tính toán thời lượng dựa trên khoảng cách và vận tốc
- Tương tác có thể bị gián đoạn 100% mà không cần chụp ảnh trực quan
- Duy trì động lực tiếp xúc của con người để mang lại cảm giác tự nhiên trôi chảy
- Phù hợp với các mô hình hoạt hình gốc của iOS (CoreAnimation) và Android
Duration-Based Animation (Easing Curves)
- Bộ hẹn giờ có thời lượng cố định (ví dụ: 300 mili giây) cho cảm giác không tự nhiên ở khoảng cách nhỏ hoặc lớn
- Việc làm gián đoạn hoạt ảnh sẽ khiến hoạt ảnh đó bị ngắt quãng hoặc khởi động lại đột ngột
- Bỏ qua tốc độ vung ngón tay, cảm thấy chậm chạp và không phản hồi
- Yêu cầu viết JavaScript tùy chỉnh phức tạp để xử lý các gián đoạn cử chỉ
Bàn giao cho đội phát triển
Dùng trong mã của bạn
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
// A physics-driven expand in React with the Motion library (motion.dev).
// Mass, stiffness and damping replace a fixed duration, and an interrupted
// animation continues from its current velocity.
import { motion } from 'motion/react';
export function PhysicsCard({ open }) {
return (
<motion.div
animate={{ height: open ? 240 : 64, opacity: open ? 1 : 0.7 }}
transition={{ type: 'spring', stiffness: 380, damping: 26, mass: 1 }}
style={{ overflow: 'hidden' }}
>
<h3>Physics-driven element</h3>
<p>Settles naturally, with no hard-coded duration</p>
</motion.div>
);
}Sự sai lầm của hoạt hình dựa trên thời lượng
Trong nhiều thập kỷ, hoạt hình trên web và kỹ thuật số dựa trên các đường cong thời lượng dựa trên thời gian: "tạo hoạt ảnh theo phương thức này từ y: 100 đến y: 0 trong 300 mili giây một cách dễ dàng." Mặc dù tính năng này hoạt động để phát lại video thụ động nhưng về cơ bản nó không thành công trong phần mềm tương tác điều khiển bằng cảm ứng vì ba lý do toán học:
- Biến đổi khoảng cách: Nếu một trang tính di chuyển 50 pixel trong 300 mili giây, nó sẽ di chuyển chậm. Nếu nó di chuyển 500 pixel trong 300 mili giây, nó sẽ di chuyển nhanh hơn gấp mười lần. Khoảng thời gian cố định tạo ra vận tốc thất thường.
- Thảm họa gián đoạn: Nếu người dùng lấy một phần tử khi nó đang hoạt hình, hệ thống dựa trên thời lượng sẽ bẻ gãy hoặc phá vỡ đường cong vật lý.
- Điểm mù vận tốc: Khi người dùng lật tấm đáy lên trên với tốc độ ngón tay nhanh, đường cong thời lượng sẽ loại bỏ vận tốc đó và phát hoạt ảnh đóng hộp của nó từ tốc độ 0.
Ba thông số của vật lý mùa xuân
Mỗi lò xo trong ExodeUI được điều chỉnh bởi ba thông số vật lý đơn giản, trực quan:
Độ cứng (Căng thẳng)
Kiểm soát mức độ lực kéo của lò xo về vị trí nghỉ mục tiêu. Độ cứng cao hơn tạo ra chuyển động nhanh, linh hoạt.
Giảm chấn (Ma sát)
Kiểm soát mức độ cản trở chuyển động. Lò xo dưới độ ẩm dao động và nảy lên; các lò xo bị giảm chấn nghiêm trọng sẽ ổn định với độ vọt lố bằng 0.
Khối lượng (Quán tính)
Kiểm soát mức độ nặng của phần tử. Khối lượng cao hơn đòi hỏi nhiều lực hơn để tăng tốc và giảm xóc nhiều hơn để ổn định.
Topic Cluster Network
Khám phá khái niệm và công cụ liên quan
Công cụ sân chơi hoạt hình mùa xuân
Xuất mã và hộp cát mùa xuân tương tác
Môi trường phát triển chuyển động
Tầm nhìn nền tảng MDE
Tìm hiểu: Hoạt hình mùa xuân Principles
Đi sâu vào các phương trình mùa xuân
Thuật ngữ: Vật lý mùa xuân
Định nghĩa, công thức và tham số
Bạn có câu hỏi?
Câu hỏi thường gặp
Tạo component sống động với chuyển động thật.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.