このレッスンでは、Adobe XDのアニメーション機能と破線を使って、表示されるとアニメーションする円グラフをつくる方法を解説します。
Adobe XDを起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプル画面が表示されます。
アニメーション後の円グラフの作成
予め、アクティビティ一覧画面と詳細画面が用意されています。詳細画面はアニメーション前とアニメーション後の2つがあります。
まず、右側のアニメーション後の画面に、直径170の大きさの円を作成し、円の塗りをオフに、線の色をカラーパレットに予め登録しているオレンジ色に変更します。そして、線のサイズを16に、線の先端を丸型にして、シャドウの設定も行います。
作成した円をコピー＆ペーストし、サイズを120に変更して内側の円を作成します。内側の円の線とシャドウの色を変更します。
外側の円の線分のフィールドに、直径170×円周率3.14×長さの割合0.9と入力して円周の90%の破線にします。間隔は円周の長さと同じにします。同じ要領で、内側の円も、線分を円周の90%に、間隔を円周の100%にします。
アニメーション前の円グラフの作成
次に、アニメーションの初期状態を作成します。中央のアートボードに、作成した2つの円をコピー＆ペーストします。外側と内側それぞれの円の線分を0にすると、丸型先端だけが円周上に表示されます。
タイマー起動の自動アニメーションを設定
ワークスペース上部のタブをクリックしてプロトタイプモードに移動し、アニメーション前のアートボードの青い矢印を、アニメーション後のアートボードへつなげます。
プロパティインスペクタのトリガーを「時間」に、ディレイを「0秒」にすると、表示後すぐにアクションが実行されます。アクションの種類は「自動アニメーション」に、移動先はアニメーション後のアートボード、イージングとデュレーションも適切に設定します。
続けて、一覧画面から詳細画面への遷移も設定します。
ワークスペース右上の「デスクトッププレビュー」ボタンをクリックして、プレビューウィンドウを開きます。アクティビティ一覧のカードをタップすると、円グラフがアニメーションしながら表示されます。