Chart Data Transition (チャートデータトランジション)
別名 Chart Update Animation
データが変わったりデータセットを切り替えたりすると、グラフの要素が古い値から新しい値へ滑らかに補間されます。
使いどころ
リアルタイムのダッシュボード
バリエーション
- value tween
- show/hide fade
- hover active transition
- looped animation
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にチャートデータトランジション(Chart Data Transition)を追加してください。チャートアップデートアニメーション(chart update animation)とも呼ばれます。
データが変わったら、ゼロから描き直すのではなく、すべてのバーが古い値から新しい値へ同時に、滑らかに落ち着いたペースで移るようにしてください。
素早く2回目の変更が来ても飛ばないよう各更新は画面上の現在の値から始め、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は新しい値を即座に反映してください。