시간·보간·이징·물리
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
트랜지션·전환 Transition
한 상태에서 다른 상태로 넘어가는 변화 과정.
탭·버튼·화면 상태 전환.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
스프링 애니메이션 Spring Animation
질량·강성·감쇠 등 스프링 모델을 이용한 움직임.
드래그 복귀·탄성 전환.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
이징 Easing
진행률에 따라 값의 변화 속도를 조절하는 방식.
가속·감속·무게감 표현.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
보간 Interpolation
기준값 사이의 중간값을 계산하는 과정.
좌표·색·회전 변화 계산.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
애니메이션 Animation
시간 또는 입력의 진행에 따라 시각적 속성을 변화시키는 표현.
움직임·전환·상태 변화.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
모션 디자인 Motion Design
움직임의 목적·관계·순서·속도를 설계하는 작업.
공간 관계·피드백·브랜드 표현.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
트윈 Tween
시작값과 끝값 사이의 중간값을 계산해 변화시키는 방식.
위치·색·수치 애니메이션.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
키프레임 Keyframe
특정 시점의 속성값을 명시한 기준 프레임.
구간별 동작 정의.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
지속시간 Duration
애니메이션 한 번 또는 특정 구간이 진행되는 시간.
전환 속도 명세.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
시작 지연 Delay
조건 충족 후 실제 재생을 시작하기까지의 시간.
순서 조정·입력 반응 설계.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
선형 이징 Linear Easing
진행률에 비례해 값이 일정한 속도로 변하는 이징.
연속 회전·등속 이동.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
이즈 인 Ease-in
시작은 느리고 뒤로 갈수록 빨라지는 변화 방식.
가속하며 퇴장하는 요소.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
이즈 아웃 Ease-out
시작은 빠르고 끝으로 갈수록 느려지는 변화 방식.
자리에 안착하는 요소.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
이즈 인 아웃 Ease-in-out
처음과 끝은 느리고 중간은 빠른 변화 방식.
부드러운 왕복·상태 전환.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
큐빅 베지어 이징 Cubic Bézier Easing
제어점으로 속도 변화 곡선을 정의하는 방식.
맞춤형 웹 전환 곡선.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
계단형 이징 Steps Easing
값이 연속이 아닌 일정한 단계로 바뀌는 방식.
스프라이트 프레임·타이핑 효과.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
강성 Stiffness
스프링이 변형에서 원래 상태로 돌아가려는 정도.
탄성 모션 조정.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
감쇠 Damping
시간에 따라 진동이나 속도가 줄어드는 정도.
튀는 정도·정착 속도 조절.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
질량 파라미터 Mass
스프링 모션의 관성 특성을 조절하는 값.
가벼운·무거운 반응 설정.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
오버슈트 Overshoot
목표값을 잠시 넘어갔다가 돌아오는 움직임.
강조·탄성감.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
언더슈트 Undershoot
본격적인 이동 전에 반대 방향으로 살짝 움직이는 표현.
준비 동작·당김 후 이동.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
바운스 이징 Bounce Easing
표면에 부딪혀 되튀는 듯한 속도 변화를 만드는 이징.
도착 강조·캐주얼 UI.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
엘라스틱 이징 Elastic Easing
목표 주변에서 진폭을 줄이며 진동하는 탄성형 이징.
늘어남·튕김 표현.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
감쇠 진동 Damped Oscillation
시간이 흐를수록 진폭이 줄어드는 진동.
자연스러운 스프링 정착.
이징 이름만으로 길이·이동량·중단 동작이 정해지지는 않는다. 스프링의 파라미터와 단위는 구현체마다 다르다.
Timing, Interpolation, Easing & Physics
Open an entry for its visual reference, comparisons and source-language text.
Transition 트랜지션·전환
The process of changing from one state to another.
Tab, button, and screen-state transitions.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.
Spring Animation 스프링 애니메이션
Movement based on a spring model with properties such as mass, stiffness, and damping.
Drag return and elastic transitions.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.
Easing 이징
Controlling the rate of value change across an animation's progress.
Expressing acceleration, deceleration, and weight.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.
Interpolation 보간
Calculating intermediate values between reference values.
Calculating position, color, and rotation changes.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.
Animation 애니메이션
A visual change in properties over time or in response to input progress.
Movement, transitions, and state changes.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.
Motion Design 모션 디자인
Designing the purpose, relationships, sequence, and speed of movement.
Spatial relationships, feedback, and brand expression.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.
Tween 트윈
Changing values by calculating intermediate states between a start and an end.
Animating positions, colors, and numeric values.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.
Keyframe 키프레임
A reference frame specifying property values at a particular time.
Defining behavior over individual intervals.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.
Duration 지속시간
The time taken by one animation or a particular segment.
Specifying transition timing.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.
Delay 시작 지연
The interval between a trigger and the actual start of playback.
Sequencing and designing input responses.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.
Linear Easing 선형 이징
Easing in which a value changes at a constant rate relative to progress.
Continuous rotation and constant-speed movement.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.
Ease-in 이즈 인
A change that starts slowly and accelerates.
Elements that accelerate as they exit.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.
Ease-out 이즈 아웃
A change that starts quickly and slows toward the end.
Elements settling into position.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.
Ease-in-out 이즈 인 아웃
A change that is slower at the beginning and end and faster in the middle.
Smooth back-and-forth motion and state changes.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.
Cubic Bézier Easing 큐빅 베지어 이징
Defining an easing curve through cubic Bézier control points.
Custom web transition curves.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.
Steps Easing 계단형 이징
Changing values in discrete steps rather than continuously.
Sprite frames and typing effects.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.
Stiffness 강성
The strength with which a spring returns toward its rest state after displacement.
Tuning elastic motion.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.
Damping 감쇠
The degree to which oscillation or velocity decreases over time.
Adjusting bounce and settling speed.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.
Mass 질량 파라미터
A value controlling the inertial characteristics of spring motion.
Configuring light or heavy responses.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.
Overshoot 오버슈트
Movement that briefly passes its target before settling back.
Emphasis and elasticity.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.
Undershoot 언더슈트
A slight movement opposite the intended direction before the main motion begins.
Anticipation and movement after a pullback.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.
Bounce Easing 바운스 이징
An easing pattern suggesting rebounds after contact with a surface.
Emphasizing arrival in casual interfaces.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.
Elastic Easing 엘라스틱 이징
An elastic easing pattern oscillating around a target with decreasing amplitude.
Stretching and bouncing effects.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.
Damped Oscillation 감쇠 진동
Oscillation whose amplitude decreases over time.
Natural spring settling.
An easing name does not specify duration, travel distance, or interruption behavior. Spring parameters and units vary by implementation.