Animated Map Arcs (맵 아크 애니메이션)

마커나 호가 그려진 3D 지구가 레이아웃 안에서 회전합니다.

[적용할 곳]에 3D 글로브(3D Globe)를 넣어 줘. 인터랙티브 글로브(interactive globe)라고도 불러.
표면에 마커 몇 개가 있는 지구본이 마커와 함께 축을 중심으로 느리고 일정하게 돌게 해 줘. 차분하고 끊김 없이.
장식으로 두고 보여 주는 정보는 텍스트 대체를 마련하고, 화면 밖에 있을 때는 멈추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 회전을 멈춰 줘.

두 요소를 잇는 선을 따라 빛나는 펄스가 이동합니다.

[적용할 곳]에 빔 애니메이션(Animated Beam) 효과를 넣어 줘. 커넥팅 빔(connecting beam)이라고도 불러.
두 요소를 잇는 선을 따라 짧게 빛나는 펄스가 한쪽 끝에서 다른 쪽 끝으로 일정하게 이동하고 다시 시작하게 해 줘. 부드럽고 차분하게.
연결선 자체는 항상 보이게 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 펄스를 멈춰 줘.

요소가 직접 정한 곡선 경로를 따라 이동하며, 경로에 맞춰 방향을 돌릴 수도 있습니다.

[적용할 곳]에 모션 패스(Motion Path) 애니메이션을 넣어 줘. 애니메이트 얼롱 패스(animate along path)라고도 불러.
작은 요소가 직접 정한 곡선 경로를 따라 느리고 일정한 속도로 이동하면서, 나아가는 방향을 바라보도록 돌게 해 줘.
반복이 튀지 않게 닫힌 경로를 쓰고, 경로는 고정 크기가 아니라 컨테이너 크기에 맞춰 늘고 줄게 해 줘.

막대가 높이 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)를 켜 두었으면 새 값을 바로 적용해 줘.