모션
이징 네 가지와 시간 규칙. 화면의 값은 빌드할 때 제품 코드에서 바로 읽었어요.
이징#
같은 거리·같은 시간에서 곡선만 바꿨어요. 값은 CSS 변수 --ease-*예요.
--ease-out
진입·이탈(기본)
--ease-in
이탈 전용(로테이션)
--ease-in-out
화면 안 이동·모프
--ease-drawer
시트·도크(iOS식)
시간 규칙#
눌림
0.97배 · 160ms
버튼과 칩은 누르는 순간 줄어요.
작은 팝오버
150~200ms
누른 자리에서 나와요.
시트·도크
200~300ms
나온 방향으로 돌아가요.
하루 수십 번 보는 것
움직이지 않아요
키보드로 여는 것도 움직이지 않아요.
동작 줄이기 설정을 켠 사람에게는 움직임 대신 짧은 페이드만 보여 줘요.
플랫폼별 값#
| 역할 | 모바일 | PC | Pleos개발 중 |
|---|---|---|---|
| 눌림 | 0.97배 | 0.97배 | 0.95배 + 눌림 면 |
| hover | 없음 | 마우스가 있을 때만 | 없음 |
Pleos 값은 차량 앱 공개 저장소(reevl-for-pleos)의 테마 코드에서 옮겼어요. 차량 앱은 개발 중이에요.