このレッスンでは、Adobe XDのアニメーション機能と破線を使って、表示されるとアニメーションする表示されるとアニメーションする棒グラフをつくる方法を解説します。
Adobe XDを起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプル画面が表示されます。
アニメーション後の棒グラフの作成
予め、アクティビティ一覧画面と詳細画面が用意されています。詳細画面はアニメーション前とアニメーション後の2つがあります。右側のアニメーション後の画面には、高さ70の棒グラフが作成済みです。棒の線のサイズは4、先端は丸型です。
棒のグループを選択し、線分の値に70を入力して破線にします。間隔の値も70に設定します。線の高さを0にして、棒の位置をグラフのX軸に揃えます。そして、いくつかの線を選択して適宜高さを調整します。これがアニメーション後の見た目になります。
同じ操作を上下2つの棒グラフに対して行います。
アニメーション前の棒グラフの作成
次に、アニメーションの初期状態を作成します。中央のアートボードに、作成したグラフをコピー＆ペーストします。線のグループを選択して、線分を70から0に変更します。
タイマー起動の自動アニメーションを設定
ワークスペース上部のタブをクリックしてプロトタイプモードに移動し、アニメーション前のアートボードの青い矢印を、アニメーション後のアートボードへつなげます。
プロパティインスペクタのトリガーを「時間」に、ディレイを「0秒」にすると、表示後すぐにアクションが実行されます。アクションの種類は「自動アニメーション」に、移動先はアニメーション後のアートボード、イージングとデュレーションも適切に設定します。
続けて、一覧画面から詳細画面への遷移も設定します。
ワークスペース右上の「デスクトッププレビュー」ボタンをクリックして、プレビューウィンドウを開きます。アクティビティ一覧のカードをタップすると、棒グラフがアニメーションしながら表示されます。