Data & Numbers

지도나 지구본 위의 지점 사이로 선과 점이 움직입니다.

[적용할 곳]에 맵 아크 애니메이션(Animated Map Arcs)을 넣어 줘. 글로브 아크(globe arcs)라고도 불러.
점으로 된 지도 위 지점 사이에 곡선이 하나씩 차례로 그려진 뒤 목적지 쪽으로 거둬지고, 목적지에서는 부드러운 고리가 맥박치듯 퍼지게 해 줘. 차분하고 일정하게.
호들이 한꺼번에 움직이지 않게 시차를 두고, 반복은 끊김 없이 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.

막대가 높이 0에서 데이터 값까지 솟아오릅니다.

[적용할 곳]에 바 차트 그로우(Bar Chart Grow) 애니메이션을 넣어 줘. 애니메이티드 바 차트(animated bar chart), 바 차트 엔트런스(bar chart entrance)라고도 불러.
막대가 기준선에서 값까지 빠른 시차를 두고 하나씩 차례로 올라오고, 자리 잡을 때 부드럽게 감속하게 해 줘.
차트가 화면에 들어올 때 한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 완성된 차트를 바로 보여 줘.

값이 바뀜에 따라 가로 막대의 순위가 시간에 따라 뒤바뀝니다.

[적용할 곳]에 바 차트 레이스(Bar Chart Race)를 넣어 줘. 레이싱 바 차트(racing bar chart)라고도 불러.
시간에 따라 값이 바뀌면 가로 막대가 늘고 줄며, 순위가 바뀔 때마다 서로 부드럽게 미끄러져 자리를 바꾸고, 막대마다 레이블이 따라다니게 해 줘.
자리바꿈이 튀지 않고 미끄러지도록 마크업 순서를 바꾸지 말고 transform으로 막대를 옮기고, 사용자가 멈출 수 있는 방법을 줘.

데이터가 바뀌거나 데이터셋을 전환하면 차트 요소가 이전 값에서 새 값으로 부드럽게 이어집니다.

[적용할 곳]에 차트 데이터 트랜지션(Chart Data Transition)을 넣어 줘. 차트 업데이트 애니메이션(chart update animation)이라고도 불러.
데이터가 바뀌면 0부터 다시 그리지 말고, 모든 막대가 이전 값에서 새 값으로 동시에 부드럽고 여유 있게 옮겨 가게 해 줘.
빠르게 두 번째 변경이 와도 튀지 않게 매번 화면에 보이는 현재 값에서 시작하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 새 값을 바로 적용해 줘.

링이나 원형 차트가 시계 방향으로 비율만큼 채워집니다.

[적용할 곳]에 도넛 차트 필(Donut Chart Fill) 애니메이션을 넣어 줘. 파이 차트 스윕(pie chart sweep), 애니메이티드 도넛 차트(animated donut chart)라고도 불러.
맨 위에서 시작해 각 구간이 차례로 시계 방향으로 채워지며 링이 각자의 비율을 보여 주고, 끝날 때 부드럽게 감속하게 해 줘.
차트가 화면에 들어올 때 한 번만 재생하고, 실제 값은 스크린 리더가 읽을 수 있게 텍스트로 남겨 줘.

숫자가 화면에 보이면 시작 값에서 목표 값까지 셉니다.

[적용할 곳]에 넘버 티커(Number Ticker)를 넣어 줘. 카운트 업(count up), 애니메이티드 카운터(animated counter)라고도 불러.
숫자가 화면에 들어오면 0부터 목표 값까지 세되, 처음엔 빠르다가 도착할 때 부드럽게 느려지게 해 줘.
주변이 흔들리지 않게 고정폭 숫자를 쓰고, 한 번만 세고, 스크린 리더와 모션 줄이기(prefers-reduced-motion)를 켠 사용자에게는 최종 값을 바로 보여 줘.

숫자가 바뀌면 각 자리가 세로로 굴러 새 값이 됩니다.

[적용할 곳]에 오도미터(Odometer) 숫자 애니메이션을 넣어 줘. 롤링 넘버(rolling numbers), 슬롯머신 숫자(slot-machine digits)라고도 불러.
값이 바뀌면 각 자리가 항상 앞쪽 방향으로 세로로 굴러 새 숫자가 되고, 자리마다 살짝 시차를 두고 끝에서 작게 자리 잡게 해 줘.
숫자가 밀리지 않게 모든 자리의 폭을 같게 하고, 스크린 리더에는 최종 값만 읽히게 해 줘.