【Adobe XD】自動アニメーションの基本とすぐに使える5つの事例

Adobe XD

今回はXDの自動アニメーションでできることと、すぐに使える5つのボタンエフェクトをご紹介します。

自動アニメーションでできること

1. 要素の移動

オブジェクトを縦方向・横方向に移動することができます。

2.サイズの変更

オブジェクトのサイズを変更したり、違う図形へ変形することができます。

3.回転や反転

オブジェクトを回転したり、左右・上下に反転することができます。

4.透明度の変化

オブジェクトの表示をフェードアウト・フェードインで制御することができます。

自動アニメーションの付け方

自動アニメーションは主にオブジェクトやパス、画像などにつけることができます。

前準備

  1. アートボードにオブジェクトを配置する
  2. アートボードを複製して、位置や透明度など自由に変化をつける

自動アニメーションでは、複数のアートボードに渡って変化を同期させるオブジェクトを「オブジェクト名」で判断しています。そのため、アニメーションをつける際は必ず2つのオブジェクトの名前が一致していることを確認しましょう!

確認方法

  1. プロトタイプ画面に移動する
  2. アートボード同士を遷移する

この時、右側のインタラクションメニューで「自動アニメーション」を選択してください。

インタラクションメニューでは、その他にも自動アニメーション時のきっかけや変化の時間について細かく設定することができます。

トリガー

BeforeからAfterへ変化するきっかけの動作を設定します。

タップマウスのクリックやスマホのタップで変化します
ドラッグマウスや指をドラックすることで変化します
時間一定時間が経過することで変化します
キーとゲームパッドパソコンのキーボードや連携させたゲームコントローラーボタンで変化します
音声設定した言葉を発することで変化します

イージング

変化するスピードや効果を設定することができます。

なし最初から最後まで一定のスピードで変化します
イーズアウト最後にかけて変化のスピードが遅くなります
イーズイン最初の変化のスピードが遅くなります
イーズイン/アウト最初と最後の変化のスピードが遅くなります
スナップオブジェクトが少し行き過ぎて戻ります
ワインドアップオブジェクトが少し助走をつけて変化します
バウンス跳ね返ったような効果を加えます

ボタンで使える5つの事例

自動アニメーションの基本を学習したら、実際にXDで様々なアニメーションを作成してみましょう。ここでは、Webサイトでよく見かけるボタンのアニメーションを10種類ご紹介します。

1. 透過する

王道のhoverアニメーションですね。透過のみなので、アニメーションも手軽に設定できます。

  • 変化前:透過を100%にする
  • 変化後:透過 を40%にする

2. 色を変化させる

ある色からある色へ、グラデーションのように変化するアニメーションです。事前に背景(黒)の前面に背景(水色)のオブジェクトを重ねてセットしておきます。

  • 変化前:背景(水色)の透過0%にする
  • 変化後:背景(水色)の透過100%にする

3. 矢印を動かす

ボタンの中にある矢印を動かすアニメーション効果です。アイコンは Font Awesome のものを使っています。

  • 変化後:矢印のX座標を+20px移動する

4. 立体的なボタンを押す

ボタンが立体的に見えるよう、あらかじめボタンの真下に高さ10pxの長方形をセットしておきます。この時基点を底辺にするため、長方形は180度回転しておくのがポイントです。

  • 変化前:ボタンの下に高さ10px、回転180度の長方形をセットする
  • 変化後:長方形の高さを0pxにする&ボタンのY軸を-10px移動する

5. スライド効果をつける

XDのリピートグリッドを使ったアニメーション効果です。2種類のボタンを重ねたのちに前面にあるボタンにリピートグリッドをかけ、サイズを変更していきます。

  • 変化前:前面のボタンにリピートグリッドをかけ、幅を0pxにセットする
  • 変化後:前面のボタンの幅を100%に戻す

まとめ

そのほかにもXDでは、工夫次第でさまざまなアニメーションをつけることができます。基本的な操作をマスターしたら、今度は是非あなたのお気に入りを見つけてくださいね。