慣れないと動作を作るだけで余裕で一日持っていかれますね、AdobeXDのアニメーション。

ドロップダウンメニューのアニメーション

この画面を

こんなふうにしたいとき。

 

動作としては、以下のようになります。

最初の配置はこう。

ヘッダーをずらすとわかりますが、ヘッダーの下にドロップダウンしてくるメニューがすでに隠されています。リピートグリッドを使ってテキストを打っていますが、下にボックスオブジェクトを設けてリピートしてもOKです。

また、現在見えませんが、グローバルメニューのところのホバーアクションは、カラーの透明度を0にしたボックスを置いています。

ドロップダウンメニューが展開したあとの図を二枚並べて、こんな感じ。

作業としては、

• ヘッダーの下に隠してあるドロップダウン時に展開するメニューを利用して、次のページを作る事。
• ホバーアクションで変化する透明なボックスのカラーを透明度100%にすること。

プロトタイプモードにして繋げたら、設定は「自動アニメーション」へ。

これで上記動画のように動作します。

ヘッダーをコンポーネントしてしまうと、サンプルビューで妙なちらつきが起こります。グループ化も同様。アニメーションしているところを内包してコンポーネント化はできないようです。
メニューの動作とメニューからページの遷移は別に作ったほうがいいかもしれません。

ハンバーガーメニューのアニメーション

やることはだいたい上記と一緒です。

画面はこんな感じ。

ヘッダーの裏にメニューを隠してあります。自動アニメーションで繋げていきます。

ムービーにするとこんな感じ。

なお、ドロップダウンメニューを子までアコーディオンにする場合はちょっと工夫が必要です。
下に隠すのはこの三つの要素。

子要素まで展開しきった場合はこんなふうになります。

アセットに名前を付けて管理しておくとわかりやすいですね。

ポイントなのは、ヘッダーから子要素、その下に回るサンプルタイトル2、3も、最初の画面から一緒に動かしていくこと。
ドロップダウンの一段階めが展開した時点で、子要素とその下の要素を一番手前の要素にし、透明度をゼロにしておくこと。

最終的にこんな動きになります。

 

横スライドインのメニューのアニメーション

オーバーレイ機能を使います。
画面はこんな感じ。

プロトタイプで「オーバーレイ」に設定し、アニメーション後の位置を設置します。

こんな動作になります。

オーバーレイはビューポートに指定した範囲にしか適応できませんのでご注意ください。

グローバルメニューの固定表示

オブジェクトを選択したときに右側メニュー内の「スクロール時に位置を固定」にチェックをつけると、オブジェクトが固定されます。オブジェクトはいくつでも固定にすることが出来ます。

 

様々な使い方がありますが、動作を入れるとどうにもビジュアルのデザインに集中できなくなってしまうのは難点ですね……AAdobeXDの動作を意識しながら使いこなすのにはまだまだ慣れが必要なようです。