新潟オフィスの宮尾です。
さて今回のブログですが、
AdobeXDのアニメーションで遊んでみたvol.1になります。
XDを使い始めて、
アニメーションのあるプロトタイプを作成する機会が多くなったので、
学んだことをやり方含めいくつか紹介していきたいなと思います!
今回作るアニメーションは以下の2つです。
1.ローディングアニメーション
2.モバイルメニューの展開アニメーション
早速作っていきたいと思います!
1. ローディングアニメーション
まずローディングアニメーションですが、
青色のメーターが左から右へ動いていくアニメーションになります。
まずはローディングバーの作成をします。
アートボードにバーの土台となるグレーの角丸長方形と、
角丸正方形のローディングメーターを用意します。
ここで正円描写ツールを使用してしまうと、
うまくアニメーションが作れないので注意です!
パーツが完成したら、
アートボード名を「optiono」+「shift」キーを押しながらクリック&ドラッグし、
アートボードを複製します。
複製した側の、
角丸正円をググッと引き伸ばして、
パーツ作成はこれで完了です。
次にXDのプロタイプに切り替え、アニメーション作りを行います。
はじめに作成したアートボードを選択し、
青い矢印のハンドルをクリック&ドラッグをして
複製をしたアートボード上で矢印を放します。
リンク設定が終わったら、トランディションと時間を指定します。
・トリガー「時間」
・ディレイ「1秒」
・アクション「自動アニメーション」
・イージング「イーズイン/アウト」
・デュレーション「2秒」
と設定しました。
これでローディングアニメーション作成の完成です。
サクッと作れるアニメーションなのでぜひお試しください!
2. モバイルメニューの展開アニメーション
次に作成するのはメニューボタンをクリックして展開を行うアニメーションです。
作り方はとても簡単!
スマホ用のデザインとメニューの展開デザインを、
それぞれ別のアートボードで作成します。
デザインが完成したら、プロトタイプ画面に切り替えます。
ここで使用するのが「オーバーレイ」機能!
画面上に指定したアートボードのデザインを上乗せして表示できる機能となります。
ハンバーガーメニューを選択し、作成したメニューデザインへリンク設定を行います。
・トリガー「タップ」
・アクション「オーバーレイ」
・アニメーション「左にスライド」
・イージング「イーズイン/アウト」
・ディレーション「0.4秒」
と設定しました。
これで、メニューボタンをクリックして展開できるアニメーション作成の完成です!
いかがでしたでしょうか?
リンクと少ない設定だけで、インタラクションが簡単に作成できました。
実際にXDのアニメーションを使用してみると、
応用ができたりとか組み合わせもできたりとか奥が深いです。。。
日々使って学んだことをこれからも発信しますので、
ぜひvol.2もお楽しみに!
MIYAO.N
デザイナー
--