このレッスンでは、Adobe XDのコンポーネントのステート機能を利用して、表示されるとアニメーションする折れ線グラフを作成する方法を解説します。
Adobe XDを起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプル画面が表示されます。
コンポーネントにステートを追加
予め「高度」のグラフが表示されたワークアウト画面が用意されています。まずは、このグラフをコンポーネント化します。
次に、コンポーネントにステートを追加します。プロパティインスペクタの「初期設定のステート」横にある＋アイコンをクリックしてポップアップメニューを表示し、「新規ステート」を選択するとステートが追加されます。追加したステートには「Speed」と名前をつけます。
追加したステートを編集
Speedステートが選択されている状態であることを確認し、コンポーネントの見た目を編集します。まず、オレンジ色のタブボタンを、「速度」のテキストの下に移動します。次に、グラフの縦軸の項目を速度用に変更します。最後に、折れ線グラフの形状のパスを適宜変更します。
プロパティインスペクタの「初期設定のステート」と「Speed」ステートを交互にクリックすると見た目の変化を確認できます。
インタラクションの追加
ワークスペース上部のタブをクリックしてプロトタイプモードに移動し、初期設定のステートに対してインタラクションを設定します。プロパティインスペクタの「初期設定のステート」が選択されている状態で、「速度」のテキストを選択します。青い矢印が表示されたらクリックして、ハンドルが伸びた状態にします。
プロパティインスペクタのトリガーに「タップ」を、アクションの種類に「自動アニメーション」を、移動先に「Speed」ステートを選択します。イージングとデュレーションも適切な値に設定します。
次に「Speed」ステートを選択します。コンポーネント内の「高度」のテキストを選択して青い矢印をクリックします。プロパティインスペクタには直前の設定内容がそのまま表示されるため、移動先を「初期設定のステート」に変更します。
インタラクションのプレビュー
ワークスペース右上の「デスクトッププレビュー」ボタンをクリックして、プレビューウィンドウを開きます。「速度」と「高度」のタブを交互にタップすると、折れ線グラフがアニメーションしながら表示されることを確認できます。