모션 디자인 및 인터페이스 애니메

1) 제품의 애니메이션 이유

• 인과 관계 (요소가 사라진 곳, 요소가 어디에서 왔는지) 를 설명합니다
• 주요 행동에주의를 기울이고
• 결과를 확인하고 (피드백) 인지 부하를 줄입니다
• 전환을 예측 가능하고 "유형적" 으로 만듭니다.

규칙 # 1: 의미> 스타일. 모든 애니메이션은 "무슨 일이 있었으며 어떤 관련이 있습니까? ».

2) 기본 원칙

1. 모션 계층 구조: 컨테이너가 먼저 이동 한 다음 내용을 이동 한 다음 부품을 이동

2. 일관성: 동일한 동작에 대해 동일한 패턴입니다.
3. 저축: 최소 속성, 최소 프레임; 더 짧고 선명합니다.
4. 현실 물리학: 처음에는 가속, 끝에는 감속; "저크" 가 없습니다.
5. 가역성: "뒤" 는 "앞으로" 와 같은 느낌입니다.

6. 접근성: 애니메이션 감소 시스템 설정을 존중하

3) 듀레이션과 곡선 (권장 사항)

3. 1 배경 (데스크톱/모바일)

호버: 120-180ms

포커스/프레스: 80-120

툴팁/토스트: 입력 180-240ms, 출력 120-160ms

모달/드루어: 200-320ms

화면 전환: 240-360 ms

스크롤링/시차: 세그먼트 당 200ms, 무한 루프를 피하십시오

3. 커브 2 개

메인: '입방-베 지어 (0. 2, 0. 0, 0. 2, 1) '- 천연 "재료" 속도

더 빠른 입력, 출력 부드러움: '입방 베지어 (0. 05, 0. 7, 0. 1, 1)`

탄성 (희귀, 악센트): '입방-베 지어 (0. 2, 0. 8, 0. 2, 1. 2) '오버 슈트 한계가있는

규칙: 움직임과 불투명도에 선형 보간을 동시에 사용하지 마십시오-" 역학 "느낌.

4) 전환 안무

외관: 가벼운 스케일 0. 98→1. 0 + 페이드 인, 원산지 축을 따라 8-16 px 오프셋.
실종: 역순으로 진입보다 빠릅니다 (-20-30%).
회전/변경 탭: 일반적인 "베이스" (컨테이너) 는 16-24 px로 이동합니다. 모션이 시작되기 전에 활성 탭이 강조 표시됩니다.
목록: 캐스케이드를 느슨하게합니다 (스태거 20-40ms/요소, 6-8 요소 이하).

5) 마이크로 상호 작용 (패턴)

버튼 (호버/프레스): shadow + light subscreen/scale 0. 98; 프레스 바운스 λ80ms.
초점: 흐림이없는 대비 링; 빛이 아닌 애니메이션 두께/투명도.
입력: 초점에 대한 캐리지/필드 조명; 오류-흔들림으로 6 px, 140ms, 1 사이클.
토글/체크 박스: 최종 위치로 이동하여 지연을 60-80ms 이하로 클릭하십시오.
해골/하중: 날카로운 플래시없이 1200-1600ms, 밝기 진폭이 20% 반짝입니다.

6) 내용 상태

→ 성공/빈/오류 로딩: 움직임의 하나의 "채널"; 다른 방향을 혼합하지 마십시오.
토스트/경고: 이벤트의 소스 측에서 도착합니다 (예: 사용자 동작의 오른쪽 하단).
새로 고침: 탄성 스프링 장력; 반환 시간 × 250 ms.

7) 접근성 (A11y) 및 보안

'선호 감소 모션: 감소' 지원: 움직임을 페이드/스케일 지정 1% 또는 정적 전환으로 교체하십시오.
초당 3 번 플래시를 피하고 큰 대비 플래시 (감광성 간질) 를 피하십시오.
멀미 병력이있는 사용자는 강력한 시차/확대를 사용하지 마십시오. 연결 해제 옵션을 만듭니다.

포커스 스타일은 항상 애니메이션 (컬러/모션뿐만 아니라) 없이 볼 수 있습니다

8) 성능 (대상으로 60 FPS)

불투명도 및 변환 만 애니메이션 (번역/스케일/회전); '위/왼쪽/너비/높이' 를 피하십시오.
합성 포함: '변환: translateZ (0)' 또는 '의지 변경: 변환, 불투명도'.
여러 요소에서 큰 흐림 그림자와 필터를 애니메이션하지 않아 다시 페인트를 최소화하십시오.
큰 전환을 일치시킵니다. 요청 애니메이션 프레임 사용.
목록의 경우 오프 스크린 가상화/재 레이아웃.

9) 디자인 시스템의 모션 토큰

json
{
"motion": {
"duration": { "xs": 100, "sm": 160, "md": 220, "lg": 280, "xl": 340 },
"easing": {
"standard": "cubic-bezier(0. 2, 0. 0, 0. 2, 1)",
"emphasis": "cubic-bezier(0. 05, 0. 7, 0. 1, 1)",
"decelerate": "cubic-bezier(0. 0, 0. 0, 0. 2, 1)",
"accelerate": "cubic-bezier(0. 4, 0. 0, 1, 1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

지속 시간 '완화' 스태거}. {역할} '-' 호버 ',' 포커스 ',' 오버 레이 인 ',' 전환 ',' 리스트 아이템 '.

10) 구현 (CSS/JS/반응)

css
:root {
--motion-dur-sm: 160ms;
--motion-dur-md: 220ms;
--motion-ease: cubic-bezier(0. 2, 0, 0. 2, 1);
}
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration: 0. 01ms! important; }
}

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

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

Lottie/SVG: 예시적인 빈 상태 및 온 보딩에 사용하십시오. 중요한 통제가 아닙니다. 최적화 및 캐시.

11) 로딩 패턴

컨텐츠 구조가 알려진 스피너 대신 스켈레톤.
진행 상황: 진행 상황이 알려진 경우 결정 론적 막대; 불확실한-" 저크 "없이 균일 한 속도로.
재건 할 때 "부동" 골격-잠금 치수를 피하십시오.

12) 페이지/화면 전환

관심 지점 (공유 요소 전환) 을 유지하십시오-카드가 부분으로 "확장" 됩니다.
탐색 "깊은" 은 앞으로/오른쪽/위로, "뒤로" -뒤로; 플랫폼의 방향은 동일합니다.
오버레이시 배경 기판이 40-60% 로 어두워집니다.

13) iGaming의 세부 사항

스핀/공개: 하나의 짧은 가속 (보통 200 ms) + 균일 한 회전 + 소프트 감쇠; 행동없이 무한주기 금지.
Win/Jackpot: 가벼운 스플래시 및 500 ms, 스트로브 없음; 소량의 이중 사운드; 승리 텍스트를 읽을 수 있습니다 (대조적으로 AAA).
토너먼트/등급: 계정 증가-" 점프 "레이아웃없이 테이블 번호와 40-60 ms/단위 (배치) 의 가벼운 단계에 대응합니다.
책임있는 플레이: 방해 효과가없는 알림 및 제한; 애니메이션은 최소한이며 가독성에 중점을 둡니다.

14) 반 패턴

응답을 클릭하려면> 120ms를 지연시킵니다.
불투명도 + 스케일 0의 "엘리베이터". 9→1. 05→1. 0은 모든 작은 것에 대한 오버 슈트입니다.
스크롤과 충돌하는 배경 시차.
무한 깜박임/맥동.
일련의 요소에서 레이아웃/페인트 속성 ('높이', '왼쪽', '필터: 흐림 ()') 을 애니메이션합니다.
동일한 동작에 대한 일정하지 않은 곡선 및 지속 시간.

15) 프로세스 및 QA

• 타이밍/커브가있는 프로토 타입; 프레임 수준 안무.
• 모션 토큰 카탈로그 및 구성 요소의 예.

• 단위 가시성/상태 테스트 (전환은 예상대로 종료).
• 시각적 테스트 (애니메이션 끝의 스냅 샷).
• 최대로드가있는 장면에서 성능/타임 라인.

• '감소 운동 선호' 가 지원됩니다.
• 변형/불투명도 만.
• 듀레이션과 곡선은 토큰에 해당합니다.
• 플래시> 3/sec 및 강한 스트로브 없음.
• 가능한 경우 스피너 대신 스켈레톤.
• 전환은 가역적이고 예측 가능합니다.

16) 설계 시스템의 문서

모션 토큰: 예제가있는 지속 시간/완화/스 태거.
"전환 패턴": 모달, 목록, 탭, 페이지.
"A11y & Performance": 모션 감소 및 합성 안내.
"Do/Do n 't": 좋은/나쁜 예를 가진 짧은 클립.

간략한 요약

모션 디자인은 원인과 결과의 언어입니다. 타이밍을 짧게 유지하고 곡선을 일관되게 유지하며 속성을 렌더링하기에 저렴 가용성을 존중하고 토큰을 문서화하며 성능을 확인하 그런 다음 애니메이션은 UX를 강화하고 인터페이스의 속도와 선명도를 방해하지 않습니다.