LanguageBahasa Indonesia
Pilar 08 · Teknik Animasi
Animasi Fisika UI: Ilmu Antarmuka Digital yang Hidup
Animasi berbasis durasi sudah mati. Pelajari alasan Apple, Google, dan tim produk terbaik di dunia membangun secara eksklusif dengan fisika pegas.
What is Animasi Fisika in ExodeUI?
Physics UI Animation adalah metodologi rekayasa animasi yang memodelkan pergerakan antarmuka pengguna menggunakan hukum fisika dunia nyata—terutama osilator pegas harmonik orde kedua—dan bukan pengatur waktu durasi yang berubah-ubah. Karena pegas fisik menghitung posisi istirahat secara dinamis berdasarkan kecepatan gerakan pengguna, antarmuka berbasis fisika 100% dapat diinterupsi dan terasa alami jika disentuh manusia.
Arsitektur Inti
Mengapa Insinyur & Desainer Memilih ExodeUI
Design, logic and motion in one file that runs inside your app.
Mata Air Harmonik Orde Kedua
Model pergerakan antarmuka menggunakan persamaan fisik alami, bukan milidetik sewenang-wenang dan pegangan bezier.
Transfer Kecepatan Berkelanjutan
Gerakan melempar dan menyeret mempertahankan momentum fisik manusia saat melepaskan dan mengalihkan secara tiba-tiba.
100% Interaksi Terputus
Pengguna dapat mengetuk, menyeret, atau mengalihkan animasi di tengah penerbangan tanpa gangguan visual atau gangguan visual.
Kontrol Massa, Kekakuan & Redaman
Sempurnakan kepribadian mekanis antarmuka Anda dengan penggeser visual intuitif dan pratinjau langsung.
Evaluasi Objektif
Bagaimana ExodeUI Dibandingkan dengan Duration-Based Animation (Easing Curves)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Mata air menghitung durasi secara otomatis berdasarkan jarak dan kecepatan
- Interaksi 100% dapat diinterupsi tanpa gangguan visual
- Mempertahankan momentum sentuhan manusia untuk nuansa asli yang cair
- Cocok dengan model animasi asli iOS (CoreAnimation) dan Android
Duration-Based Animation (Easing Curves)
- Pengatur waktu durasi tetap (misalnya 300 md) terasa tidak wajar pada jarak kecil atau jauh
- Mengganggu animasi menyebabkan animasi terhenti atau dimulai ulang secara tiba-tiba
- Mengabaikan kecepatan lemparan jari, terasa lesu dan tidak responsif
- Memerlukan penulisan JavaScript khusus yang rumit untuk menangani gangguan isyarat
Penyerahan Pengembang
Menggunakannya dalam Kode Anda
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>
);
}Kekeliruan Animasi Berbasis Durasi
Selama beberapa dekade, animasi web dan digital mengandalkan kurva durasi berbasis waktu: "menghidupkan modal ini dari y: 100 ke y: 0 dalam 300 milidetik dengan mudah." Meskipun ini berfungsi untuk pemutaran video pasif, pada dasarnya ini gagal dalam perangkat lunak interaktif yang digerakkan oleh sentuhan karena tiga alasan matematis:
- Variasi Jarak: Jika sebuah lembar bergerak 50 piksel dalam 300 md, maka lembar tersebut bergerak lambat. Jika ia bergerak 500 piksel dalam 300 ms, ia bergerak sepuluh kali lebih cepat. Durasi yang tetap menciptakan kecepatan yang tidak menentu.
- Bencana Interupsi: Jika pengguna mengambil elemen saat sedang dianimasikan, sistem berbasis durasi akan menghentikan atau memutus kurva fisika.
- Kebutaan Kecepatan: Saat pengguna melemparkan lembaran bawah ke atas dengan kecepatan jari yang cepat, kurva durasi membuang kecepatan tersebut dan memutar animasi terekamnya dari kecepatan nol.
Tiga Parameter Fisika Musim Semi
Setiap pegas di ExodeUI diatur oleh tiga parameter fisik yang sederhana dan intuitif:
Kekakuan (Ketegangan)
Mengontrol seberapa agresif pegas menarik menuju posisi istirahat targetnya. Kekakuan yang lebih tinggi menghasilkan gerakan yang cepat dan tajam.
Redaman (Gesekan)
Mengontrol seberapa besar perlawanan yang menentang gerakan tersebut. Pegas yang teredam di bawah berosilasi dan memantul; pegas yang teredam kritis menetap dengan zero overshoot.
Massa (Inersia)
Mengontrol seberapa berat elemen tersebut terasa. Massa yang lebih besar membutuhkan lebih banyak tenaga untuk berakselerasi dan lebih banyak redaman untuk mengendap.
Topic Cluster Network
Jelajahi Konsep & Peralatan yang Terhubung
Alat Taman Bermain Animasi Musim Semi
Kotak pasir pegas interaktif & ekspor kode
Lingkungan Pengembangan Gerak
Visi platform MDE
Pelajari: Animasi Musim Semi Principles
Pelajari lebih dalam persamaan pegas
Glosarium: Fisika Musim Semi
Definisi, rumus, dan parameter
Punya pertanyaan?
Pertanyaan yang Sering Diajukan
Membangun komponen hidup dengan gerak nyata.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.