이징 vs. 스프링
짧은 답변
이징은 설정된 타이밍 커브를 따릅니다. 스프링은 실제 스프링처럼 움직이며 스스로 멈춥니다.
페이드, 색상 변경 및 시간 기반 단계에는 이징(easing)을 사용하세요. 드래그를 따라가는 객체에는 스프링(spring)을 사용하세요.
각 패턴이 무엇을 하는지 확인하세요
각 예제를 시도해 보세요. 그런 다음 그것이 수행하려는 작업에 대해 읽어보세요.
Easing
↗ 이징
이징은 애니메이션이 빨라지고 느려지는 방식을 정하는 시간 곡선이에요.
cubic-bezier()패널은 빠르게 나타났다가 살짝 부드럽게 멈춰요. 사라질 때는 더 빠르고 간단하게 사라져요.
- 사용할 때
- 속도가 무게, 방향, 목적을 보여야 할 때 이징을 사용하세요.
- 다음 경우에는 사용하지 마세요
- 모든 상호작용에 대해 같은 큰 바운스를 사용하지 마세요.
- 코드에서 사용된 이름
cubic-bezier()
Spring Animation
↗ 스프링 애니메이션
스프링 애니메이션은 물리 모델을 따릅니다. 강성, 감쇠, 질량, 초기 속도가 움직임을 제어합니다.
stiffness / damping / mass끌어서 옮긴 카드는 자기 자리를 살짝 넘어갔다가 다시 제자리로 돌아와요.
- 사용할 때
- 중단할 수 있고 사용자의 속도를 유지해야 하는 제스처 기반 움직임에 사용하세요.
- 다음 경우에는 사용하지 마세요
- 일반적인 컨트롤이나 민감한 작업에 과도한 바운스를 절대 추가하지 마세요.
- 코드에서 사용된 이름
stiffness / damping / mass
빠른 비교
| UI 패턴 | 이런 경우에 가장 좋아요 | 대상 아님 | 코드에서 사용된 이름 |
|---|---|---|---|
| 이징Easing | 속도가 무게, 방향, 목적을 보여야 할 때 이징을 사용하세요. | 모든 상호작용에 대해 같은 큰 바운스를 사용하지 마세요. | cubic-bezier() |
| 스프링 애니메이션Spring Animation | 중단할 수 있고 사용자의 속도를 유지해야 하는 제스처 기반 움직임에 사용하세요. | 일반적인 컨트롤이나 민감한 작업에 과도한 바운스를 절대 추가하지 마세요. | stiffness / damping / mass |
출시하기 전에
- 01
그 사람이 해야 할 일을 적으세요.
- 02
키보드, 포커스, 터치, 확대/축소, 로딩, 비어 있음, 오류 상태를 테스트하세요.
- 03
사람들이 마우스 오버나 동작 없이 동일한 정보를 얻을 수 있도록 하세요.
- 04
작은 화면과 큰 화면에서 실제 콘텐츠로 테스트하세요.
04
비교 요청 복사 가능
팀이 패턴 사이에서 선택하는 데 도움이 필요할 때 이것을 복사하세요.
실제 사용자 흐름에 가장 적합한 패턴을 이징 (Easing)、스프링 애니메이션 (Spring Animation)에서 선택하세요. 이 규칙 사용: 이징은 설정된 타이밍 커브를 따릅니다. 스프링은 실제 스프링처럼 움직이며 스스로 멈춥니다. 작업, 콘텐츠 양, 흐름 중단 비용을 기록하세요. 키보드, 터치, 로딩, 오류, 축소 동작을 확인하세요. 선택 이유를 설명한 후 프로젝트 디자인 시스템으로 가장 작은 접근 가능한 버전을 만드세요.