tips

AdobeXDのアニメーションで遊んでみた vol.1

March 19, 2020

  • このエントリーをはてなブックマークに追加

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • このエントリーをはてなブックマークに追加

ライター紹介

MIYAO.N

デザイナー

--

お気軽にお問い合わせください。
ご質問やご相談を承ります。どうぞ、お気軽にお問い合わせください。

お問い合わせ

メールマガジン登録
バックナンバーへ

最新の制作事例や季節のトピックス、デザイナーのつぶやきなど、das.ならではの情報をお届けします。
なお、メールアドレス入力前に「個人情報の取り扱いについて」をご覧ください。
ここでご入力いただきましたeメールアドレスは、メールマガジン配信のためだけに使用いたします。

follow us