Language繁體中文
支柱08·動畫工程
實體 UI 動畫：生活數位介面的科學
基於持續時間的動畫已經死了。了解為什麼 Apple、Google 和世界上最好的產品團隊專門使用彈簧物理學進行建構。
What is 實體 UI in ExodeUI?
實體 UI 動畫是一種動畫工程方法，它使用現實世界的物理定律（主要是二階諧波彈簧振盪器）而不是任意持續時間計時器來模擬使用者介面運動。由於物理彈簧根據使用者手勢速度動態計算靜止位置，因此物理驅動的介面 100% 可中斷，並且對於人類觸控來說感覺很自然。
核心架構
為什麼工程師和設計師選擇 [ExodeUI
Design, logic and motion in one file that runs inside your app.
二階諧波彈簧
使用自然物理方程式而不是任意毫秒和貝塞爾手柄來模擬界面運動。
連續速度傳輸
猛擊和拖曳手勢在釋放和突然重定向時保留人類的物理動量。
100% 可中斷交互
使用者可以在動畫播放過程中點擊、拖曳或重定向動畫，而不會出現卡頓或視覺卡頓的情況。
質量、剛度和阻尼控制
透過直覺的視覺滑桿和即時預覽精確調整介面的機械特性。
客觀評價
ExodeUI 相比如何 Duration-Based Animation (Easing Curves)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- 彈簧根據距離和速度自動計算持續時間
- 互動 100% 可中斷，無視覺卡頓
- 保留人性化的觸摸動力，帶來流暢的原生感覺
- 匹配iOS（CoreAnimation）和Android原生動畫模型
Duration-Based Animation (Easing Curves)
- 固定持續時間計時器（例如 300 毫秒）在短距離或長距離上感覺不自然
- 中斷動畫會導致其突然或劇烈重新啟動
- 忽略手指彈動速度，感覺遲緩且反應遲鈍
- 需要編寫複雜的自訂 JavaScript 來處理手勢中斷
開發者交接
在您的程式碼中使用它
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>
);
}基於持續時間的動畫的謬誤
幾十年來，網絡和數位動畫都依賴於基於時間的持續時間曲線：「在 300 毫秒內通過緩出將該模態從 y: 100 動畫到 y: 0。」雖然這適用於被動視頻播放，但由於三個數學原因，它在觸摸驅動的交互式軟體中從根本上失敗了：
- 距離變化：如果一張紙在 300 毫秒內移動 50 個像素，則它移動緩慢。如果它在 300 毫秒內移動 500 個像素，則移動速度快十倍。固定的持續時間會產生不穩定的速度。
- 中斷災難：如果使用者在動畫時抓住一個元素，基於持續時間的系統會捕捉或破壞實體曲線。
- 速度失明：當使用者以快速的手指速度向上拋動底部薄片時，持續時間曲線會丟棄該速度並從零速度播放其預設動畫。
彈簧物理的三個參數
ExodeUI 中的每個彈簧均由三個簡單、直覺的物理參數控制：
剛度（張力）
控制彈簧拉向目標靜止位置的力度。更高的剛性可帶來快速、敏捷的運動。
阻尼（摩擦）
控制阻礙運動的阻力大小。阻尼不足的彈簧會振盪和彈跳；臨界阻尼彈簧穩定為零超調。
質量（慣性）
控制元素的重量感。更大的質量需要更大的加速力和更大的阻尼來穩定。
Topic Cluster Network
探索互聯概念與工具
有疑問嗎？
常見問題解答
透過真實的運動建構生命組件。
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.