Language한국어
Pillar 08 · 애니메이션공학
물리 UI 애니메이션: 살아있는 디지털 인터페이스의 과학
기간 기반 애니메이션이 종료되었습니다. Apple, Google 및 세계 최고의 제품 팀이 왜 스프링 물리학만을 사용하여 빌드하는지 알아보세요.
What is 물리 UI in ExodeUI?
Physics UI Animation은 임의의 지속 시간 타이머가 아닌 실제 물리 법칙(주로 2차 조화 스프링 발진기)을 사용하여 사용자 인터페이스 움직임을 모델링하는 애니메이션 엔지니어링 방법론입니다. 물리적 스프링은 사용자 동작 속도에 따라 정지 위치를 동적으로 계산하므로 물리학 기반 인터페이스는 100% 중단 가능하며 인간의 터치가 자연스럽게 느껴집니다.
핵심 아키텍처
엔지니어와 디자이너가 ExodeUI를 선택하는 이유
Design, logic and motion in one file that runs inside your app.
2차 하모닉 스프링
임의의 밀리초 및 베지어 핸들 대신 자연스러운 물리 방정식을 사용하여 인터페이스 이동을 모델링합니다.
연속 속도 전송
플링 및 드래그 동작은 릴리스 및 갑작스러운 리디렉션 전반에 걸쳐 인간의 물리적 운동량을 유지합니다.
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>
);
}기간 기반 애니메이션의 오류
수십 년 동안 웹 및 디지털 애니메이션은 시간 기반 지속 시간 곡선에 의존했습니다. "이 모달을 y: 100에서 y: 0으로 300밀리초 안에 애니메이션화합니다." 이는 수동적 비디오 재생에는 작동하지만 터치 기반 대화형 소프트웨어에서는 세 가지 수학적 이유로 근본적으로 실패합니다.
- 거리 변화: 시트가 300ms 동안 50픽셀을 이동하면 천천히 움직입니다. 300ms에 500픽셀을 이동하면 10배 더 빠르게 이동합니다. 고정된 기간은 불규칙한 속도를 생성합니다.
- 중단 재해: 애니메이션이 실행되는 동안 사용자가 요소를 잡으면 지속 시간 기반 시스템이 물리 곡선을 스냅하거나 끊습니다.
- 속도 실명(Velocity Blindness): 사용자가 빠른 손가락 속도로 하단 시트를 위로 던지면 지속 기간 곡선이 해당 속도를 버리고 미리 준비된 애니메이션을 0 속도에서 재생합니다.
스프링 물리학의 세 가지 매개변수
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.