新潟オフィスの宮尾です。

さて今回のブログですが、
AdobeXDのアニメーションで遊んでみたvol.1になります。
XDを使い始めて、
アニメーションのあるプロトタイプを作成する機会が多くなったので、
学んだことをやり方含めいくつか紹介していきたいなと思います！

今回作るアニメーションは以下の2つです。

１.ローディングアニメーション
2.モバイルメニューの展開アニメーション

早速作っていきたいと思います！

1. ローディングアニメーション

まずローディングアニメーションですが、
青色のメーターが左から右へ動いていくアニメーションになります。

まずはローディングバーの作成をします。
アートボードにバーの土台となるグレーの角丸長方形と、
角丸正方形のローディングメーターを用意します。
ここで正円描写ツールを使用してしまうと、
うまくアニメーションが作れないので注意です！

パーツが完成したら、
アートボード名を「optiono」＋「shift」キーを押しながらクリック&ドラッグし、
アートボードを複製します。

複製した側の、
角丸正円をググッと引き伸ばして、
パーツ作成はこれで完了です。

次にXDのプロタイプに切り替え、アニメーション作りを行います。
はじめに作成したアートボードを選択し、
青い矢印のハンドルをクリック&ドラッグをして
複製をしたアートボード上で矢印を放します。

リンク設定が終わったら、トランディションと時間を指定します。

・トリガー「時間」
・ディレイ「1秒」
・アクション「自動アニメーション」
・イージング「イーズイン/アウト」
・デュレーション「2秒」
と設定しました。
これでローディングアニメーション作成の完成です。
サクッと作れるアニメーションなのでぜひお試しください！

2. モバイルメニューの展開アニメーション

次に作成するのはメニューボタンをクリックして展開を行うアニメーションです。

作り方はとても簡単！
スマホ用のデザインとメニューの展開デザインを、
それぞれ別のアートボードで作成します。

デザインが完成したら、プロトタイプ画面に切り替えます。
ここで使用するのが「オーバーレイ」機能！
画面上に指定したアートボードのデザインを上乗せして表示できる機能となります。

ハンバーガーメニューを選択し、作成したメニューデザインへリンク設定を行います。
・トリガー「タップ」
・アクション「オーバーレイ」
・アニメーション「左にスライド」
・イージング「イーズイン/アウト」
・ディレーション「0.4秒」
と設定しました。

これで、メニューボタンをクリックして展開できるアニメーション作成の完成です！
いかがでしたでしょうか？
リンクと少ない設定だけで、インタラクションが簡単に作成できました。
実際にXDのアニメーションを使用してみると、
応用ができたりとか組み合わせもできたりとか奥が深いです。。。
日々使って学んだことをこれからも発信しますので、
ぜひvol.2もお楽しみに！