Adobe XDでWebサイトの気持ち良いアニメーションを作る♡の巻き。

 

Adobe XDの【自動アニメーション】機能を使って、Webサイトの気持ちいいアニメーションの作る方法です。

好きなデザイン作って、
「自動アニメーション」クリックするだけなんだけどね。笑

あとはAIにおまかせです。
あ〜♡なんて楽なんでしょう。。。
ではどうぞ↓↓

 

Adobe XDはじめての方、超基本的な使い方はこちらで紹介してます★

 

How to


1. アートボード作成
2. アートボード選択して色設定。

 


3. 長方形ツールで画像枠作る

 


4. 画像ドラッグ&ドロップ

 


5. 長方形つくる

 


6.【 背景のぼかし】をクリックして、スライダーを動かす。

この「背景をぼかす」機能、おしゃれなぼかしを作ってくれるんですよね〜♡

画像の上に長方形作ってぼかし→
その上にテキスト乗せる
だけで十分かっこよくなるよ。

 


7. お好みで テキスト&オブジェクトを追加

 


8.アートボードをコピペして複製

 


9.右のアートボードのオブジェクトの形や位置を変える

>右と左のアートボードで、各オブジェクトの名称が完全に同じであることを確認してね。
(これができてないとアニメーションうまくいかないから)

 


10.【プロトタイプ】をクリック

11. 右→左へ青矢印をドラッグ
プロトタイプ設定
【トリガー】タップ
【アクション】自動アニメーション
【イージング】イーズイン/アウト 1秒

 


12. 左→右へ青矢印をドラッグ
プロトタイプ設定
【トリガー】タップ
【アクション】ひとつ前のアートボード

 

完成です★
プロトタイプの設定を変えれば、
アニメーションをもっと速くもしたり遅くしたりできるよん。

※注意なのは、
必ず右と左のアートボードで、オブジェクトの名称を同じにすること。

自動アニメーション機能では、
名称が同じものに対してアニメーションの機能をかけていくので。

 

View this post on Instagram

 

Amity_senseiさん(@aaamity)がシェアした投稿

 

Adobe XDの使い方 こちらもどうぞ↓↓