Figmaでグラフにアニメーションをつける方法をわかりやすく解説します【円グラフ編】

はじめに

前回はFigmaの「スマートアニメート」を使って棒グラフにアニメーションをつける方法を解説しました。
今回はこちらを応用して、円グラフにアニメーションをつける方法を解説していきます。

円グラフにアニメーションをつける手順

円のSweep(スイープ)を変更してスマートアニメートを使用しても、上手くアニメーションをつけることができません。
円グラフにアニメーションをつける際には、前回紹介した適用される5つの変更（拡大縮小、位置、不透明度、回転、塗り）の中から「回転」 と「塗り」を使って作成していきます。
今回は80%のところまで動くアニメーションをつけていきましょう。

 

Step1　変化前のグラフを用意

変化前のグラフから用意します。
背景用の円を作成し、それを複製します。

Step2　Sweepを調整＆円弧を複製

複製した円のSweepを10％にします。
10%の円弧を4個に複製し、グループ化します。
位置はすべて同じところに置きましょう。

Step3　コンポーネントを作成

作成したものをコンポーネント化して、さらにバリアントを追加していきます。

Step4　変更後のグラフを用意

変更後のグラフも作成します。
10％の円弧の色を全て変更し、36°ずつ回転させていきましょう。

Step5　アニメーションのために調整

変更後の円弧のグループを複製し、80%までいくようにグループごと回転させます。
また、変更前の円弧のグループも同じように複製しましょう。こちらは位置を動かしません。

Step6　インタラクションを追加

コンポーネントのグループとレイヤーが同名なのを確認し、プロトタイプ機能からスマートアニメートをつけます。
今回設定したものは以下の通りです。理想のアニメーションにあわせて調整してみてください。

トリガー：While hovering(マウスオーバー)
アクション：Change to(次に変更)
アニメーション：Smart Animate(スマートアニメート)

Step7　動作を確認＆完成！

コンポーネントの設定ができたらフレームに配置し、動作を確認してみましょう。
ホバー時にきちんとアニメーションがついているので完成です。

【補足】なぜ円弧のグループを複製したのか？

Step5で、10％の円弧×4個のグループを2つに複製する工程がありました。なぜ最初から10%の円弧×8個にしないのか、疑問に思った方もおられるかもしれませんが、これには以下のような理由があります。

Figmaの回転機能は-180°を超えることがありません。
仮に60％のグラフを作ろうとして円弧をそのまま回転させると、「-36°」「-72°」「-108°」「-144°」と進んでいき、6個目を「-180°」に変更したいのですが「180°」とプラスの値に置き換わってしまいます。
このようにグループ分けをしない場合、以下のような状態になってしまいます。

この問題は、円弧の回転がマイナスの値を保つことができれば解決します。
10％の円弧が6個以上必要な場合には、複製して2つのグループに分けることで、-180°を超えないように対処しています。
今回はわかりやすく半数の40%ごとにグループ分けをしていますが、条件を達成できるならそれに限りません。

まとめ

いかがでしたか？
少しテクニックのいる内容でしたが、アニメーションがつくことでぐっと魅力的になりますね。

以上でグラフシリーズは終了となります。
ご紹介した内容を活用して、是非素敵なグラフを作成してみてください！

---

---