애니메이션 타이밍 및 UX 인식

1) 타이밍이 중요한 이유

• 시스템에 대한 즉각적인 반응과 신뢰감;
• 원인과 결과의 명확성 (요소가 이동 한);
• 긴 세션에서 피로와 편안함;
• 행동의 정확성 (특히 모바일 및 높은 요금).

규칙: 타이밍은 목적을 달성합니다. 애니메이션이 "무슨 일이 있었는지" 이해하는 데 도움이되지 않으면 방해가됩니다.

2) 심리 물리학 및 임계 값

• λ50 ms - 에코 입력 (인쇄, 클릭 효과); 즉각적인 것 같습니다.
• 움직임에 의한 첫 번째 시각적 피드백 (버튼 "누름").
• 120-180 ms-호버/포커스, 소프트 스테이트 전환.
• 180-280ms - 모달/패널; "자연스러운" 외관으로 인식됩니다.
• 300-500ms-공유 요소, 진행 상황.
💡 700ms - "느림" 의 위험; 의미가있는 경우에만 떠나십시오 (예: 승리 확인).
• 1200-1600ms - 골격/쉬머 사이클; 더 길다-피곤하다.

3) 편안함과 무게 곡선

• 표준: '입방-베 지어 (0. 2, 0, 0. 2, 1) '- 중립적 인 "재료" 역학.
• 압박: '입방 베지어 (0. 4, 0, 1, 1) '- 빠른 로그인, 짧은 클릭.
• 오버레이: '입방-베 지어 (0, 0, 0. 2, 1) '- 소프트 출력.
• 밑줄 악센트 (희귀): '입방-베 지어 (0. 2, 0. 8, 0. 2, 1. 2) 'kr 초과 8 px.

무게 광학: 구성 요소 (카드, 서랍) 가 클수록 지속 시간이 길어집니다 (베이스까지 + 40-80ms).

4) 단계와 안무

운동을 단계로 나눕니다

1. 시작 (10-40ms): 조명 페이드/스케일 0. 98 → 1-시작 신호.
2. 운송 (주요 단계): 이동/개방.
3. 초안 (20-60ms): 작은 브레이크, 그림자/초점 링 안정화.

• 목록: 20-40ms/항목, 최대 6-8 항목 연속.
• 형태: 캐스케이드 없음; 입력을 방해하지 않도록 모든 것이 동시에 나타납니다.

가역성: "뒤로" 미러는 "앞으로" 15-30% 더 빠릅니다.

5) 상호 작용 유형별 타이밍

6) 시간의 인식: 실제 가속없이 "가속" 하는 방법

즉각적인 경제성: 네트워크 이전에도 커서/프레스 스타일의 즉각적인 변경

복잡성의 고려: 병렬 다운로드; 패널을 열기 전에 배경 데이터 풀업.
감각 앵커: 공유 요소와 운동 방향은 대기의인지 비용을 줄입니다.
낙관적 인 업데이트: UI가 즉시 "준비" 되었으며 서버가 확인하거나 롤백합니다.

7) 피로 및 애니메이션 위생

끝없는 맥동을 피하십시오. 모든주기는 간헐적이거나 분리 가능해야합니다.
각 노드에서 흐림/상자 그림자없이 요소 배열 (테이블, 그리드) 에 미세 효과를 수행하십시오.
'선호 감소 모션: 감소' 지원: 페이드 100ms 또는 정적 상태 스위치 만 남겨 두십시오.

css
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration:.01ms! important; }
}

8) 타이밍 토큰 (디자인 시스템)

json
{
"motion": {
"duration": { "press": 90, "hover": 160, "focus": 160, "overlayIn": 240, "overlayOut": 180, "tab": 200, "shared": 280 },
"easing": {
"standard": "cubic-bezier(0. 2,0,0. 2,1)",
"accelerate": "cubic-bezier(0. 4,0,1,1)",
"decelerate": "cubic-bezier(0,0,0. 2,1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

명명: '모션. 지속 시간. {역할} '달력' 모션. 완화. {역할} '-구성 요소와 피그마는 엔진에 동일합니다.

9) 구현: CSS 및 프레이머 모션

css
:root{
--dur-press:90ms; --dur-hover:160ms; --dur-overlay-in:240ms; --dur-overlay-out:180ms;
--ease-std:cubic-bezier(.2,0,.2,1);
--ease-acc:cubic-bezier(.4,0,1,1);
--ease-dec:cubic-bezier(0,0,.2,1);
}
.button{ transition: transform var(--dur-press) var(--ease-acc), box-shadow var(--dur-hover) var(--ease-std); }
.button:active{ transform: scale(.98); }
.modal-enter{ animation: modalIn var(--dur-overlay-in) var(--ease-std) both; }
.modal-exit { animation: modalOut var(--dur-overlay-out) var(--ease-dec) both; }
@keyframes modalIn{ from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
@keyframes modalOut{ from{opacity:1} to{opacity:0; transform:translateY(8px) scale(.99)} }

tsx import { motion, AnimatePresence } from "framer-motion";

export function Modal({ open, children }) {
return (
<AnimatePresence>
{open && (
<motion. div initial={{opacity:0}} animate={{opacity:1}} exit={{opacity:0}}
transition={{duration:.18, ease:[0. 2,0,0. 2,1]}} className="fixed inset-0 bg-black/50">
<motion. div initial={{y:16, scale:.98, opacity:0}}
animate={{y:0, scale:1, opacity:1, transition:{duration:.24, ease:[0. 2,0,0. 2,1]}}}
exit={{y:8, scale:.99, opacity:0, transition:{duration:.18, ease:[0,0,0. 2,1]}}}
className="m-auto max-w-lg rounded-2xl bg-white p-6">
{children}
</motion. div>
</motion. div>
)}
</AnimatePresence>
);
}

10) 시간의 구성: 병렬 대 시퀀스

병렬 (페이드 + 동시에 변환) -느낌이 더 빠릅니다.
시퀀스 (컨테이너 먼저 컨테이너, 컨텐츠) 는 더 명확한 구조이지만 더 깁니다. 계층 구조를 표시하는 것이 중요 할 때 적용하십시오.

같은 블록에서 밀접하게 관련된 요소 사이의 단계> 60ms를 피하십시오

11) 타이밍 및 내용

텍스트: 제품에서 문자/단어별로 애니메이션하지 마십시오. 마케팅 기술입니다.
숫자/카운터: 40-60ms batchami 단계, 지터 레이아웃 없음 (표-수치).

그래픽: 오프닝 시리즈 180-240 ms, 호버 하이라이트

12) 접근성 및 지각 오류

초점 스타일은 지체없이 나타나야합니

경고/오류-사용자가 AT (보조 기술) 를 사용하는 경우 흔들리지 않는 최소 애니메이션 (약 120ms).
플래시> 3/s 및 큰 대비 깜박임을 피하십시오.

13) iGaming의 세부 사항

• 자동으로 100ms를 누르십시 상태 '바쁜' 즉시; 최종 토스트/표시기-지연 없음.
• UI 응답 타이밍은 확인 애니메이션보다 중요합니다. 확인은 120-160ms입니다.

• 200ms 시작, 균일 한주기, 300-500ms 제동; 끝없는 깜박임이 없습니다.
• 버스트 500ms, 스트로브 없음; 양은 AAA입니다.

• 배치 별 업데이트 (250-1000 ms); 시각적 diff λ160 ms; 레이아웃 점프없이.
• 호버/포커스-" 깜박이지 않도록 "백라이트 80-120 ms.

14) 반 패턴

움직임에 대한 선형 곡선 ("기계적" 느낌).

간단한 버튼 상태의 경우 기간> 400ms

수십 가지 요소 목록에 따라 캐스케이드 100 + ms (트랙션).
애니메이션의 수백 가지 요소에 그림자/흐림.
불일치: 동일한 제품에서 타이밍이 다른 동일한 동작.
키보드 활성화에 대한 초점 지연 또는 지연.

15) QA 타이밍 체크리스트

일관성

• 타이밍과 곡선은 동일한 동작에 대해 동일한 토큰에서 가져옵니다.

응답

• 프레스/호버/포커스는 80-180ms의 스케일에 적합합니다.
• 첫 번째 시각적 반응은 100 ms입니다.

안무

• 입력 및 출력은 대칭입니다. 출력은 입력보다 15-30% 빠릅니다.
• 캐스케이드는 8 개의 요소와 40ms 단계를 초과하지 않습니다.

A11y

• '감소 운동 선호' 지원; 지체없이 집중하십시오.
• 깜박임 없음> 3/s.

성능

• '변환/불투명도' 만 애니메이션됩니다. 질량 흐림/그림자가 없습니다.

16) 설계 시스템의 문서

"모션 토큰": 지속 시간/완화/스 태거 + 응용 프로그램 맵 (버튼, 오버레이, 탭, 목록).
"리듬 및 단계": 캐스케이드 및 가역성 체계.
"모션 감소": 저하 규칙 및 예.
"Do/Do n 't": 타임 코드와 대상 메트릭이있는 짧은 클립 (INP/First Feedback).

간략한 요약

좋은 타이밍은 즉각적인 반응, 이해할 수있는 안무 및 경제적 인 곡선입니다. 마이크로 스테이트의 지속 시간을 짧게 유지하고 의미를 추가하는 경우에만 스트레칭하고 모션을 줄이며 "비싼" 속성을 애니메이션하지 마십시오. 그런 다음 인터페이스는 특히 실시간 및 고위험 시나리오에서 활기차고 신뢰할 수 있습니다.