머티리얼 디자인 표준 완화 곡선
두 개의 제어점을 드래그하여 사용자 정의 CSS Cubic-bezier() 타이밍 함수를 디자인하고 선형 참조에 대해 실시간으로 미리 본 다음 준비된 값을 복사합니다.
처리 중...
0%
결과
이 페이지에서는 Google의 머티리얼 디자인 모션 가이드라인에 게시된 표준 이징 곡선인 x1=0.4, y1=0, x2=0.2, y2=1이 이미 로드된 생성기를 엽니다. 숫자와 곡선, 실시간 미리보기 및 복사 가능한 CSS 업데이트를 함께 드래그하거나 편집합니다.
머티리얼 디자인에서는 이 곡선을 "표준 완화"라고 부르며 대부분의 화면 전환(이미 표시되어 동일한 화면 내에서 단순히 이동, 크기 조정 또는 페이드되는 요소)에 이를 권장합니다. 그 모양은 빠르게 가속된 다음 부드럽게 제자리로 감속합니다. 이것이 바로 많은 Android 앱과 머티리얼 스타일 웹 UI가 동일한 4개의 숫자를 사용하고 있다는 사실을 아무도 눈치채지 못한 채 동일한 전환 느낌을 공유하는 이유입니다.
머티리얼과 일관된 느낌을 위해 전환 타이밍 기능 또는 애니메이션 타이밍 기능에 바로 끌어 놓거나 참조점으로 사용하십시오. 머티리얼 가이드라인은 또한 화면에 들어오거나 나가는 요소에 대해 별도의 "감속" 및 "가속" 곡선을 정의하는데, 이 단일 표준 곡선은 대체할 의도가 없습니다.