Adobe XD でつくるアニメーション [ ホバー、タップ、ディレイ ]

制作の久保田です。

今回は、adobe xd のアニメーション（インタラクション）機能について見ていきます。
まずは表示確認用に作成したデモページをご覧ください。

ボタンのマウスオーバー、ナビゲーションの開閉、パララックス、スライダー、モーダル等、フォトショップやイラストレーターではできなかった動的なデザインの作成方法を見ていきます。

ホバーデザイン

一番最近追加されたホバー時のデザイン作成方法です。
動画の以下のボタン部分の動きです。

まずは、普通にボタンのデザインをつくります。
次に、ボタンを選択した状態で、以下パネルの「コンポーネント」を追加していきます。

コンポーネント右の（＋）ボタンをクリック
初期設定のステートの右の（＋）ボタンをクリック
ホバーステートを選択して追加

追加された「ホバーステート」を選択した状態で、ボタンのデザインを変更します。
「初期設定のステート」を選択すると、デフォルトのデザインが残ってることが確認できると思います。

アニメーションの設定は「プロトタイプ」のパネルで行えます。
プロトタイプへ移動して、初期設定のステートを選択すると、トリガー／ホバーのインタラクションが追加されているので、
アクションやイージング等設定してみましょう。

ちなみに、アクションの「トランジション」は、色や透明度など、「自動アニメーション」は、位置や形状などのアニメーションです。

ナビゲーション（オーバーレイ）

これをクリックすると、メニューが開く動作を作成していきます。

開閉ボタンを作成
新規アートボードで開いた状態のメニューを作成
「プロトタイプ」画面に移動し、開閉ボタンとメニューを紐付けます
「アクション」に「オーバーレイ」を設定

オーバーレイを設定することで、クリック元のデザインに重ねて表示できるようになります。
また、クローズボタンをクリックでメニューを閉じる動きは、「アクション」に「ひとつ前のアートボード」を選択で実装できます。

ロード（トリガー／時間）

トリガー（実行のきっかけ）は、タップやホバーの他に「時間」でも設定可能です。
トリガーで時間を設定することで、ページを読み込んでから、ふわっと表示させるみたいな動作も実装できます。
サンプル動画では、一番最初に読み込んだとき、背景画像やロゴが遅れて表示される動作をつけてます。

新規アートボードを作成し、アニメーションさせたいページをコピペします
「プロトタイプ」画面に移動し、新規に作成したアートボードと、元のアートボードをつなぎます
トリガーを「時間」に設定
新規アートボード内のオブジェクトの位置や透明度などを変更します

上記では、ふわっと表示させるために、透明度を0、位置を少し下にずらしてます。
ずらす距離を変えることで、ちょっと時間差をつくったりもできます。

トリガーの設定は以下みたいな感じです。もし、トリガーに「時間」が表示されなかったら「アートボード」に対してアニメーション設定しているか確認してください。「時間」はアートボードにのみ有効です。
アートボードの選択は、アートボード名（上の画像の before / after の部分）クリックでできます。