Data & Numbers

地図や地球儀の上で、地点と地点の間を線や点が動きます。

[適用する場所]にマップアークアニメーション(Animated Map Arcs)を追加してください。グローブアーク(globe arcs)とも呼ばれます。
ドットの地図上で地点と地点の間に曲線が一本ずつ描かれ、その後目的地へ向かって縮み、目的地では柔らかなリングが脈打つようにしてください。落ち着いて一定のリズムで。
アークが同時に動かないようタイミングをずらし、ループは継ぎ目なくし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は一時停止してください。

棒が高さゼロからデータの値まで伸び上がります。

[適用する場所]にバーチャートグロウ(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)とも呼ばれます。
データが変わったら、ゼロから描き直すのではなく、すべてのバーが古い値から新しい値へ同時に、滑らかに落ち着いたペースで移るようにしてください。
素早く2回目の変更が来ても飛ばないよう各更新は画面上の現在の値から始め、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は新しい値を即座に反映してください。

リングや円グラフが時計回りにパーセンテージまで塗りつぶされます。

[適用する場所]にドーナツチャートフィル(Donut Chart Fill)アニメーションを追加してください。パイチャートスイープ(pie chart sweep)、アニメーテッドドーナツチャート(animated donut chart)とも呼ばれます。
上端から始めて、各セグメントが順番に時計回りに広がり、リングがそれぞれの割合を示すまで進み、終わりに滑らかに減速するようにしてください。
グラフが画面に入ったときに一度だけ再生し、実際の値はスクリーンリーダー向けにテキストとして読めるようにしてください。

数字が見えた時点で、開始値から目標値までカウントします。

[適用する場所]にカウントアップ(Number Ticker)を追加してください。カウントアップ(count up)、アニメーテッドカウンター(animated counter)とも呼ばれます。
数字が画面に入ったら、ゼロから目標値までカウントし、最初は速く、着地にかけて穏やかに減速するようにしてください。
周りががたつかないよう等幅の数字を使い、カウントは一度だけにし、スクリーンリーダーとモーションを減らす設定(prefers-reduced-motion)のユーザーには最終値をすぐに示してください。

数値が変わると、各桁が縦に回転して新しい値になります。

[適用する場所]にオドメーター(Odometer)の数字アニメーションを追加してください。ローリングナンバー(rolling numbers)、スロットマシン数字(slot-machine digits)とも呼ばれます。
値が変わったら、各桁が常に前方向へ縦に回転して新しい数字になり、桁ごとに少し時間差をつけ、最後に小さく落ち着くようにしてください。
数値全体がずれないようすべての桁を同じ幅にし、スクリーンリーダーには最終値だけを伝えてください。