Language日本語
柱 08 · アニメーションエンジニアリング
物理 UI アニメーション: 生きたデジタル インターフェイスの科学
期間ベースのアニメーションは廃止されました。 Apple、Google、そして世界最高の製品チームがばね物理学のみを使用して構築している理由を学びましょう。
What is 物理 UI in ExodeUI?
物理 UI アニメーションは、任意の継続時間タイマーではなく、現実世界の物理法則 (主に 2 次高調波ばね振動子) を使用してユーザー インターフェイスの動きをモデル化するアニメーション エンジニアリング手法です。物理スプリングはユーザーのジェスチャー速度に基づいて静止位置を動的に計算するため、物理駆動型のインターフェイスは 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)
- 固定期間タイマー (例: 300ms) は、遠距離または遠距離では不自然に感じられます
- アニメーションを中断すると、アニメーションが途切れたり、激しく再起動したりすることがあります。
- 指を飛ばす速度を無視し、鈍くて反応が鈍いと感じます
- ジェスチャの中断を処理するには複雑なカスタム 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>
);
}継続時間ベースのアニメーションの誤謬
何十年もの間、Web アニメーションとデジタル アニメーションは時間ベースのデュレーション カーブに依存していました。「イーズアウトを使用して、このモーダルを 300 ミリ秒で y: 100 から y: 0 までアニメーション化する」というものでした。これは受動的なビデオ再生には機能しますが、タッチ駆動の対話型ソフトウェアでは根本的に失敗します。その理由は次の 3 つの数学的理由です。
- 距離変動: シートが 300 ミリ秒で 50 ピクセル移動する場合、シートはゆっくりと移動します。 300 ミリ秒で 500 ピクセルを移動すると、10 倍の速度で移動します。持続時間を固定すると、速度が不安定になります。
- 中断災害: アニメーション中にユーザーが要素を掴むと、持続時間ベースのシステムが物理曲線をスナップまたは破壊します。
- 速度ブラインド: ユーザーが指の速度を速くして下のシートを上に飛ばすと、デュレーション カーブはその速度を破棄し、既定のアニメーションをゼロ速度から再生します。
ばね物理学の 3 つのパラメータ
ExodeUI のすべてのスプリングは、次の 3 つのシンプルで直感的な物理パラメータによって制御されます。
剛性（張力）
スプリングが目標の静止位置に向かってどれだけ積極的に引っ張られるかを制御します。より高い剛性により、素早いキビキビとした動きを生み出します。
ダンピング（摩擦）
動きに抵抗する抵抗の量を制御します。減衰が不足しているスプリングは振動して跳ね返ります。臨界的に減衰されたスプリングはオーバーシュートゼロで安定します。
質量（慣性）
要素がどれだけ重く感じるかを制御します。質量が大きいほど、加速するにはより大きな力が必要となり、安定するにはより多くの減衰が必要になります。
Topic Cluster Network
関連する概念とツール
ご質問はありますか
よくある質問
本物の動きで、生きたコンポーネントを作る。
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.